Testing Web Accessibility

Testing for Accessibility using Testing Library

One of the guiding principles of the Testing Library APIs is that you should be able to test your app in the same way that your users do, which includes using accessibility tools like screen readers.

getRoles

Iteration over the implicit ARIA roles represented in a given tree of DOM nodes is possible with this function.

It returns an object with each value being an array of elements with that implicit ARIA role, indexed by role name.

import {getRoles} from '@testing-library/dom'

const nav = document.createElement('nav')
nav.innerHTML = `
<ul>
 <li>Item 1</li>
 <li>Item 2</li>
</ul>`
console.log(getRoles(nav))

// Object {
//   navigation: [<nav />],
//   list: [<ul />],
//   listitem: [<li />, <li />]
// }

isInaccessible

This function determines whether the browser should exclude the given element from the accessibility API. With the exception of checking the role attribute, it implements every MUST criteria from WAI-ARIA 1.2's Excluding Elements from the Accessibility Tree section.

It is defined as follows:

function isInaccessible(element: Element): boolean

logRoles

This helper function prints a list of all implicit ARIA roles within a tree of DOM nodes, with each role containing a list of all nodes that match that role. This can be useful for figuring out how to use getByRole to query the DOM under test.

import {logRoles} from '@testing-library/dom'

const nav = document.createElement('nav')
nav.innerHTML = `
<ul>
 <li>Item 1</li>
 <li>Item 2</li>
</ul>`

logRoles(nav)

Result:

navigation:
<nav />
--------------------------------------------------
list:
<ul />
--------------------------------------------------
listitem:
<li />
<li />
--------------------------------------------------

FAQs

1. Is Testing Web Accessibility expensive?
   Because prevention is always better than cure, we can think about accessibility issues during the design stage and save money.
2. Is converting an inaccessible website to an accessible one time-consuming?
   To save time, we can prioritise tasks and focus only on the most basic requirements.
3. Is accessibility plain and boring?
   A website's accessibility does not imply that it should only contain text. We can also add images to make it more appealing, but it's important to remember that it should be accessible to everyone.
4. Is accessibility testing only for blind and disabled people?
   Because software is beneficial to everyone, this testing is open to all users.
5. How Web Accessibility is Measured?
   The W3C's web accessibility standards, known as Web Content Accessibility Guidelines, can be used to assess the web's accessibility (WCAG). A few other departments have created their own policies, but they all adhere to the Web Accessibility Initiative (WAI) guidelines.

Key Takeaways

In this article, we have extensively discussed the practical and theoretical implementation of Testing Web Accessibility.
We hope that this blog has helped you enhance your knowledge regarding Testing Web Accessibility and if you would like to learn more, check out our articles on Coding Ninjas Studio. Do upvote our blog to help other ninjas grow. Happy Coding!