Checklist to make Angular applications accessible — Part 1

Exploring General Accessibility Guidelines

Co-writer: Shrikant Patki

Source: https://www.websitepulse.com/

Creating accessible web applications is crucial to ensuring all users, including those with disabilities, can fully engage with and benefit from your Angular projects. In this two-part blog series, we will delve into the world of web accessibility, focusing on how to make your Angular applications more inclusive and user-friendly.

“The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.”

— Tim Berners-Lee, inventor of the World Wide Web

Accessibility (abbreviated as A11Y — “11” is the count of letters between the letter “a” and the letter “y”) is one of the essential parts of web development.

It ensures that users can understand and interact with the web application, even when their abilities are limited in some way. Apps and websites can be designed so that assistive technologies (like screen readers, screen magnifiers, etc.) can understand them. Accessibility is a legal right in many countries.

A11y for Web

Below are some key points to implement accessibility in your Angular code:

Use Semantic HTML

• Use proper semantic tags like the article, aside, figure, header, nav, section, etc.
• Use the correct heading elements (h1 to h6). Using heading elements just to change the font size will affect the accessibility.
• Use buttons instead of anchor tags for actions. Buttons should be accessible by both mouse (click) and keyboard (tab, enter).
• Each form control should be associated with a label, not a placeholder.
• Use an alt attribute for each image tag.
• Add a tooltip to buttons, links, or other focusable elements.

Example showing correct usage of semantic tags

Color Accessible Web Pages

Colors play an important role in websites. If a website solely relies on colors, it is difficult for users with color blindness or color-related deficiency to understand or interact with it.

• Do not rely solely on a color to convey the information.

Example showing inaccessible (a) and accessible (b) color design

In the above example (a), the user solely depends on color to see the unreachable mandatory field error.

Use a proper message with warning/error icons to display the errors, as shown in example (b).

Example showing inaccessible (a) and accessible (b) color design

A person with color blindness will not be able to identify the colors shown in image (a); the same can be identified from image (b).

• Proper color palettes are always essential to ensure color contrast meets accessibility guidelines.
• A contrast checker can be used to check accessibility with relevant explanations.

Example showing the screen of contrast checker

As shown below, one can also check the contrast using Chrome’s developer tool (developer tool -> hover on the element).

Example showing accessibility check using Chrome's developer tool.

Use ARIA Attributes

W3C develops the ARIA specification, short for “Accessible Rich Internet Applications”. It consists of a set of attributes that can be added in HTML, which helps assistive technologies identify the states and roles of elements.

• Most of the ARIA attributes start with the “aria” prefix and then “-” and then “action.”

<button id="hamburger" aria-expanded="false/true">
        <mat-icon>menu</mat-icon>
</button>

<a href="www.instagram.com"> <svg aria-label="Follow company on Instagram" ... >
</a>

<!-- hyperlink which will open a new tab -->
<a aria-label="email opens in new window">email</a>

<!-- icons with aria-hidden="true" will not read by screen readers -->
<a aria-label="follow on instagram"><icon aria-hidden="true"/></a>

<img src="assets/img.png" alt="" aria-labelledby="caption">
<p id="caption">Captions</p>

aria-expanded is used for the hamburger menu, and it will be read out by screen readers.

• When screen readers come across icons, they read the href content if no ARIA label is present.
• aria-label is used to label an interactive element.

<!-- accessibility when image/icon is used as button -->
<img src="assets/img.png" alt="" aria-labelledby="caption" role="button"
tabindex="0">

• With the help of the “role” ARIA attribute, we can change the semantics of an element.
• Tabindex attribute adds the element to the taborder array to access the element with the tab (keyboard).
  tabindex=“0” doesn’t mean adding an element at the 0th index but simply adds to the array of tabindex.
  tabindex=“-1” will remove the element from the array of tabindex; it simply means the element will not be accessible by tab (keyboard).

Summary

Above is an important checklist to make our web application accessible. In the upcoming part, we will also look into some of the Angular aspects.

Thanks for reading this article; I hope it helped you understand some basic concepts of Web Accessibility.

THANK YOU!

Stay tuned…

Special thanks to Krupa for reviewing this article.