Designing Accessible Web Sites

Accessibility Checking Tools

Web Accessibility Toolbar
The Accessibility Toolbar software contains a range of Tools:
- To examine discrete aspects (structure/code/content) of a html document
- To facilitate the use of 3rd party applications
- To simulate the user experience of different users
- References and Resources
Available in English, Japanese, Italian, French, Spanish, Korean & German language versions.
Download: http://www.nils.org.au/ais/web/resources/toolbar/
Accessibility Extensions for Mozilla:
adds features to Mozilla to make it easier for people to view and navigate web content based on the structural markup used to create the web page. It can be used by authors to check their structural markup to make sure it matches the actual content structure of the resource.
Accessibility Extensions for Mozilla download
Web Developer Extension
For Firefox/Mozilla. some accessibility, mostly developer tools
Section 508 Toolbar User Guide Specifically for Section 508
Fangs - Screen reader Emulator
Fangs is a Mozilla Firefox extension that displays a text representation of a web page similar to how a screen reader would read it. This helps web developers finding accessibility issues at an early stage in the UI development process.
aDesigner The aDesigner is a disability simulator that helps Web designers make their pages accessible and usable for the visually impaired. Voice browsers and screen readers that read the text on Web pages aloud for people who are visually impaired are often less effective with certain kinds of content, such as highly graphical material. Web developers can use aDesigner to test the accessibility and ease of use of Web pages for people who are blind or low vision. aDesigner download page
Bobby: A tool for Web page authors. It helps them identify changes to their pages so users with disabilities can more easily use their Web pages. It produces comprehensive reports on a sites conformance to WACAG Guidelines. The latest version of Bobby (Bobby Worldwide) is no longer Freeware, but a Free earlier version can still be obtained.
Download: http://browsers.evolt.org/index.cfm/dir/bobby/win32/3.0/ or a free online version (one page at a time) is available at: http://bobby.watchfire.com/bobby/html/en/index.jsp
Cynthia: free online WCAG 1.0 and section 508 testing, 1 page at a time, nice checklist style report, powered by hisoftware
http://cynthia.contentquality.com/
A-prompt: A-Prompt (Accessibility Prompt) has been developed to assist Web authors in improving the accessibility and usability of HTML documents. By checking Web pages for barriers to accessibility and making repairs to correct any problems, A-Prompt will ensure that you are reaching the widest possible audience. A-Prompt is based on the guidelines for accessibility which are created and maintained by the Web Access Initiative of the World Wide Web Consortium.
Download: http://aprompt.snow.utoronto.ca/
AccessEnable (free online demo) make site-wide automatic fixes as well as interactive fixes to satisfy Federal and other web accessibility standards.
http://www.retroaccess.com/index.cgi
LIFT Online (free online demo) test for compliance with usability and accessibility standards, including Section 508 and W3C/WCAG guidelines.
http://www.usablenet.com/frontend/logging.go?username=demo
AccessibilityWatch: (free online demo) hosted monitoring and reporting for Accessibility, Privacy, Search ability and Usability standards, empowering organizations to keep up with ever-changing Web technologies and standards. They allow users to define and conduct custom tests.
http://www.accessibilitywatch.com/
Ask Alice: (free online demo) Register your site by following the link below and will send you an online report containing:A thorough assessment of your site's accessibility An analysis of the opportunities accessibility offers your organization Information on how you can make your site accessible. http://askalice.ssbtechnologies.com:8080/askalice
Accessibility Valet (free online demo - good) is a core Site Valet tool, designed to help ensure accessibility by analysing markup for conformance to web accessibility guidelines: specifically the WCAG and Section 508.
http://valet.htmlhelp.com/access/
IBM Homepage Reader: Screen reading web browser, useful if you want to get an idea of how visually impaired people may experience a web page, A 30 day trial version can be downloaded. Download: http://www-3.ibm.com/able/ See "HPR 3.02 30 day trial download"

Bookmarklets: These are small JavaScript's. To use a bookmarklet, simply click the link. To save the bookmarklet, add it to your favourites/bookmarks or drag the link to your desktop.

Bookmarklets:

Many of the functions of the Web Accessibility Toolbar started life as bookmarklets. Below are some of the toolbar functions that are not generally available in bookmarklet form.

Please Note: These bookmarklets are only known to work in internet explorer 5+, some may work in other browsers, no guarantees given.
Add them to your favourites by clicking (hold left mouse button down) on link text and dragging to links bar.

show divs: Shows the reading order (numbers) and borders of Div elements on the current page.
cell order: Shows the tab order (numbers) and borders of table cells on the the current page.
simple table: Shows Table, th td & caption elements on the current page along with recommended attributes for marking up simple data tables(summary, scope). A warning is given if summary ["No summary!"] or scope ["No scope!"] attributes are not present on the appropriate elements.
abbr/acronyms: Shows Acronym and Abbreviation elements, and their title attributes, on the current page
show forms: Shows Fieldset, legend and label elements on the current page. Show the for attribute of the label element if present, displays the text 'NoFor!' if not present. Displays the id [id=""] attribute of form controls, if present.
cataracts: Blurs the page content simulating the effect upon vision experienced by people who have Cataracts
deprecated html: Displays elements deprecated in HTML 4.0, does not currently display deprecated attributes
CSS Editor: This is an updated "CSS > test styles" function for the toolbar, the original was created by Jesse Ruderman. It is not yet implemented on the toolbar, and as yet their is no documentation.
Diabetic Retinothopy: Places an image mask over the current page that simulates the effects upon vision experienced by people who have Diabetic Retinopathy Note:the page cannot be used while the simulation is in effect.
show DOCTYPE: Shows the HTML DOCTYPE statement in an alert box (if present)
show LANG attributes: Shows any elements with a lang attribute and the lang attribute value.
show Tab Order: indicates the tab order (numbers and sets border around) of elements on the page, also indicates whether an element has a tabindex attribute set.
test styles [updated version]: Apply /modify CSS styles of a page "on the fly"

Colour Checking Tools

Colour Contrast Analyser colour combination tester, allows you choose colours using a colour sampler or colour pallets or input hex values for foreground and background colours, tells you whether the colour combinations provide good/poor visibility
See: Colour Contrast Analyser
Colour Contrast Tester:(Online)
http://h10014.www1.hp.com/accessibility/color_contrast.htm
Colour Tester:colour combination tester, allows you to input foreground and background colours, tells you whether the colour combinations provide good/poor visibility
See: http://aprompt.snow.utoronto.ca/ColorVisibilityProgram.html
Vischeck: Enter the URL of your web page (e.g. www.vivacommute.com) and the image engine will simulate how the page looks to someone with a colour deficit.
See: http://vischeck.com/vischeckURL.php3

Juicy Studio: Quality Assurance - Online Services & Browser Extensions

Colour Contrast Analyser - Firefox Extension 0.2: The Colour Contrast Analyser Firefox extension lists colour combinations used in the document in a table that summarises the foreground colour, background colour, luminosity contrast ratio, and the colour difference and brightness difference used in the algorithm suggested in the 26th of April 2000 working draft for Accessibility Evaluation and Repair Tools (AERT). Each element is also listed with its parent elements, and class and id attribute values when specified to make it easier to locate the elements.
Readability Test: The readability test analyses a Web page to determine how readable it is.
also http://www.readability.info/

CSS Analyser,: The CSS analyser tests for basic accessibility errors such as colour contrast and units of measurement.
Colour Contrast Analyser: The colour contrast analyser tests whether the contrast between the background and the foreground is sufficient.
Luminosity Contrast Ratio Analyser: Tests whether foreground and background colour combinations are sufficient using a new algorithm developed by Trace R & D Center.
Accessible Style Sheet Bookmarklet: An article explaining how to create an accessible style sheet bookmarklet, with a usable example at the end.
Glossary of Terms Extension: A Mozilla/Firefox extension to reveal abbreviations and acronyms added by the author.
Complex Table Inspector: A Mozilla/Firefox extension to reveal accessibility features in tables. Also available as a bookmarklet for other browsers.
Image Analyser: The image analyser tests Web pages to ensure that images have been specified properly.
Link Analyser: The link analyser lists all links on a page with an icon to indicate whether or not the link resolved successfully.