8/3/2019 02-2 Accessibility Evaluation Tools and Techniques

http://slidepdf.com/reader/full/02-2-accessibility-evaluation-tools-and-techniques 1/27

Compiled with the assistance of the Tiger University Program of the Estonian

Information Technology Foundation

8/3/2019 02-2 Accessibility Evaluation Tools and Techniques

http://slidepdf.com/reader/full/02-2-accessibility-evaluation-tools-and-techniques 2/27

 

8/3/2019 02-2 Accessibility Evaluation Tools and Techniques

http://slidepdf.com/reader/full/02-2-accessibility-evaluation-tools-and-techniques 3/27

Accessibility Evaluation

Tools and TechniquesDavid Lamas, Ilya Shmorgun

8/3/2019 02-2 Accessibility Evaluation Tools and Techniques

http://slidepdf.com/reader/full/02-2-accessibility-evaluation-tools-and-techniques 4/27

Accessibility Evaluation

Tools and Techniques• Evaluation using HTML validation tools

• Checking the color contrast

• Evaluation with screen magnification

• Testing with a screen reader

• Additional assistive technologies and tools

8/3/2019 02-2 Accessibility Evaluation Tools and Techniques

http://slidepdf.com/reader/full/02-2-accessibility-evaluation-tools-and-techniques 5/27

Evaluation Using HTMLValidation Tools

8/3/2019 02-2 Accessibility Evaluation Tools and Techniques

http://slidepdf.com/reader/full/02-2-accessibility-evaluation-tools-and-techniques 6/27

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

8/3/2019 02-2 Accessibility Evaluation Tools and Techniques

http://slidepdf.com/reader/full/02-2-accessibility-evaluation-tools-and-techniques 7/27

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

8/3/2019 02-2 Accessibility Evaluation Tools and Techniques

http://slidepdf.com/reader/full/02-2-accessibility-evaluation-tools-and-techniques 8/27

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

8/3/2019 02-2 Accessibility Evaluation Tools and Techniques

http://slidepdf.com/reader/full/02-2-accessibility-evaluation-tools-and-techniques 9/27

 Demo 

8/3/2019 02-2 Accessibility Evaluation Tools and Techniques

http://slidepdf.com/reader/full/02-2-accessibility-evaluation-tools-and-techniques 10/27

Checking the ColorContrast

8/3/2019 02-2 Accessibility Evaluation Tools and Techniques

http://slidepdf.com/reader/full/02-2-accessibility-evaluation-tools-and-techniques 11/27

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 itcomfortably. A number of online tools can be

used for checking the color contrast as well

as a color blindness simulator.

http://colororacle.org

8/3/2019 02-2 Accessibility Evaluation Tools and Techniques

http://slidepdf.com/reader/full/02-2-accessibility-evaluation-tools-and-techniques 12/27

 Demo 

8/3/2019 02-2 Accessibility Evaluation Tools and Techniques

http://slidepdf.com/reader/full/02-2-accessibility-evaluation-tools-and-techniques 13/27

Evaluation With ScreenMagnification

8/3/2019 02-2 Accessibility Evaluation Tools and Techniques

http://slidepdf.com/reader/full/02-2-accessibility-evaluation-tools-and-techniques 14/27

A screen magnifier is software which

enlarges what is displayed on the computermonitor, making it easier to read for vision

impaired users.

8/3/2019 02-2 Accessibility Evaluation Tools and Techniques

http://slidepdf.com/reader/full/02-2-accessibility-evaluation-tools-and-techniques 15/27

 Demo 

8/3/2019 02-2 Accessibility Evaluation Tools and Techniques

http://slidepdf.com/reader/full/02-2-accessibility-evaluation-tools-and-techniques 16/27

Testing With a ScreenReader

8/3/2019 02-2 Accessibility Evaluation Tools and Techniques

http://slidepdf.com/reader/full/02-2-accessibility-evaluation-tools-and-techniques 17/27

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 orlearning difficulties), or which can read out

everything that is happening on the

computer (used by blind and vision impaired

users).

8/3/2019 02-2 Accessibility Evaluation Tools and Techniques

http://slidepdf.com/reader/full/02-2-accessibility-evaluation-tools-and-techniques 18/27

 Demo 

8/3/2019 02-2 Accessibility Evaluation Tools and Techniques

http://slidepdf.com/reader/full/02-2-accessibility-evaluation-tools-and-techniques 19/27

Additional AssistiveTechnologies

8/3/2019 02-2 Accessibility Evaluation Tools and Techniques

http://slidepdf.com/reader/full/02-2-accessibility-evaluation-tools-and-techniques 20/27

High Contrast Settings

8/3/2019 02-2 Accessibility Evaluation Tools and Techniques

http://slidepdf.com/reader/full/02-2-accessibility-evaluation-tools-and-techniques 21/27

Provide ability to increase and decrease

contrast, remove color (switch to grayscale)and even reverse the video to white-on-

black or black-on-white.

8/3/2019 02-2 Accessibility Evaluation Tools and Techniques

http://slidepdf.com/reader/full/02-2-accessibility-evaluation-tools-and-techniques 22/27

Keyboard Overlays

8/3/2019 02-2 Accessibility Evaluation Tools and Techniques

http://slidepdf.com/reader/full/02-2-accessibility-evaluation-tools-and-techniques 23/27

Can make typing easier and more accurate

for those who have motor control

difficulties.

8/3/2019 02-2 Accessibility Evaluation Tools and Techniques

http://slidepdf.com/reader/full/02-2-accessibility-evaluation-tools-and-techniques 24/27

Custom BrowserStylesheets

8/3/2019 02-2 Accessibility Evaluation Tools and Techniques

http://slidepdf.com/reader/full/02-2-accessibility-evaluation-tools-and-techniques 25/27

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 predefined

font size and color contrast settings.

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

8/3/2019 02-2 Accessibility Evaluation Tools and Techniques

http://slidepdf.com/reader/full/02-2-accessibility-evaluation-tools-and-techniques 26/27

 Demo 

8/3/2019 02-2 Accessibility Evaluation Tools and Techniques

http://slidepdf.com/reader/full/02-2-accessibility-evaluation-tools-and-techniques 27/27

And so we covered

• Evaluation using HTML validation tools

• Checking the color contrast

• Evaluation with screen magnification

• Testing with a screen reader

• Additional assistive technologies