Principle Studios
Web App Accessibility (feat. React)
5 hours, 19 minutes
CC
Course Description
Solve the most common accessibility issues in React apps using testing tools, semantic HTML, and ARIA attributes to make interactive elements accessible. You’ll get hands-on experience with screen readers, keyboard navigation, focus management, and visual accessibility techniques, including color contrast and motion reduction. Learn to test and build with accessibility in mind, making your web apps more compliant with standards like WCAG and, most importantly, inclusive to the broadest audience possible!
This course and others like it are available as part of our Frontend Masters video subscription.
Preview
CloseWhat They're Saying
Just finished the Web App Accessibility Course from Frontend Masters and really liked it. Marcy Sutton Todd did such a great job explaining topics that you might have heard before and thought they were a bit dry in a manner that you want to jump back at your keyboard to test and optimize your apps for a better accessibility. Definitely learned a lot from this one.
Peter S.
Software Developer | Bug Hunter
Course Details
Published: February 26, 2024
Topics
Learn Straight from the Experts Who Shape the Modern Web
Your Path to Senior Developer and Beyond
- 200+ In-depth courses
- 18 Learning Paths
- Industry Leading Experts
- Live Interactive Workshops
Table of Contents
Introduction
Section Duration: 13 minutes
Marcy Sutton Todd begins the course by sharing how she became interested in accessibility. She discusses areas of accessibility and the cost of having inaccessible content. A core principle of accessibility is ensuring all people, regardless of ability, can interact with the information or services provided by a website.
Accessibility Basics
Section Duration: 1 hour
Marcy describes the benefits of accessible websites like SEO, performance, and business growth. She also spends a few minutes myth-busting some common accessibility misconceptions and discusses privacy issues related to screen readers.
Marcy introduces the Web Content Accessibility Guidelines (WCAG), a standard criteria for measuring accessibility. Accessible Rich Internet Applications (ARIA) is another standard containing roles, states, and properties to apply in your HTML markup to supply accessible information.
Marcy describes how screen readers work and talks through the APIs platforms provide for screen reader integration. The steps for enabling the built-in screen readers for MacOS, iOS, Windows, and Android are also shared in this lesson.
Marcy explains the importance of alternative text (alt text), which describes the appearance or function of an image on a page. Alt text is also displayed on the page if the image fails to load. If an image is decorative or doesn't add important context to the page, an empty alt attribute can be included to tell screen readers to ignore the image.
Marcy introduces additional assistive technologies like Braille displays, speech recognition, voice control, switch devices, screen magnification, and transcripts. Understanding how individuals experience a website helps engineers build more accessible content.
Student are instructed to navigate through a web page using a screen reader.
Marcy answers questions related to screen readers. Questions include the difference between low vision and visual impairment, how often a screen reader should be tested, and if there are accessibility testing tools similar to browser stack.
Testing
Section Duration: 53 minutes
Marcy outlines some basic steps for testing accessibility. For example, can the Tab key navigate through a page and reach every navigation item? Also, ensuring layouts flow well when content is zoomed or using DevTools extensions like Axe can be easy ways to get started.
Marcy demonstrates how to use a few accessibility testing tools. The Axe extension will scan a page for issues and has several premium features for more testing capabilities. Lighthouse, which is built into the Chrome browser, also uses Axe APIs for running accessibility tests.
Marcy shares advice for handling accessibility testing when working on a team. Using consistent tooling and processes across an organization will make conducting accessibility tests and reproducing issues easier.
Students are instructed to test websites for accessibility issues using keyboard navigation, browser DevTools extensions, zoom/reflow behavior, and visual characteristics like motion or color contrast.
HTML
Section Duration: 1 hour, 14 minutes
Marcy discusses the importance of using accessible and semantic HTML code. Leveraging these elements and avoiding generic elements like DIVs will lead to cleaner code and make the page more accessible.
Marcy continues discussing the accessibility benefits of HTML's semantic elements. Landmark elements create a structure for the page. Lists, Forms, & Buttons have built-in accessibility features as long as the correct attributes are provided.
Marcy demonstrates the importance of adding the "lang" attribute to the html element to specify the default language screen readers should use. If words or phrases from another language appear in the markup, individual elements can have a separate "lang" attribute applied to instruct a screen reader on the correct pronunciations.
Students are instructed to fix accessibility issues in the HTML of a product page.
Marcy begins addressing some accessibility issues from the Accessible HTML exercise. The ProductDetails component is examined. Headings are added, and "sr-only" classes are applied to hide elements not needed for visual display.
Marcy continues the solution for the Accessible HTML exercise. The ProductHeader and ProductImageGallery components are addressed.
ARIA
Section Duration: 46 minutes
Marcy dives deeper into the Accessible Rich Internet Application (ARIA) specification. While ARIA can help assistive technology better recognize elements on a page, it can also be misused or overused. Built-in, semantic-based accessibility information on elements is typically favored over ARIA added after the fact.
Marcy explains that roles, states, and properties are the building blocks of ARIA. Accessible names and descriptions are also critical for giving clear instructions to users. Some elements have implicit names and descriptions. Other elements will rely on aria-labeledby and aria-describedby to indicate where the name and description are provided.
Marcy introduces Live Regions and explains that they make users aware of things happening without moving their focus. For example, auto-save in a form, banner alerts, and chat widgets. There are two levels of live regions: assertive and polite. Assertive will interrupt other announcements in a time-sensitive way, while polite will wait until other announcements in the queue have been completed.
Students are instructed to use Live Regions to implement accessibility features that announce updates to the shopping cart without moving the user’s keyboard focus.
Focus Management
Section Duration: 1 hour, 4 minutes
Marcy shares some tips for leveraging keyboard navigation and skip links for jumping users past content they want to miss. She also inspects a few high-traffic websites to demonstrate how they use navigation and skip links, including Target.com and GitHub.com.
Marcy explains some best practices for tab-based navigation and talks through tab key versus arrow key approaches. The Active Element API is also introduced. It provides easy access to the currently focused element.
Marcy demonstrates how focus trapping will keep the focus within a component, rotating between specific elements in scope instead of all elements on a page. Keyboard shortcuts are also a helpful accessibility strategy, and a few approaches are discussed.
Students are instructed to add focus management to a modal. Focus should be sent into the modal when it is opened. Focus should be restored to the application after the modal is closed.
Marcy discusses topics related to visual accessibility. Examples of color contrast, reflow/zoom, reducing motion, and color schemes are shared. Performance metrics are also important, including how many keystrokes it takes to perform an action on the page.
Students are instructed to improve the accessibility of the header by using the prefers reduced motion API.
Wrapping Up
Section Duration: 7 minutes
Marcy wraps up the course with additional resources for improving the accessibility of your web applications.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops