Tackling website accessibility issues

I attended a website accessibility session this morning . All accessibility testing to date has been completed using FireFox (their first choice browser when it comes to accessibility testing). Our minimum goal is to achieve the WCAG AA standard for all web content. To achieve this an accessibility checklist has been devised (attached). The intention is the web team will be executing this across their web estate to ensure compliance. The following FireFox add-ins and tools were demonstrated. Here’s my notes:

Accessibility Evaluator for Firefox 1.5.7.1
https://addons.mozilla.org/en-US/firefox/addon/accessibility-evaluation-toolb/
The Firefox Accessibility Evaluation Toolbar is designed for both developers and people with disabilities (to view and navigate web content).

There a 2 ways to access the same range of tools (shown above). Features include:

Generating reports; extract navigational elements such as titles, links, meta data etc; list and hide images (background and inline); Excellent tab focus inspector; colour contrast analyser; direct links sites and validators (W3C/WDG – ‘Web Design Group’);

ColorZilla 2.6.4.1
http://colorzilla.en.malavida.com/
A tool to analyze the colors used by a website and create templates

Fangs 1.0.8
https://addons.mozilla.org/en-us/firefox/addon/fangs-screen-reader-emulator/
Fangs renders a text version of a web page similar to how a screen reader would read it. The ambition is to help developers understand how an assistive device would present a website and thereby increase chances of finding accessibility issues early.

Firebug 1.8.4
http://getfirebug.com/downloads
The power of Firebug (and other developer toolbars) is that we can easily inspect any element on the page for accessibility. To enable, either right click and ‘inspect element’ or press F12.

Examples of how to use Firebug include confirming labelled form elements, testing on-the-fly modifications of CSS styles ( and suggest tweaks/alterations in a report).

FireShot 0.95
http://screenshot-program.com/fireshot/
FireShot lets you grab the entire webpage – not just a portion of it (like Print Screen). It then provides a set of editing and annotation tools, which lets you quickly modify captures and insert text and graphical annotations.

Further details at http://screenshot-program.com/fireshot/features.php

Tab Slideshow 4.0
https://addons.mozilla.org/en-US/firefox/addon/tab-slideshow/
This tool cycles a user through tabs as a slideshow.

TAW3 en un clic 0.9.8
https://addons.mozilla.org/en-US/firefox/addon/taw3-with-a-click/
TAW3 with a click allows to verify, with just a click, the accessibility of the Web sites that you are visiting, by means of the TAW3 online service (www.tawdis.net) and making use of the W3C Web Content Accessibility Guidelines (WCAG 1.0 and WCAG 2.0).

Total Validator 7.1.0
http://www.totalvalidator.com/support/extension.html
Total Validator is an (X)HTML validator, an accessibility validator, a spell checker, and a broken links checker all rolled into one tool allowing one-click validation of your web pages. Validate pages before you publish, use on intranets, or other hidden pages. In order to use the Firefox extension you need to download and install either the Basic or Pro tools.

View Cookies 1.10.3
https://addons.mozilla.org/en-US/firefox/addon/view-cookies/
It adds a tab to the Page Info dialog box, which shows the cookies belonging to the current page or website.

WAVE Toolbar 1.1.7
http://wave.webaim.org/toolbar
WAVE reports created directly within Firefox rather than visiting http://wave.webaim.org/.

Because the toolbar reports runs entirely within your web browser, no information is sent to the WAVE server. This ensures 100% private and secure accessibility reporting. The toolbar can check intranet, password-protected, dynamically generated, or sensitive web pages.

WCAG Contrast Checker 1.102
https://addons.mozilla.org/en-US/firefox/addon/wcag-contrast-checker/
The extension is shown in the sidebar and can obtain results for individual elements and for all elements in a web page. It offers the results for "normal vision" and for "situations of difficulty in the perception of colour [colour blindness] (protanopia, and deuteranopia tritanopia)".

The use of Contrast checker can be combined with the extension ColorZilla. This allows you to select directly from the web document (and copied to the clipboard) the colour you want to check.

Brief Explanation

Protanopia is a Red-green colour blindness is split into two different types: Whereas people affected by protan color blindness are less sensitive to red light, deuteranopia or deuteranomly (the second type of red-green colour blindness) is related to sensitiveness on green light.

http://www.uic.edu/com/eye/LearningAboutVision/EyeFacts/ColorBlindness.shtml

Web Developer 1.19
http://chrispederick.com/work/web-developer/
The Web Developer extension adds various web developer tools to a browser. The extension is available for Firefox and Chrome.

This is another highly recommended (premium) extension due to the huge range of tools: There is a live HTML editor(not as good as Firebug), Validator links; outline elements such headings, links and positioned elements; view document outline; view meta data; detailed image information; easy access to temporarily edit or disable CSS; disable java script.

Automated Tools

Some WCAG 2.0 success criteria can be tested via the use of automated tools, but many also require human evaluation:

REPORTS

Ø Accessibility Evaluation Toolbar > Reports > Accessibility Issues

Ø TAW3 with a click 0.9.8

SITES

Ø A Checker http://achecker.ca/checker/index.php

Ø Full list at http://www.w3.org/WAI/ER/tools/complete

SOFTWARE

Ø NonVisual desktop access (NVDA) free and open source screen reader for Windows (Screen Reader)

Ø Colour Contrast Analyser 2.2 for Web Pages
http://www.visionaustralia.org/info.aspx?page=628

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s