Web App Accessibility (feat. React)

Marcy Sutton Todd

Marcy Sutton Todd

Principle Studios
5 hours, 19 minutes CC
Web App Accessibility (feat. React)

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
Close

Course Details

Published: February 26, 2024

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
Get Unlimited Access Now

Table of Contents

Introduction

Section Duration: 13 minutes
  • Introduction
    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
  • Benefits of Accessibility
    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.
  • Accessibility Standards & Definitions
    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.
  • Screen Readers
    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.
  • Alternative Text
    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.
  • Assistive Technologies
    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.
  • Screen Reader Exercise
    Student are instructed to navigate through a web page using a screen reader.
  • Screen Readers Q&A
    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

HTML

Section Duration: 1 hour, 14 minutes

ARIA

Section Duration: 46 minutes
  • ARIA
    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.
  • Roles, States and Properties
    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.
  • Live Regions
    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.
  • Live Regions Exercise
    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

Wrapping Up

Section Duration: 7 minutes
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.

Peter S.

Software Developer | Bug Hunter

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now