Web Accessibility Testing Techniques

Ken Petri

OSU Web Accessibility Center

Disability Categories

• Visual (legal blindness, "low vision", color blindness)
• Motor (injury, nervous disorders)
• Auditory (deafness, hearing loss)
• Cognitive disability (dyslexia and other reading disorders, ADHD and distractibility, Asperger Syndrome and other autisms, "mild-moderate" LD, short- and long-term memory loss, brain injury, disorders related to problem solving, calculation, conceptual organization, contextual awareness, and cognitive speed) (hint: this is the broadest category)

Ideal Design (in a Phrase)

Highly structured, valid, semantically rich pages that are fully, obviously, and simply keyboard navigable, providing clean, high contrast, uncluttered, consistent, intuitive interfaces and content and which scale in size without breaking the design.

Ideal Design (as an Abbreviation)

From the W3C's WCAG 2: POUR

• Perceivable: "Information and user interface components must be perceivable by users."
• Operable: "User interface components must be operable by users."
• Understandable: "Information and operation of user interface must be understandable by users."
• Robust: "Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies."

Functional Design: Content Pages

• Navigation implemented as lists
• Solid heading and content structure
• Descriptive links
• Unique, orienting title
• Graphics described
• Ability to skip redundant navigation

Functional Design: Tables, Forms

• Tables used for data, not layout
• Tables have caption, summary, scope (minimum), and/or axis, headers, and ids
• Forms have labels for elements
• Forms have logically related elements grouped using fieldsets and legends

Functional Design: Frames, Flash

• Frames should be avoided
• If frames are used, need good titles and must have sensible and unique page titles
• Flash is challenging to make accessible
• Complex Flash is screen reader accessible only with Internet Explorer
• Flash has uneven keyboard navigation in browsers other than IE

Functional Design: JavaScript

• JavaScript needs to be keyboard navigable, not dependent on mouse
• JavaScript must be accessible to assistive technologies
• User must be able to extend times of time-based scripts

Functional Design: Video, PDF

• Video must be captioned and audio described
• PDF should linearize well, be tagged and bookmarked

Tools: Enterprise

• AccMonitor (HiSoftware)
• InFocus Enterprise (SSB Bart Group)
• WebXM (Watchfire)
• Ramp (Deque Systems)

Tools: Online Checkers

• FAE: Checks of functional accessibility (and this one spiders and archives reports, the other online checkers don't!)
• WAVE: Visualization of structure
• TAW: Vizualizaton of errors
• Watchfire WebXACT or Cynthia Says: Check-list based

Tools: Stand-Alone Checkers

• TAW (Java-based/platform independent and free)
• Bobby (Windows, only. Can be output to XML which can then be rendered into statistical charts and summaries, using STEP 508)

Tools: Authoring Aids

• LIFT (Usablenet, a Dreamweaver plugin)
• A-Prompt (ATRC, a stand-alone program)

Verdict?: Forget 'em! Nothing beats knowing the code.

Tools: Browser-based and Free

• Firefox "Add-ons"
  • Web Developer Toolbar, Firebug, Firefox Accessibility Extension, HTML Validator, Table Inspector, Fire Vox, Color Contrast Analyzer, ColorZilla
• Free Online Tools
  • Accessibility Color Wheel
  • Juicy Studio Readability Tests
• Windows stand-alone
  • Vision Australia's Colour Contrast Analyzer

Screen Reader Use Patterns

• Users can skim from top to bottom, but more typically navigate by headings, frames, links, and form elements
• In web applications, top and bottom of page most skimmed
• Tables can provide rich contextual information
• Search on page is usually a last resort
• Difficult to determine if content has been modified dynamically on the same page

Some JAWS Settings

• Utilities > Configuration Manager > Set Options
  • HTML Options: Text: Expand Abbreviations, Expand Acronmyms
  • Speech and Sounds Managner: Select Scheme: Web RentACrowd
• Options > Choose your keyboard layout (laptop, desktop)
• Options > Voices... > Global Adjustment: Set speech read rate (try around 80 words per minute)

JAWS Basic Keystrokes

• Insert-F6: list of headings
• Insert-F7: list of links
• Insert-F5: list of form controls (Num Pad + gets you out of forms mode)
• Insert-Down Arrow: Begin reading
• Up and Down Arrows move you element by element
• Insert-ESC: Update screen
• M/Shift M: Move between frames forward and backward
• Ctrl: Stop reading

JAWS Basic Keystrokes (cont.)

• Ctrl-Home: Get out of current element and go back to the top of the page
• Ctrl-End: Go to end of page (often accompanied by an up arrow keystroke to check what controls are at the bottom of the page)
• Ctrl-Alt Num Pad 5: Detail of table cells (tables can be found by hitting T, arrow keys move between cells)
• Ctrl-Z toggles PC Cursor mode on and off, necessary for navigating in dynamic areas of the page
• Ctrl-F: launches JAWS find

Fire Vox Keystrokes

• Combinations by platform
  • Ctrl-Shift * on Windows Desktop
  • Alt-Ctrl-Shift * on Windows Laptop
  • Ctrl-Apple-Shift * on Macintosh
• Conflicts with Web Developer toolbar and Firebug
  • In Web Developer Toolbar Options, disable all shortcut keys
  • In Fire Vox Options, cannot remap Firebug keys, so set "repeat" to T and set "list elements" to E

Fire Vox Manual

Pages for Practice

• University Registrar
  • Home Page
  • Course Intro Page
  • Master Schedule/Course Bulletin, tables and frames lookup
  • Master Schedule/Course Bulletin, "text" version
  • Master Schedule/Course Bulletin, PDF
• Next Chapter Book Club
  • Impossible menu
• Freedom Scientific
  • Accessible tables