Frontend 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: validators are not perfect, it’s new technology and work in progress. They miss issues and sometimes also can give false positive. Investigate if the issues found are valid.

What is web accessibility? What is web accessibility?

Using semantic, meaningful, valid HTML5.

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

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

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

What especially to look out for What especially to look out for

  • Write semantic, meaningful HTML
    • Use a <button> to invoke an action and an <a> for a change of location.
    • A <div> or <span> doesn’t interact with devices (or you have to add a ton of JavaScriptJavaScript JavaScript or JS is an object-oriented computer programming language commonly used to create interactive effects within web browsers. WordPress makes extensive use of JS for a better user experience. While PHP is executed on the server, JS executes within a user’s browser. https://www.javascript.com/. to make it work)
  • Heading text and level matter
  • Make a link or button text meaningful
  • Use the screen-reader-text class, a CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. class to hide text visually from screen but announce it for screen readers. A good way to give context to, for example, links like “read more”
  • Always give an image a proper alt attribute using the alt decision tree
  • Forms:
    • always link a label to an input control. If the label must be invisible for the design, hide it with the screen-reader-text class
    • Wrap checkboxes and radiobuttons in a <fieldset> and add a <legend> describing the topic
  • When you add :hover, also define :focus to your CSS for keyboard users
  • Announce dynamic changes with aria-live or wp.a11y.speak()

Top ↑

Keyboard Navigation Keyboard Navigation

All functionality should work using a keyboard only. This essential for all assistive technologyAssistive technology Assistive technology is an umbrella term that includes assistive, adaptive, and rehabilitative devices for people with disabilities and also includes the process used in selecting, locating, and using them. Assistive technology promotes greater independence by enabling people to perform tasks that they were formerly unable to accomplish, or had great difficulty accomplishing, by providing enhancements to, or changing methods of interacting with, the technology needed to accomplish such tasks. https://en.wikipedia.org/wiki/Assistive_technology to work properly. The only way to test this, at the moment, is manually. The best time to test this is during development.

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 in dropdown submenus.
  • Confirm all links get a visible focus indicator (e.g., a border highlight).
  • Confirm all visually hidden links (e.g. skip links) become visible when in focus.
  • Confirm all form input fields and buttons can be accessed and used via keyboard.
  • Confirm all interactions, buttons, and other controls can be triggered via keyboard — any action you can complete with a mouse must also be performable via keyboard.

Top ↑

W3C validation W3C validation

Your code must parse, be error free.

Test tools:

Top ↑

WCAG 2 AA validation WCAG 2 AA validation

The generated DOM, the frontend of your web project, must conform to WCAG 2 AA.

Recommended:

More tools:

Top ↑

Automated testing Automated testing

The big difference between phpcs / js checks and accessibility checks is that the accessibility checks need to be performed on the generated DOM, not on the code base itself. So you need to check on a working frontend url (this also can be a url in your local installLocal Install A local install of WordPress is a way to create a staging environment by installing a LAMP or LEMP stack on your local computer.).

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

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

Top ↑

Setup for aXe-cli Setup for aXe-cli

Install axe-coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. for CLICLI Command Line Interface. Terminal (Bash) in Mac, Command Prompt in Windows, or WP-CLI for WordPress. 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 APIAPI An API or Application Programming Interface is a software intermediary that allows programs to interact with each other and share data in limited, clearly defined ways. for Selenium’s WebDriverJS for testing on a large amounts of urls.

Top ↑

Setup for pa11y Setup for pa11y

The setup for pa11y is well documented in the GitHubGitHub GitHub is a website that offers online implementation of git repositories that can can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/ repository.

Top ↑

Dynamic content 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!

Top ↑

Screen reader testing Screen reader testing

Top ↑

Best screen reader / browser combinations Best screen reader / browser combinations

  • VoiceOver with Safari,
  • NVDA with FireFox
  • JAWS with Internet Explorer or FireFox (as from version 60)
  • 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 How to use a screen reader

Top ↑