Accessibility (A11y) is hard. There’s no debate on that one. Making it easier for people hard of seeing is no easy task on a web project. You have many scenarios to take into account, like real-life testing and determining whether some of the features should offer an alternate “more accessible” version implemented in parallel. Often times, accessibility needs are tacked on last-minute instead of preparing for it ahead of time. Here’s my general guidance on accessibility.
The World Wide Web Consortium (W3C) has created a set of accessibility guidelines that aims to standardize interactivity with applications on the web. The Web Accessibility Initiative for Accessible Rich Internet Applications (WAI-ARIA) defines a way to make web applications more accessible to people with disabilities. Their website has a “best practices” section that describes how users expect to interact with different web components.
A couple of things to note about the guidelines:
– They contradict each other. — It is impossible for an accessibility initiative to cover all use cases. Use them as a starting point and test with your end-users to identify what works.
– The guidelines do not address complex components. — As such, the navigation guidelines may not fit drop-downs and menus exactly. Make sure that your project plan incorporates real-life end-user testing and track feedback.
A couple of projects I have been involved in have leveraged the Angular CDK. As such, the toolkit comes with some robust accessibility services that make keyboard handling easier. The KeyManager and the FocusTrap services have been used in a couple of components to manage menu navigation and trapping focus within a component. Netanel Basal, an Angular expert that blogs on the Medium platform, wrote a great how-to guide that shows how to use the accessibility features of the CDK. You can read the article and see the sample code here.
There are many aspects of accessibility to take into account for a web application. The most common is keyboard interactivity. As such, the WAI-ARIA best practices and the Angular CDK are a good starting point to consider when incorporating better keyboard interactivity for an Angular application. Of course, there are other aspects of accessibility, like providing alternative content for time-based media and making it easier to see or hear media separately. But we’ll leave that for another article.
If you need help incorporating a11y into your Angular web app project, don’t hesitate to reach out to discuss your needs. Take care!
