tcworld2015

A11y Testing Workshop at tcworld 2015

 

 

This project is maintained by Radina Matic

logo twitter @RadinaMatic

Beyond the Checklists: Demystifying Accessibility Testing and Implementation

A11y Testing tools

Firefox Add-ons

You can also download all recommended Firefox add-ons as a single zipped *.xpi file.

To install add-ons, follow these steps:
1. Unzip the downloaded file.
2. In Firefox main menu go to File > Open file...
3. Browse for the radinamatic-tcworld15-ff-addons-a11y.xpi file and select it.

NOTE: This *.xpi package is made of official Firefox add-ons, so you don't have to worry about security alerts :)

WAVE Web Accessibility Evaluation Toolbar

https://addons.mozilla.org/en-US/firefox/addon/wave-toolbar/
Nice visual tool, Chrome version is more recent.

OpenAjax Alliance (OAA) Accessibility Extension

https://addons.mozilla.org/EN-US/firefox/addon/openajax-accessibility-exte/
My favourite sidebar (full WCAG support with the possibility to generate and export reports).

Colorblind Design

https://addons.mozilla.org/en-US/firefox/addon/colorblind-design/
Simulates colorblindness through a dedicated drop-down in the Responsive Design tool.

WCAG Contrast checker

https://addons.mozilla.org/ca/firefox/addon/wcag-contrast-checker/
Very complete sidebar contrast checker, on top of which is provided a filter to simulate 4 types of colorblindness.

Fangs Screen Reader Emulator

https://addons.mozilla.org/en-US/firefox/addon/fangs-screen-reader-emulator/
Renders a text version of a web page similar to how a screen reader would read it.

Juicy Studio Accessibility Toolbar

https://addons.mozilla.org/en-uS/firefox/addon/juicy-studio-accessibility-too/
Good for checking ARIA features, tables and color contrast.

AInspector Sidebar

https://addons.mozilla.org/en-US/firefox/addon/ainspector-sidebar/
Very similar to OAA extension, no reports, docs and latest release on GitHub.

Accessibility Evaluation Toolbar

https://addons.mozilla.org/en-US/firefox/addon/accessibility-evaluation-toolb/
Good set of checkers, no updates for a while.

Bookmarklets/Favelets (browser independent)

tota11y - an accessibility visualization toolkit

http://khan.github.io/tota11y/
Helps visualize the most common accessibility violations (and successes).

HTML_CodeSniffer

http://squizlabs.github.io/HTML_CodeSniffer/
Detects violations of both Web Content Accessibility Guidelines (WCAG) 2.0 (all three conformance levels), and the web-related components of the U.S. "Section 508" legislation.

Visual ARIA Bookmarklet

http://khan.github.io/tota11y/
Allows any sighted person to physically see the use of ARIA on public websites.

Jim Thatcher’s Favelets

http://jimthatcher.com/favelets/
Several handy a11y assessment favelets/bookmarklets.

NCAM Accessibility QA Favelet

http://ncam.wgbh.org/invent_build/web_multimedia/tools-guidelines/favelet
Not updated for a while, but still works well.

Chrome Extensions

WAVE Evaluation Tool

https://chrome.google.com/webstore/detail/wave-evaluation-tool/jbbplnpkjmmeebjpijfedlgcdilocofh
Web accessibility evaluation tool developed by WebAIM.org.

Accessibility Developer Tools

https://chrome.google.com/webstore/detail/accessibility-developer-t/fpkknkljclfencbdbgkenhalefipecmb
Adds an Accessibility audit, and an Accessibility sidebar pane in the Elements tab, to your Chrome Developer Tools.

NoCoffee vision simulator

https://chrome.google.com/webstore/detail/nocoffee/jjeeggmbnhckmgdhmgdckeigabjfbddl
Evaluation tool helpful for understanding the several vision problems and deficiencies.

Spectrum

https://chrome.google.com/webstore/detail/spectrum/ofclemegkcmilinpcimpjkfhjfgmhieb
Evaluation tool for different types of color vision deficiency.

WCAG Luminosity Contrast Ratio Analyzer

https://chrome.google.com/webstore/detail/wcag-luminosity-contrast/lllpnmpooomecmbmijbmbikaacgfdagi
Pick colors, compute contrast, get suggestions & preview with challenged visions.

Tenon Check

https://chrome.google.com/webstore/detail/tenon-check/bmibjbhkgepmnehjfhjaalkikngikhgj
Checks current page in the Tenon accessibility testing tool.

Color Contrast tools

Contrast Analyzer

http://www.paciellogroup.com/resources/contrastanalyser/
Standalone tool; provides a pass/fail check for WCAG 2.0 contrast criteria; simulates certain visual conditions.

Accessibility Color Wheel

http://gmazzocato.altervista.org/colorwheel/wheel.php
Find an accessible color pair and compare contrast with simulation of three types of color deficiency: deuteranopia, protanopia and tritanopia.

CONTRAST-A-WEB

http://dasplankton.de/ContrastA/
Web application that allows users to experiment with color combinations, examine them under the aspect of accessibility guidelines and to create custom color palettes.

Color Safe

http://colorsafe.co/
Accessible color palettes based on WCAG Guidelines of text and background contrast ratios.

Color Palette Accessibility Evaluator

http://accessibility.oit.ncsu.edu/tools/color-contrast/
Online tool for analyzing color combinations that meet WCAG 2 a11y specifications.

Color Extractor Bookmarklet

http://accessibility.oit.ncsu.edu/tools/color-extractor/
Extracts colors from the page CSS files and feeds them to Color Palette Accessibility Evaluator (see above).

Color Contrast Visualizer

http://www.stainlessvision.com/blog/projects/colour-contrast-visualiser
SWF tool with Photoshop style color picker.

Online A11y validation tools

AChecker

http://achecker.ca/checker/index.php
Full HTML, CSS, WCAG & Section 508 online assessment tool.

Functional Accessibility Evaluator 2.0

http://fae20.cita.illinois.edu/
Sitewide evaluation and reports (requires registration).

Cynthia Says

http://www.cynthiasays.com/

TENON

http://tenon.io

Options for automated A11y testing

Choosing an Automated Accessibility Testing Tool: 13 Questions you should ask

pa11y

Requires Node.js and PhantomJS; Custom Reporters option.

quails

http://quailjs.org/
jQuery plugin; comes with a collection of 250 tests from which to pick and choose or write our own in YAML/JSON.

Tanaguru

https://github.com/Tanaguru/Tanaguru
Very complete website a11y assessment tool; basic and advanced Scenario audits based on Selenium).

PDF A11y testing

PDF accessibility with Acrobat Pro

To fully evaluate PDF files for accessibility you must have access to Adobe Acrobat Pro (download the latest 30 days evaluation version.

PDF Accessibility Checker (PAC 2)

http://www.access-for-all.ch/en/pdf-lab/pdf-accessibility-checker-pac.html
Evaluates PDF files against checkpoints and failure conditions of the Matterhorn Protocol (PDF/UA Conformance Testing Model).