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:
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.
The first extension is called Web Developer and can be downloaded here:
The Web Developer Tool bar allows you to manipulate and test live web pages.
- 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:
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:
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:
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.
Vischeck – color blindness emulator for images
Colour Contrast Check
Juicy Studio Readability test
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:
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: