Build more accessible Angular apps

June 9th, 2021

During #GoogleIO2021, we released a new Angular codelab focused on accessibility. In this post we’ll walk through ten tools for building more accessible applications, then head to the codelab for hands-on practice exercising these skills.

Build more accessible Angular apps
Build more accessible Angular apps

Accessibility is a vital part of web development – ensuring that users can perceive, understand, navigate, and interact with apps. Developing accessible apps starts from ideation all the way through deployment, so let’s take a look at how you can begin incorporating a11y into your apps!

1. Learn the tools for testing accessibility

In the current state of the web, manually testing accessibility is mandatory. Start by learning to navigate using your computer’s built-in screen reader.

We can also use automated tools like Lighthouse, axe and linting to spot check for specific issues like missing alt text, labels and color contrast.

We recommend adding the following rules to your .eslintrc.json, which apply to accessibility.

2. Define unique page titles

Providing unique, concise page titles helps users using a11y services quickly understand a web page’s content and purpose. To fix this, you use Angular’s Title service to define unique titles for each of your pages.

Build more accessible Angular apps
Before: An application open to three different pages with identical page titles
Build more accessible Angular apps
Improved: An application with unique page titles

3. Ensure adequate color contrast

Your design might seem cool, but it’s not if people with visual impairments like color blindness can’t read your content. Use the Material theming guides and inspection tools to ensure you meet the Web Content Accessibility Guidelines (WCAG 2.0) color contrast ratio guidelines.

Build more accessible Angular apps
Chrome Dev Tools inspection tool checking contrast of an icon button

4. Use Semantic HTML

Native HTML elements capture a number of standard interaction patterns that are important to accessibility.

When authoring Angular components, you should reuse these native elements directly when possible, rather than reimplement well-supported behaviors. This means using <button> and <a> instead of making everything a <div>.

5. Create selectable controls with Angular Material

Simplify menus and controls to create navigable components by simplifying controls as much as possible.

Build more accessible Angular apps
Before: Un-selectable nested controls
Build more accessible Angular apps
Improved: Simplified checkboxes allow navigation

6. Provide control labels with ARIA

The Web Accessibility Initiative’s Accessible Rich Internet Applications specification (WAI-ARIA or ARIA) helps bridge issues that can’t be managed with native HTML.

Specify aria-label and other ARIA attributes that modify the way an element is translated into the accessibility tree.

Build more accessible Angular apps
Chrome Lighthouse diagnostic report highlights how ARIA labels ensure the slider is in the accessibility tree

7. Add the power of @angular/cdk/a11y

Add the Angular CDK’s a11y module to help solve more complicated and Angular-specific issues. Importing the module package provides access to a number of tools which developers can utilize to improve accessibility:

ListKeyManager: manage the active option in a list of items based on keyboard interaction.

FocusTrap: trap Tab key focus within an element for components like modal dialogs, where focus must be constrained.

InteractivityChecker: check the interactivity of an element, capturing disabled, visible, tabbable, and focusable states for accessibility purposes.

LiveAnnouncer: announce messages for screen-reader users using an aria-live region.

FocusMonitor: used to listen for changes in the focus state of an element.

Styling utilities: Sass mixins that produce styles for hiding elements in an accessible way, targeting high contrast users and more.

8. Control focus with FocusTrap

In Angular, FocusTrap’s cdkTrapFocus directive traps tab-key focus within an element. This is intended to be used to create accessible experience for components like modal dialogs, where focus must be constrained.

Build more accessible Angular apps
A custom color selection dialog which needs to constrained focus

9. Announce changes with LiveAnnouncer

Screen readers need to be notified when something on the page changes. Imagine attempting to submit a form or complete a purchase, and not knowing an error has popped up preventing the form submission. That’s frustrating!

LiveAnnouncer is used to announce messages for screen-reader users using an aria-live region to ensure screen readers are notified about notifications and live page changes.

10. Enable HighContrast mode

Use the cdk-high-contrast @mixin provided in @angular/cdk/a11y to add an outline to your buttons in High Contrast mode to respect user’s preferences and to dramatically increase contrast.

Build more accessible Angular apps
Dumpling Shop demo with High Contrast mode on for the Purchase button.

And that’s it!

Ten ways to begin building more accessible apps. Head to the codelab to put your Angular skills to the test!

Build more accessible Angular apps
Chrome Lighthouse diagnostic report with 100% Accessibility score

Let us know in the comments what @angular/cdk/a11y tools you use in your apps, and what accessibility tools you use!

The original post Build more accessible Angular apps.