Why is Accessibility Important?

First, let’s quickly summarize accessibility in terms of the web.

Simply put, web accessibility is the practice of ensuring that there are no barriers that prevent interaction with or access to websites and their content by people with disabilities. These disabilities can include:

• Visual impairments (including blindness)
• Motor mobility, difficulty, or inability to use the hands, such as Parkinson’s disease
• Auditory (such as deafness or hearing impairments)
• Seizures, such as photo epileptic seizures caused by visual strobes or flashing effects
• Cognitive disabilities

---

Why it matters

According to the World Health Organization (WHO), 15% of the world’s population lives with some kind of disability; that’s over 1 billion people who can potentially have issues accessing and using your site.

Having an accessible site not only helps disabled people but can also help your SEO ranking, aiding your business along the way. Overall, it has positive effects on several aspects.

---

Improving accessibility

The only question left to ask is how we can improve accessibility. This is where WAI-ARIA (Accessible Rich Internet Applications Suite) comes into play. It defines a way to make the web more accessible to people with disabilities by introducing a new set of HTML attributes. These attributes can be applied to elements to provide additional semantics and improve accessibility wherever it is lacking. There are three main features defined in the spec:

Roles

These define what an element is or does. Many of these roles largely duplicate the semantics of an element. Take the following for example:

<nav role="navigation"></nav>

We have a navigation element. In itself, it already describes what it is, so adding the role attribute only duplicates the semantics.

Properties

Properties can be used to give extra meaning or semantics to elements. Take the aria-labelledby attribute as an example:

<span id="contact-info">Contact info</span>

<span id="email">Email:</span> <input type="email" aria-labelledby="contact-info email" />
<span id="name">Name:</span> <input type="text" aria-labelledby="contact-info name" />

Unlike the <label> tag, we can specify multiple IDs for the aria-labelledby attribute and use it in place of a <label>.

States

These are special properties that define states on elements. Take aria-disabled="true" as an example. It tells a screen-reader that the input is currently disabled. The difference between properties and states is that states can change throughout the lifetime of our application, whereas properties stay the same.

It’s important to mention that aria attributes will not affect your page’s structure in any way. They will only provide additional information about your site to assistive technologies, the browser, and search engines that crawl your page.

---

Setting up Axe

Axe is an accessibility engine for automated web UI testing. Axe has different types of rules for different types of WCAG levels, and a number of best practices that can help you identify common accessibility issues.

We can integrate it into DevTools, and use it as a Chrome extension to debug our site for accessibility issues, or hook it to our development process to catch violations ahead of time…

In this lesson, we will look into how to hook it into Cypress to catch any issues with accessibility.

---

How to set it up

Luckily for us, we are in the world of JavaScript where we have a package for everything. Axe for Cypress is no exception. We’ll need to get the cypress-axe package and the core of Axe (axe-core) installed before we continue.

npm install --save-dev axe-core cypress-axe

If you are using TypeScript, make sure you add cypress-axe types to your tsconfig.json under your types property as well as cypress:

{
    "compilerOptions": {
        ...
        "types": ["cypress", "cypress-axe"]
    },
    ...
}

To use Axe inside Cypress, we will need to include the Axe commands by importing the library inside index.js in our support folder:

// After importing your custom commands, make sure you import `cypress-axe` as well.
import './commands'
import 'cypress-axe'

Lastly, to actually start using Axe, we need to inject it inside the appropriate test. This can be done using the cy.injectAxe command:

beforeEach(() => {
    cy.visit('https://webtips.dev');
    cy.injectAxe();
});

Make sure you always inject Axe after visiting a URL using the cy.visit command. We can also inject Axe into any test case as long as it comes after a cy.visit command.