Smart analysis simplified, steps only

On this site

Our toolkit

The analysis steps on this page require no knowledge of programming languages, and use only two tools to assist the analyst—both of which may be downloaded for free.

The Firefox browser, (http://www.mozilla.com/en-US/) for which many other free tools have been developed both to assist in accessibility analysis and to directly assist persons with disabilities. It conforms as closely as any browser to current standards for displaying information on the Web.
Version 1.4 of the Illinois accessibility extensions toolbar. (http://firefox.cita.uiuc.edu/) This tool was developed by the Center for Information Technology Accessibility at the University of Illinois at Urbana-Champaign, an internationally-recognized leader in this field.

Text reference

We use—and strongly recommend to our clients—the book Web Accessibility by Jim Thatcher and colleagues (ISBN 1-59059-638-2). It is both comprehensive and current, and Dr. Thatcher is a true accessibility pioneer. More information is available at jimthatcher.com. (www.jimthatcher.com/)

Optional tools

Depending on the page being analyzed, we may use other tools to provide more detailed information. Again, all are free downloads. These include:

The Firefox web development toolbar. (addons.mozilla.org/firefox/60/)
Fangs, (sourceforge.net/projects/fangs) which provides a visual representation of how the page would be read by the popular screen-reader, Jaws.
Charles Chen's talking browser extension, CLiCk, Speak. (http://clickspeak.clcworld.net/)
Vision Australia's Colour Contrast Analyser, (www.visionaustralia.org.au/info.aspx?page=628#download) an independent application not dependent on any one browser.
If we still have questions, we simply read the HTML source code. Old-fashioned and time-consuming, but effective.

Smart analysis simplified (Web view, steps only)

This "steps-only" version of our protocol is provided as a quick reference/reminder for developers who are already familiar with the methods used here. For more information, please use the Change view control at left to display the basic format or an expanded view that includes Section 508 and WCAG 2.0 information.

Quick Check

This is what we do the first time we look at a page. It takes only seconds, and will detect many of the most important barriers to accessibility. If a page isn't at least this compliant, it probably should be considered for major revision or replacement.

Headings: Navigation -> Headings; Navigation -> Menu and Navigation Bars.

Links: Navigation -> Links; down-arrow through list and watch position on screen.

Forms: First tab through the form controls, then select Navigation -> Forms.

Images: Text Equivalents -> Show Text Equivalents. (Leave checked)

Styles and layout: Style -> uncheck Author CSS; Style -> uncheck Tag Styling; Style -> uncheck Table Layout.

To finish, select Options -> Reset styling and settings and reload the page.

Full protocol

Validation check: Validators -> W3C HTML Validator; Validators -> W3C CSS Validator; Navigation -> Language Changes.

Visual check: Ctrl+ three times; Ctrl- to reduce; check Title and look for flashing.

Dynamic elements: Visually check for captions and timed events; use all dynamic elements with keyboard only.

Text only: Visual inspection; may also discover when checking links, images, or styles, below.

Color: Visual inspection; Style -> Colour Contrast.

Headings: Navigation -> Headings; Navigation -> Menu and Navigation Bars.

Image maps: How: Navigation -> Image Maps.

Links: Navigation -> Links; down-arrow through list and watch position on screen.

Forms: First tab through the form controls, then select Navigation -> Forms.

Frames: Navigation -> Frames; repeat the visual check of step 1, and resize frames if possible; use the Firefox menu bar, View -> Page Source, and evaluate the content within the <noframes> element (which must be present).

Images: Text Equivalents -> Show Text Equivalents. (Leave checked)

Styles and layout: Style -> uncheck Author CSS; Style -> uncheck Tag Styling; Style -> uncheck Table Layout. (Leave these settings)

Data Tables: Navigation -> Data Tables. In the popup window, click on the table Title and use the Left/Up/Right/Down buttons to see headers as each cell is highlighted.