Accessible Web Development Tools and References

This page: overview | tutorials, language specification & guides | online authoring tools | authoring tools | html & css checking/validation tools | link checking tools | colour checking tools | accessibility checking tools | design tools | bookmarklet sites | bookmarklets

Overview

These are a small number of the Web Development Resources and freeware/shareware tools available. The main criteria for inclusion on the list is that they have been found useful in the design, development and testing of web sites.

Please be aware that these tools are only aids to accessible and usable design and cannot be relied upon to create or evaluate the accessibility or usability of a site, without manual testing and review.

Tutorials, Language Specification and Guides

Language Specifications

Tutorials, References & Guidelines

Accessibility

 

Online Authoring Tools

  • Accessible Table Builder: You choose what table properties you want, how many rows and columns, and the tool takes care of the accessibility mark-up for you
    http://www.accessify.com/tools-and-wizards/
  • Acrobot – Abbreviation & Acronym Generator – Lets you quickly convert blocks of text that feature well-known abbreviations and acronyms into something more accessible. This tool will wrap a <abbr> or <acronym> tag around any matched entries, thus, if you enter W3C, it will be converted to W3C.
    http://www.accessify.com/tools-and-wizards/

Authoring Tools / Extensions / How To’s

  • Mozilla Editor (Composer): Basic WYSIWYG and source code HTML editor that produces valid HTML 4.01. Comes as part of Netscape 6 Browser (Composer). Very Good for beginners to HTML.
    Download: http://home.netscape.com/computing/download/index.html?cp=cdvlndnl
  • HTML Kit: HTML-Kit is a full-featured text editor designed to help HTML, XML and script authors to edit, format, lookup help, validate, preview and publish web pages. Newcomers to web page development can benefit from letting it point out errors and suggest improvements. Experts can save time spent on common tasks using the customisable and extendible editor while maintaining full control over more than dozen supported file types.
    Download: http://www.chami.com/html-kit/
  • Topstyle Lite: Basic CSS editor which will make the creation of cross-browser style sheets a lot easier than doing it by hand. This Lite version is a scaled down version of the shareware product, however it is fully functional and extremely useful – only lacking some of the more professional features.
    Download: http://www.bradsoft.com/topstyle/download/index.asp
  • Macromedia Dreamweaver Accessibility extensions: some free extensions for Dreamweaver that help create accessible documents and check for accessibility. search for accessibility in extensions area:
    http://www.macromedia.com/cfusion/exchange/index.cfm?view=sn120
  • Making Your Web Sites More Accessible with FrontPage 2002 (tutorial):
    http://office.microsoft.com/assistance/2002/articles/fpaccessibility.aspx
  • How to Make Accessible Web Content Using Frontpage 2000 (tutorial):
    http://www.webaim.org/howto/frontpage/
  • Accverify SE: Free accessibility checking plug-in from Hisoftware
    http://www.hisoftware.com/msacc/index.html
  • DreamWeaver 4 accessibility modifications: Free add-ons for dreamweaver
    http://www.accessify.com/
  • XStandard XHTML Editor
    XStandard is the leading standards-compliant plug-in WYSIWYG editor for Windows and browser-based content management systems (IE/Mozilla/Firefox/ActiveX). The editor generates clean XHTML Strict or 1.1, uses only CSS for formatting, and ensures the clean separation of content from presentation. Markup generated by XStandard meets the most demanding accessibility requirements.

HTML & CSS Checking / Validation Tools

  • Online:
  • Offline:
    • HTML Tidy GUI: Tidy is able to fix up a wide range of problems and to bring to your attention things that you need to work on yourself. Each item found is listed with the line number and column so that you can see where the problem lies in your markup. Tidy won’t generate a cleaned up version when there are problems that it can’t be sure of how to handle. These are logged as “errors” rather than “warnings”.
      Download: http://perso.wanadoo.fr/ablavier/TidyGUI/
    • Tagcheck: will examine the tags in your Web pages and check for common errors such as misspelled tag names, incorrect tag attributes, badly nested tags, missing angle brackets to close a tag, and so on. The program will also give suggestions for improving your markup, such as specifying the HEIGHT and WIDTH attributes in all IMG tags. Very useful tool!!
      Download: http://www.tafweb.com/tagcheck.html
    • CSE Validator lite: freeware version, with limited features, of comprehensive HTML validator
      Download: http://www.htmlvalidator.com/lite/

TOP

Link Checking Tools

  • Linkprover: scans a web document or set of documents on your hard disk or online and produces a report detailing the links and images included in the document(s), marking any that appear to point to non-existent sources.
    Download: http://www.tafweb.com/linkprover.html
  • Rel Link Checker Lite is a free easy-to-use link checker tool to help you maintain the accuracy of links on your web site. The lite version is designed for casual webmasters and is only designed to check(up to 1000 links) a small web site or homepage.
    Download: http://www.relsoftware.com/rlc/downloads/
  • Link valet: Very Good tool! Free online link checking tool at http://www.htmlhelp.com/tools/valet/
  • W3C Link Checker: Good tool! Free online link checking tool at http://validator.w3.org/checklink

 

Accessibility Checking Tools

  • 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
  • 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
  • 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”

Colour Checking Tools

TOP

Design Tools

 

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.

Bookmarklet sites:

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”

Prepared by Steven Faulkner
[email protected]
Updated 24th January 2005
© copyright NILS 2004