Skip to main content

Accessibility Testing

Overview​

Web accessibility, also known as a11y, is the design and creation of websites that can be used by everyone. Accessibility support is necessary to allow assistive technology to interpret web pages. Abyss fully supports building accessible websites and follows the WCAG accessibility standards and guidelines.

The list below are steps to take as a developer to ensure accessibility compliance. Please take a minute to read through the following testing resources and familiarize yourself with how to utilize them for best practices.

Keyboard navigation​

Use only a keyboard to navigate the page. Don't use your mouse or touchbar at all to test this. See if you notice any keyboard traps or anything that seems difficult. Expected keyboard behavior for custom components is typically the following, but there are exceptions:

  • Tab to get into the component
  • Use arrow keys to navigate within the component
  • Tab to get out of the component

Axe DevTools​

Axe DevTools enable developers to rapidly fix accessibility issues using built-in references and solution patterns without requiring deep knowledge of accessibility standards. Axe can be installed as a Chrome extension. On Mac, it can be installed directly from the Chrome App Store. On PC, you have to submit a AppStore request to install it.

HTML validation​

For the HTML Validator, use the WCAG Parsing bookmarklet on top of it after submitting. To install the bookmarklet, drag the "WCAG parsing only" link at the top of the page to your browser bookmarks bar.

Mac VoiceOver shortcuts​

  • On/off Command + F5 (or go to System Preferences > Accessibility > VoiceOver)
  • Mute/pause Control
  • VO Control + Option
  • Navigate focusable elements tab
  • Navigate all content VO + arrow keys
  • Quick nav on/off press and hold left and right arrow keys at same time (This allows you to navigate all elements using just the left and right arrow keys without the VO keys.)
  • Open Rotor VO + U
  • Close Rotor Esc
  • Navigate rotor menus left and right arrow keys
  • Navigate within existing rotor menu up and down arrow keys

If using a PC, request Secure access to NVDA.

NPM packages​

Most NPM packages rely on axe-core. Set an impact level, and start with critical issues then work down. Remember to allow time to fix critical issues in the User Story. Otherwise, the product developers will get frustrated and learn to ignore the errors, which defeats the purpose and doesn't help anyone.

Linting​

For linting rules, work with an a11y engineer to determine what to include.

Summary​

Remember, the tools and processes mentioned above don't catch all a11y issues, but they serve as a great start to empowering the team to do some of your own testing. For further information, reach out to an a11y engineer!

Accessibility tools​

If you're looking for an in-depth overview of what accessibility standards Abyss is working towards, visit our Accessibility page.

Table of Contents