Angular 13 Accessibility Updates and What They Mean to You and Your Users

Learn how to use the power of Angular, ARIA attributes and the Angular Material CDK to improve user experience and remove barriers.

The web is a place where our apps are open for a comprehensive list of varieties of users, including those with visual or motor impairments. We are responsible for building apps ready to interact with all of them while providing the best user experience.

Accessibility is essential in our apps because it ensures all users can interact without difficulties. Accessibility on the web takes into account blindness, deafness, restricted motor skills, color blindness and more.

The Angular team announced a focus on accessibility (a11y) around the release of Angular 13, and we can see it’s part of their roadmap.

Today, we’ll show how to build Angular applications that work well for all users, including those who rely on assistive technologies. We’ll explain how to use Angular to improve the user experience in the following points:

• Accessibility attributes
• Angular Material components
• Routing

Accessibility Attributes

The ARIA Attributes help us to provide an accessible experience to users. It could work with attribute binding in Angular in the component templates.

We use the attr. prefix with the ARIA specification on the HTML Elements as attributes—for example, a button to close some action.

If the ARIA attribute is static, don’t require the use of attribute binding.

Using attribute binding:

<button [attr.aria-label]="Close Form">CloseFrom</button>

Using Static ARIA:

<button aria-label="Close Form">CloseFrom</button>

Learn more about the previous topics:

• Attribute Binding
• ARIA

Angular Material Components

Angular Material helps us to provide a fantastic user experience in our apps, and it provides a suite of UI components fully accessible.

The Angular Material CDK uses the a11y package to support accessibility, providing a list of services, directives and styles utilities.

Let’s dive into some of them:

FocusMonitor

The FocusMonitor is a service to provides an easy way to listen for changes in the focus state of an element.

Example:

focusMonitor.monitor(el).subscribe(origin => this.ngZone.run(() =>console.log("users focus") ));

LiveAnnouncer

The LiveAnnouncer helps announce messages for screen-readers using the aria-live.

Example:

@Component({...})
export class MyComponent {

  constructor(liveAnnouncer: LiveAnnouncer) {
    liveAnnouncer.announce("Welcome to Progress.com");
  }
}

CdkTrapFocus

The CdkTrapFocus is the powerful directive to work with focus in modals and elements.

Example:

<div class="my-inner-dialog-content" cdkTrapFocus>
  <!-- Tab and Shift + Tab not leave this element. -->
</div>

FocusKey Manager

The FocusKey Manager helps us when options get direct focus from the browser. It uses two types of ListKeyManager: FocusKeyManager and ActiveDescendantKeyManager.

interface FocusableOption extends ListKeyManagerOption {
  focus(): void;
}

Learn more about the Angular Material CDK.

Routing

In Angular, using the Router helps us work with the navigation, and the focus is essential to provide accessibility and track it to give a page focus on navigation.

Taking care of the navigation and focus is very important for the users. Using a router event like NavigationEnd, we can focus on one area in our app such as the login form.

router.events.pipe(filter(e => e instanceof NavigationEnd)).subscribe(() => {
  const loginForm= document.querySelector('#login-form')
  if (loginForm) {
    loginForm.focus();
  }
});

Another important point is the active routerLinkActive and ariaCurrentWhenActive.

<nav>
  <a routerLink="home"
   routerLinkActive="active-page"
   ariaCurrentWhenActive="page">
  Login
  </a>
</nav>

Learn more about the previous topics:

• Router
• NavigationEnd

Conclusion

We learned how to use the power of Angular, ARIA attributes, and the Angular Material CDK to improve user experience and remove barriers. I hope these tips help you in constructing an Angular app that can benefit all users!