Accessibility Testing Environments

Download some Browsers

The first thing you need to do to set-up a Accessibility Testing environment is download a couple of browsers.

Firefox is the first browser you need.  It’s compliant with all web coding standards and has a lot of free plug-ins.

You can download Firefox from: http://www.mozilla.org/en-US/

The next browser is called Lynx.  It’s a text only web browser.  You can download it here and ther are instructions to follow as well:

http://www.vordweb.co.uk/standards/download_lynx.htm

Lynx isn’t straight forward to use so you’ll need to refer to these guides:  http://www.vordweb.co.uk/lynx/lynx_help_main.html

Configure Firefox with some extensions.

WEB DEVELOPER

The first extension is called Web Developer and can be downloaded here:

http://chrispederick.com/work/web-developer

The Web Developer Tool bar allows you to manipulate and test live web pages.

  • Disable – Allows you to disable a number of features from your browser such as Javascript which allows you to view you page without JavaScript.
  • Cookies – Allows you to manipulate cookies to check the differences when testing cookie based scenarios
  • CSS – Features a disable styles to allow you to view web pages as plain text
  • Forms – enables manipulation of form attributes
  • Images – good for checking how sites look without images or checking alt tag data

The second is called the Accessibility Evaluation Tool, and you can download that here:

https://addons.mozilla.org/en-US/firefox/addon/accessibility-evaluation-toolb/?src=search

The Accessibility Evaluation Tool supports web developers in testing their web resources for functional accessibility features based on the iCITA HTML Best Practices (http://html.cita.uiuc.edu).

Support documentation can be found at: http://firefox.cita.illinois.edu

Accessibility Evaluation Tools includes a number of interesting features:

  • Navigation – Allows you to isolate and view features of a page in a table (e.g. Titles, Headings) which makes it easy to review these items. An interesting one is the Links option which is similar to how Screen Readers will view links and you can review how well the links are tagged and explained.
  • Style – Select High contrast view 1 to see how your site works for the visually impaired
  • Validators – test you page against the w3c web standards
  • Tools – check how well your web page performs against accesibility tests like Cythia says.

Fangs is the next extension you’ll need:

http://www.standards-schmandards.com/projects/fangs

Fangs will help you learn more about how screen readers work. It can make it easier for you to understand how a web page may appear in a screen reader.

Fangs doesn’t appear on your browser as a button or as a link in a menu.  You need to right click to get it.

When you run Fangs you’ll see a page how Jaws, a popular screen reader, would see it.

WCAG Contrast Checker – this extension can check the combination of colors to see if it is appropriate for visual perception based on the requirements of the WCAG 1 and WCAG 2.  You can download it here:

https://addons.mozilla.org/en-US/firefox/addon/wcag-contrast-checker/?src=search

You access the Contrast Checker from the Tools menu under Color Checker.

Tools to Bookmark

Colorblind Web Page Filter – View your actual web pages through the eyes of visitors with three different types of color blindness.

http://colorfilter.wickline.org

Vischeck – color blindness emulator for images

http://www.vischeck.com/vischeck/vischeckImage.php

Colour Contrast Check

http://www.snook.ca/technical/colour_contrast/colour.html

Juicy Studio Readability test

http://juicystudio.com/services/readability.php

Automatic Accessibility Tools

Cynthia Says checks your  website for compliance against WCAG or Section 508 (if you’re in the USA). You can find it here:

www.cynthiasays.com

All you need to do is enter your URL and it’s worth checking the “Include the Alternative Text Quality Report” option.

Jaws Screen Reader

This is a program used by blind and visually impaired web users to read content off the screen.

Jaws is not a free program but you can download a fully enabled demo from their website:

http://www.freedomscientific.com/downloads/jaws/jaws-downloads.asp

 

Web Accessibility General Principles

Consistency

  • Patterns help everyone understand information.
  • There may not always be a best answer so pick one and stick to it.
  • Even when sites have inaccessibility problems, if they are consistent about them, users can often figure them out and make do

Seperation of content, presentation, and behaviour

Use each web technology for intended purpose:

  • HTML: Marking up what content is
  • CSS: Controlling the visual presentation
  • JavaScript: controlling the behaviour of the content

This enables progressive enhancement and makes your content accessible even when the script and styling is stripped away.

Test out the accessibility technology

  • Try and understand screen readers and accessibilty tools.  This includes the software used by people with disabilities, emulators of disabilities and compliance checkers.
  • However, unless you use these tools on a daily basis or actually have a disbaility yourself you wont use it like a real user

Use real people for testing, source them from:

  • Organisations for specific disabilities or cross-disabilities
  • College and university programs for students with disabilities
  • Local disability-related support groups
  • Local or regional government rehabilitation or disability services departments
  • Senior organisations and local senior centres
  • Independent living organisations

Learn from Accessibility reviews from both experts and people with disabilities

Web Accessibility Standards

Web Content Accessibility Guidelines are published by W3C.  You can learn more here:

http://www.w3.org/WAI/intro/wcag

WCAG 2.0 has 12 guidelines that are organized under 4 principles: perceivable, operable, understandable, and robust. For each guideline, there are testable success criteria, which are at three levels: A, AA, and AAA.

In short, WCAG 2.0:

Perceivable

Operable

Understandable

Robust

Maximize compatibility with current and future user tools.

Most people will use the supporting materials when developing Web content and Web tools, instead of the actual technical standards document. The WCAG 2.0 supporting technical materials include:

 

Web Accessibility

What is Web Accessibility?

Web Accessibility simply means enabling people with disabilities to use the web.

This covers all disabilities that may affect one’s access to the web:

  • Visual
  • Auditory
  • Speech
  • Physical
  • Learning
  • Cognitive
  • Neurological

In practice you can’t make content accessible to everyone but you can make it more accessible.

Like most most web development, planning web accessibility at the start of a project makes life alot easier.  Examples of accessible sites can be seen at:

How do people with disabilities access the web?

There are two main ways people disabilities access the web.  Either through Assitive Technologies (better known as AT) or by manipulating the common technologies we use.

Assistive Technology (AT)

  • Screen readers & magnifiers
  • Refreshable Braille display
  • Captioning Software
  • Switches and pointer sticks
  • Touch screens

Same Technology used differently

  • Keyboard navigation
  • Browser or system font size
  • Briwser window size
  • Color settings
  • User style sheets

To review demo’s of accessible and inaccessible sites wisit W3C’s Web Accessibilty Initiative (WAI) at:

http://www.w3.org/WAI/demos/bad/