Front end checks for web accessibility

Testing for valid, semantic HTMLHTML HTML is an acronym for Hyper Text Markup Language. It is a markup language that is used in the development of web pages and websites. is essential for the accessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) of your work. In this page we list some essential requirements and best resources. It gives you the minimum tests you need to do during development and before you commit your work.

While you develop, always check the following items while developing: keyboard navigation, W3CW3C The World Wide Web Consortium (W3C) is an international community where Member organizations, a full-time staff, and the public work together to develop Web standards.https://www.w3.org/. validation, WCAGWCAG WCAG is an acronym for Web Content Accessibility Guidelines. These guidelines are helping make sure the internet is accessible to all people no matter how they would need to access the internet (screen-reader, keyboard only, etc) https://www.w3.org/TR/WCAG21/. 2 AA validation and then announcement of dynamic changes for screen readers.

Note: automated testing is not perfect. Automated testing rarely catchies more than about 30% of types of issues. They also give false positives. Manual testing is required to find most issues.

What is web accessibility?

Using semantic, meaningful, valid HTML5.

The way all devices, browsers and users can understand and interact with the functionality on a web page. The best resource for HTML5 are the Mozilla Developer Network web docs.

For WordPress we aim to meet WCAG accessibility guidelines at level AA and the W3C standards. In the WordPress Accessibility handbook section Best Practices you’ll find examples and resources.

You need to do two different checks, one for keyboard navigation and one for DOM validation.

Top ↑

Key topics to check

Top ↑

Keyboard Navigation

All functionality should work using a keyboard only. This essential for all assistive technology to work properly. Most keyboard testing should be checked manually. The best time to test this is during development.

Top ↑

How to keyboard test:

Tab through your pages, links and forms to do the following tests:

  • Confirm all links can be reached and activated via keyboard, including any inside drop downs
  • Confirm all links have a strong visible focus indicator
  • Confirm all focusable visually hidden content (such as skip links) become visible when in focus.
  • Confirm all interactions – form fields, buttons, and other controls – can be triggered via keyboard. Any action you can complete with a mouse must also be possible from the keyboard.
  • Perform keyboard tests both with a screen reader and without. Screen reader use of the keyboard can override custom keyboard scripting.

Top ↑

WCAG 2 AA automated validation

The generated DOM, the front end of your web project, must conform to WCAG 2 AA. You can use automated validation to get a limited scope of your success at this.

Recommended:

More tools:

Top ↑

Automated testing

The big difference between PHP and JavaScript code standard checks and accessibility checks is that the accessibility checks need to be performed on the generated DOM, not on the code base. You need to run checks on a working WordPress site. This can be done using automation that sets up your environment dynamically, but still requires a fully built and run installation.

There are several command line tools for automated testing like aXe-cli and pa11y.

Note: automated accessibility testing doesn’t catch all the issues, rarely more than 30%. Testing in the browser and manual keyboard testing still needs to be part of your workflow.

Top ↑

Setup for aXe-cli

Install axe-core for CLI first:
npm install axe-cli -g
npm install chromedriver –g

Then run axe in the command line: axe url -b c

The url can be any url, also a local one. You get a report of the accessibility issues for that url. The -b stands for browser, c for chrome, as this browser gives the best results (better than the default PhantomJS). You will get the errors and warnings in your console.

You can provide more (space separated) urls to the command like
axe url url2 url3 -b c

or call a file with urls like:
axe $( cat list-of-urls.txt ) -b c

Note:  You can run axe-cli on more then one url in one command, but axe-cli is not build to run on a large amount of urls or on a complete site, axe-cli is not a crawler. Deque Labs recommends to use the  axe-webdriverjs, a chainable aXe API for Selenium’s WebDriverJS for testing on a large amounts of urls.

Top ↑

Setup for pa11y

The setup for pa11y is well documented in the GitHub repository.

Top ↑

Dynamic content

Content that changes dynamically during time, like JavaScript generated error messages or content, must also be announced for screen readers. The best way is to test this with a screen reader like Apple VoiceOver (for Mac) or NVDA (for Windows). Listen to your website!

While we know that many developers work primarily on MacOS, testing only with Apple’s VoiceOver is not sufficient. VoiceOver, while fairly common, has many non-standard interpretations of accessibility interactions that aren’t the most accurate representation of average user experience.

Top ↑

Screen reader testing

Top ↑

Best screen reader / browser combinations

  • VoiceOver with Safari,
  • NVDA with Chrome or FireFox
  • JAWS with Chrome, Edge or FireFox
  • Windows Narrator with Edge

The screen readers ChromeVox and Orca don’t perform well enough as a screen reader, at this moment, to give representative test information.

Top ↑

How to use a screen reader

Top ↑

Last updated: