Building accessible web applications begin by us writing semantic HTML in our templates. So if an interaction is used as a button, then we should use the “<button>” HTML element. For cases where we need to give custom styles and elements, like web components, a more accurate description, we should use ARIA attributes. ARIA attributes help assistive technologies “read” the content and present the material to people with disabilities. Unfortunately, if incorrect ARIA is used, it can make using the web application difficult and cumbersome for the users using assistive technologies. Therefore, no ARIA is better than bad ARIA.
Is it possible to fully automate accessibility (a11y) testing in your web application? The short answer is no. Even though we can automate certain a11y aspects during web development, like are we using ‘alt’ text in all of our image elements, we cannot automate the manner in which content is presented on the page to somebody with disabilities. Content depends on the context. And given that so many websites focus on different subjects, we need manual testing to confirm to us that people with disabilities can still use the site.
Still, it is possible to automate the syntax of ARIA attributes and markup. For automating the validation of semantic markup, you can start with using Pa11y-CI. In your root web application, you would need to create a configuration file to run the a11y checks in your continuous integration environment. The output would then inform you of any issues with the markup. Other options are axe-core and cypress-axe, which incorporate well into end-to-end testing.
The good news is that the manner in which content is presented to end-users is becoming more standard. Many websites are not employing crazy technologies or content layouts for user consumption. At least not in business applications. This means that it will only get easier to incorporate a11y features into web apps. Keep in mind, it’s no substitute for real user feedback.
Useful References:
- To read more about best practices to follow for writing semantic markup for rich web applications, visit the WAI-ARIA authoring practices website. Albeit dry, it is a goldmine of information.
- This Medium article about using Pa11y-CI has some really good information about configuring and using it with Angular. A bit old but a good starting point.
