Advance Your Skills in React Web Accessibility

Description

In this course, you will learn:

• To make interactive features more accessible in React apps, use testing tools, semantic HTML, and ARIA characteristics.
• Gain hands-on experience with screen readers, keyboard navigation, focus management, and visual accessibility approaches including color contrast and motion reduction.
• Learn how to test and create web apps with accessibility in mind, making them more compliant with standards such as WCAG and, most importantly, inclusive to the widest potential audience!

Syllabus:

1. Accessibility Basics

• Benefits of Accessibility
• Accessibility Standards & Definitions
• Screen Readers
• Alternative Text
• Assistive Technologies
• Screen Reader Exercise
• Screen Readers Q&A

2. Testing

• Testing Overview, Linters & Dev Tools
• Accessibility Dev Tools Walkthrough
• Working with Teams
• Debugging Exercise

3. HTML

• Accessible & Semantic HTML
• Landmark Elements, Forms, & Buttons
• Setting Language and Fixing Markup
• Accessible HTML Exercise
• Accessible HTML Solution: Product Details
• Accessible HTML Solution: Header & Gallery

4. ARIA

• ARIA
• Roles, States and Properties
• Live Regions
• Live Regions Exercise

5. Focus Management

• Keyboard Navigation & Skip Links
• Tab Key Navigation & Active Element
• Focus Trapping & Keyboard Shortcuts
• Focus Management Exercise
• Visual Considerations
• Reduced Motion Exercise

Show more