Compiled with the assistance of the Tiger University Program of the Estonian Information Technology Foundation

likooli logo

PANTONE 1807 PANTONE Black

ess

Accessibility Evaluation Tools and Techniques

David Lamas, Ilya Shmorgun

Accessibility Evaluation Tools and Techniques

Evaluation using HTML validation tools Checking the color contrast Evaluation with screen magnication Testing with a screen reader Additional assistive technologies and tools

Evaluation Using HTML Validation Tools

The Web Developer toolbar is a Firefox extension which enables toggling of cookies, CSS styles, changing image display settings, resizing browser windows and much more.

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

The WAVE toolbar is a Firefox extension which is used as an aid in the web accessibility evaluation process. Rather than providing a complex technical report, WAVE shows the original web page with embedded icons and indicators that reveal the accessibility of that page.

http://wave.webaim.org/toolbar

HTML Validator is a Firefox extension which enables HTML validation inside the browser. The extension is able to show HTML syntax errors as well as accessibility issues and offer potential solutions.

http://users.skynet.be/mgueury/mozilla/index.html

Demo

Checking the Color Contrast

The color contrast of text in relation to the background should be 4.5:1 to ensure that people with low vision are able to read it comfortably. A number of online tools can be used for checking the color contrast as well as a color blindness simulator.

http://colororacle.org

Demo

Evaluation With Screen Magnication

A screen magnier is software which enlarges what is displayed on the computer monitor, making it easier to read for vision impaired users.

Demo

Testing With a Screen Reader

A screen reader is software which can read out, using synthesized speech, either selected elements of what is being displayed on the monitor (helpful for users with reading or learning difculties), or which can read out everything that is happening on the computer (used by blind and vision impaired users).

Demo

Additional Assistive Technologies

High Contrast Settings

Provide ability to increase and decrease contrast, remove color (switch to grayscale) and even reverse the video to white-onblack or black-on-white.

Keyboard Overlays

Can make typing easier and more accurate for those who have motor control difculties.

Custom Browser Stylesheets

Modern Web browsers allow users to set their own CSS stylesheets for accessibility purposes.A custom stylesheet enables the user to view all web sites with a predened font size and color contrast settings.

http://people.pwf.cam.ac.uk/ssb22/css/

Demo

And so we covered
Evaluation using HTML validation tools Checking the color contrast Evaluation with screen magnication Testing with a screen reader Additional assistive technologies