Skip to content
This repository has been archived by the owner on Jun 28, 2024. It is now read-only.

Accessibility Testing

Jump to bottom
edeyoung edited this page May 30, 2019 · 8 revisions

Bonnie is compliant with Section 508

While Section 508 has fewer specs than the Web Content Accessibility Guidelines, WCAG is expected to be incorporated into Section 508 soon, so we can preemptively up our game by striving to achieve compliance with WCAG 2.0 Level AA (Intermediate). These guidelines are detailed very nicely at this link, and listed at the bottom of this page along with a few Bonnie-specific notes.

Common issues

Not hiding icons from screen readers

<i class="fa fa-fw fa-user"></i> <!-- Screen readers try to read this but it makes no sense -->
<i class="fa fa-fw fa-user" aria-hidden="true"></i> <!-- Better -->

Not specifying the scope of table headers, or not using th tags

<!-- Screen readers don't know whether a heading applies to a row or column -->
<table>
  <thead>
    <tr>
      <td>Name</td>
      <td>Status</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>P. McPatient</td>
      <td>Pass</td>
    </tr>
  </tbody>
</table>
<!-- Better -->
<table>
  <thead>
    <tr>
      <th scope="col">Name</th>
      <th scope="col">Status</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">P. McPatient</th>
      <td>Pass</td>
    </tr>
  </tbody>
</table>

Not ensuring that navigation is sensible with a keyboard

Try accomplishing tasks through the UI with the keyboard only!

Testing Tools

The Bonnie team uses the Google WAVE plug-in

There are a few bookmarklets and browser extensions which can find common issues and suggest fixes with a simple click. Usually this has to be run separately on every distinct page/state/view.

Manual testing

Because it is by far the most common combination of tools, we test Bonnie using the JAWS screen reader on a Windows machine. We do not have a JAWS license, so the software must be used in demo mode. This means it will require a restart to continue usage after 40 minutes.

For testers using a Mac, we can download a virtual machine and use that. Mac users will also want to procure a full keyboard with the Insert key and a number pad.

Many of the necessary keyboard shortcuts are covered at this page.

The goal in testing with JAWS is to verify that, in using only a keyboard and the screen reader's audio feedback, a user can use Bonnie without missing out on key functionality.

Areas of additional focus

Bonnie is a visually pleasing project dealing with an extremely technical domain. Here are some features within Bonnie that must be paid special attention to when it comes to testing for accessibility.

  • Icons. Any rules that apply to images also apply to icons, but the fixes are different. Since Bonnie uses the Font Awesome icon font, our go-to method is to hide the icon from screen readers and offer more detailed text.
  • Syntax highlighting. Information should not be conveyed through color alone, so we can add icons (and then follow the advice above for icons).
  • Tables. Tables need to use proper markup to be read properly by screen readers. Additionally, using tables for presentation/layout rather than tabular data might present problems.
  • Interactive components. Any features that change or move -- such as tooltips, popovers, modals/dialogs, alerts -- likely require additional code to adequately cover people using assistive technologies. If using 3rd party libraries, check to see if it claims to be fully accessible for screen readers / keyboard access. Get familiar with its documentation for accessibility.

WCAG 2.0 AA Guidelines

Guideline Summary Notes
1.1.1 – Non-text Content Provide text alternatives for non-text content
1.2.1 – Audio-only and Video-only (Pre-recorded) Provide an alternative to video-only and audio-only content N/A
1.2.2 – Captions (Pre-recorded) Provide captions for videos with audio N/A
1.2.3 – Audio Description or Media Alternative (Pre-recorded) Video with audio has a second alternative N/A
1.2.4 – Captions (Live) Live videos have captions N/A
1.2.5 – Audio Description (Pre-recorded) Users have access to audio description for video content N/A
1.3.1 – Info and Relationships Logical structure
1.3.2 – Meaningful Sequence Present content in a meaningful order
1.3.3 – Sensory Characteristics Use more than one sense for instructions
1.4.1 – Use of Colour Don’t use presentation that relies solely on colour
1.4.2 – Audio Control Don’t play audio automatically N/A
1.4.3 – Contrast (Minimum) Contrast ratio between text and background is at least 4.5:1 Can check using automated tools
1.4.4 – Resize Text Text can be resized to 200% without loss of content or function
1.4.5 – Images of Text Don’t use images of text
2.1.1 – Keyboard Accessible by keyboard only
2.1.2 – No Keyboard Trap Don’t trap keyboard users
2.2.1 – Timing Adjustable Time limits have user controls
2.2.2 – Pause, Stop, Hide Provide user controls for moving content N/A
2.3.1 – Three Flashes or Below No content flashes more than three times per second N/A
2.4.1 – Bypass Blocks Provide a ‘Skip to Content’ link Can check using automated tools
2.4.2 – Page Titled Use helpful and clear page titles
2.4.3 – Focus Order Logical order
2.4.4 – Link Purpose (In Context) Every link’s purpose is clear from its context
2.4.5 – Multiple Ways Offer several ways to find pages
2.4.6 – Headings and Labels Use clear headings and labels
2.4.7 – Focus Visible Ensure keyboard focus is visible and clear
3.1.1 – Language of Page Page has a language assigned Can check using automated tools
3.1.2 – Language of Parts Tell users when the language on a page changes N/A
3.2.1 – On Focus Elements do not change when they receive focus
3.2.2 – On Input Elements do not change when they receive input
3.2.3 – Consistent Navigation Use menus consistently
3.2.4 – Consistent Identification Use icons and buttons consistently
3.3.1 – Error Identification Clearly identify input errors
3.3.2 – Labels or Instructions Label elements and give instructions Can check using automated tool
3.3.3 – Error Suggestion Suggest fixes when users make errors
3.3.4 - Error Prevention (Legal, Financial, Data) Reduce the risk of input errors for sensitive data
4.1.1 – Parsing No major code errors Can check using automated tool
4.1.2 – Name, Role, Value Build all elements for accessibility Can check using automated tool
Clone this wiki locally