Accessibility in Angular Applications

Published in

Angular Blog

5 min readNov 6, 2019

Guest Author: Zama Khan Mohammed, Software Architect, Author of Angular Projects book.

*Hug illustration is taken from* *icon8*

Many software development teams focus and prioritize software architecture, performance, security, testability, and maintainability of the software but often forget to value the importance of accessibility.

Accessibility should never be an afterthought! Everyone should be a stakeholder in it; developers, designers, and of course the testers.

An analysis was brought up by WebAIM, called WebAIM Million in February 2019. It analyzed the accessibility of the top million website’s homepages and to their shock, found out 98.7% of them didn’t meet the WCAG 2 Conformance (Web Content Accessibility Guidelines). When looking at the results, advocating for accessibility and teaching about it in software teams becomes significant.

The Angular team values Accessibility, but a framework by itself cannot guarantee accessibility out of the box. The Angular Components team at Google has been developing high-quality Angular Components and the Angular CDK (Component Development Kit), which includes several tools to improve accessibility.

Now let’s look at what accessibility issues are involved in building a Single Page Application and how Angular and the Angular CDK assist developers in solving some of them.

Designing for accessibility

Accessibility should begin from the UI design phase. Designers should consider building color palettes such that the color contrast that meets the accessibility standards. To make reading easier for users, they need to choose the right typography (with the use of relative units for font sizes). Create simple animations and interactions so that users with cognitive issues do not face problems in reading and understanding the content of the application. Responsive Design also helps make sure that the application is accessible in various devices that the users might access the website from.

Design for High Contrast Users: Make sure that your design is accessible for Windows’ High Contrast mode users. The Angular CDK provides a mixin cdk-high-contrast to style differently if required for such users.

*Example usage of LiveAnnouncer from* *Angular Material* *documentation*

Live Announcement: Announcing any updates that occur dynamically in the application is important for visually impaired users. We can use LiveAnnouncer provided by Angular CDK, which uses the aria-live region to announce messages.

Use Semantic HTML

Many accessibility issues can be solved by using native elements with proper semantics. This also helps in boosting the SEO of the application. Some rules to keep in mind are:

Use semantic tags like nav, aside, main, section, fieldset, header, footer etc. instead of just using div and span’s.
Use the correct order for headings (h1-h6).
Use alt attribute on img element.
Use button’s for clickables. If a non-interactive element is used for the click event, make sure to add key events for keyboard accessibility.
Associate label with the form control.
Avoid positive tabindex .
Add captions for video and audio.

Example showing usage of aria attributes from momentum-ui library

Use ARIA attributes: Use native elements whenever possible. If the native element does not meet your requirements and if you have decided to create a Rich UI component, then use aria attributes to make them accessible. Using it incorrectly can affect negatively, that’s why make sure you familiarize yourself with ARIA Authoring Practices. It describes aria attributes you need to focus on building various custom UI components. Furthermore, you can use aria states rather than adding a class to style elements in the Rich UI components. This makes sure that the screen reader users can interact with the UI components and you don’t have duplicate style identifiers.

Page Titles and Descriptions: Page titles are a part of HTML’s head. So since Single Page Applications have a single HTML file, i.e., index.html, it requires only a single title tag, but its content should vary across pages. To do this easily, Angular assists you with a Title service and Meta service to update them.

Optimizing accessibility for interactions

Keyboard Navigation: Keyboard navigation is critical for many users who have motor disabilities. Making sure that the tab order is in a logical order will help users navigate the website using just the keyboard. When considering Keyboard Navigation, we need to be aware that TAB key is not the only key we need to support, there are other keys that you have to account for (Refer ARIA Authoring Practices). Angular CDK provides ListKeyManager to help maintain keyboard interaction for components such as menus, dropdowns, selects, list boxes, etc.

Focus Management: Knowing where the focus goes while using the application is really important for accessibility because we want users who do not use a mouse (screen reader/keyboard users) to be directed to the right place when an interaction occurs or when the route changes. To force the focus on an element, you can use the focus method of a DOM node. However, this could get quite complicated in advanced use cases. The Angular CDK provides the FocusManager and the FocusTrap services to handle them. Focus Management also comprises of trapping the focus within a particular container, especially in modal dialogs and drawers. You want the focus to enter inside such components and not leave it until it closes. Angular CDK provides FocusTrap class as well as cdkFocusTrap directive to trap the focus. You might also want to consider Skip Navigation to help users skip the navigation and go to the content directly.

*Example* `showing` *usage of FocusKeyManager from “Angular Projects” book*

Codelyzer and accessibility

Codelyzer is included in all the Angular CLI projects. Enable the accessibility rules to detect a few common accessibility issues in Angular templates. In the video below, you can see how it detects issues in the template at the development time.

How codelyzer catches Accessibility issues in Angular template

Conclusion

Accessibility is a must for all web applications and it should be considered from Day 1 in the project development lifecycle. The Angular team provides tools to make it easier to create Accessible Components, and now it’s time for developers to utilize them and create accessible Angular applications.