Testing for Accessibility

Accessibility Testing

Websites are made of pages. The pages must meet compliance with WCAG 2.0 and Section 508. 

Usability Testing

Accessibility is part of usability and should be part of usability testing. A best practice for your accessibility testing approach includes the 3 Tier Approach.  Include accessibility into each phase: design, build and test. The W3C offers this great resource Evaluating Web Accessibility Overview.

The 3 Tier Approach

  1. Automated Testing
  2. Automated and Manual Checks
  3. Testing with Users from the Disabilities Community 

This 3 tier approach for testing a web page/site for accessibility compliance involves different kinds of testing methods, tools and testers for each tier. You need a combination of all to get a feel for the whole picture. 

Automated Testing Tools that are Ridiculously Easy to Use

These testing tools scan the code on these pages one at a time when you enter your URL. There are a few free services that offer to test your entire website, but that often gives too many results to process. Fine for a baseline. Start with about five pages that represent your site. A common set is home, Contact, Forms, Most Visited and pages critical to the process.

HTML_CodeSniffer

A “bookmarklet” for anyone. It works in all major web browsers and provides a detailed report of the error warnings and notices (items that may need to be reviewed by a human) indicating which parts of the code are causing red flags, and pointing to the relevant section of the WCAG or Section 508 spec and information on how to resolve the issue.

screen capture of CodeSniffer Popup report

One click and you are checking Accessibility.

 

Wave Toolbar Extension for Chrome

Suited for those working with Dev tools. It overlays your page with icons that point out trouble spots. It also includes a report tab that gives details for each element on the page that it highlights.

Wave Tool being used

Wave Toolbar Extension for Chrome in use

 

 

Additional tools can be found in this page's sidebar(below or to the right, depending on your screen width).

Automated and Manual Testing

Automated Testing

Siteimprove is a website monitoring tool used at UCSF that scans and scores websites on accessibility. Siteimprove was purchased by the University of California Office of the President (UCOP) in its commitment to provide accessible and inclusive websites to our external audiences. Visit the UCOP Siteimprove page.

Automatic testing will give you a good start and help you to understand some of the basics. Most tools have suggestions for correcting, links to the criteria, and general guidelines. Even the better testing tools test less than 25% of the WCAG 2.0 AA guidelines. False positives are common and take time to weed out.

The speed and convenience of Automatic Testing make it an integral part of testing. It is a good start but not a reliable evaluation of true accessibility. You may get slightly different results with different tools. Some tools do a better job of presenting the findings. It is a matter of preference. Also, the tools are improving rapidly keep checking to see what is new.

AnchorManual Testing

Manual testing requires an understanding of the goals of the web page/site being tested and the full context of the content to judge the accessibility.

Example of Manual Testing

An example of manual testing you must DIY is for the accuracy of closed captioning that can only be determined by someone who is familiar with the subject material. The difference between the caption reading “Richmond CA” and Richmond VA” is only two letters and seem like a very small percentage off, but the information given to the person dependent on captioning is not equal.

Basic Expectations of Manual Testing for Web Pages

  1. Enlarge text size up to 200%. Using Firefox browser go to Options or Menu bar > View > Zoom text only > 200%. Verify there is no loss of content or functionality (e.g. no parts of the text are clipped, boxes do not overlap, controls are not obscured or separated from their labels, etc.).
  2. Navigate by using keyboard only. Look for focus and tabbing order. Can you get to all interactive objects?
  3. Use automated tools to catch low hanging fruit. Free browsers plugin suggestions include WAVE or Siteimprove plus the use of color contrast analyzing tools.
  4. Responsive design.
    1. Verify there is no loss of content or functionality on the small screen of a mobile phone like iPhone or Android.
    2. Verify the same on a laptop/desktop by expanding and shrinking the size of the browser window to simulate different sized monitors.

Web Services provided opportunities for accessibility checks by someone from the disability community, but due to resources being diverted to COVID-19, this service is not available at this time. We can provide point you to vendors that provide this service. 

Use Automated and Manual Testing Together

When you use automated testing, eliminate false positives then manually check the rest of the elements using a checklist developed specifically for your website page you will get a clearer picture of its accessibility. Many issues you should be able to fix on the spot. For example, adding alt text to images is a simple fix.

WCAG 2.0 Checklists

The WCAG 2.0 Guidelines Level A and AA list more than 50 Success Criteria. Maintaining a checklist of satisfied criteria will help you manage your accessibility review process. The lists include short descriptions of each Success Criteria and several include links to reference documentation. 

Having a checklist will get you started, but best to customize any list to cover what you are testing and only what you need makes the process a bit more manageable.

Test Early, Test Often

These simple tools will go a long way in teaching you about accessibility. Checking and ensuring accessibility is for every stage, but is most cost effective in development.

A reiterative approach to testing and correcting can give you balance. Trying to test and fix all at once is not practical. The biggest misconception is that Accessibility is applied – it is an integral part of the creation and website management process.