Web Tools to Evaluate Sites

Using Technology to Aid in Website Evaluations

Allison Yeager

Tools

Web Accessibility Toolbar (WAT)Internet Explorer 6+http://www.visionaustralia.org.au/ais/toolbar/

Tools

Firefox Web Developer’s Toolbar (WDT)https://addons.mozilla.org/downloads/latest/60/addon-60-latest.xpi

Benefits

Various tools to evaluate websitesFunctions: Color contrast Flicker rates Identify elements on a page Simulate user experiences Easy access to other tools

Benefits

Non-tech savvy users can evaluate a pageIdentifies elements of a page without digging into HTMLAllows users to see a page how others may see the page

Cons

Not a replacement for a human evaluationNon-subjective For example: A picture may have

alternative text, but the text is inappropriate or unhelpful

Using the WAT

Download and install the WAT http://www.visionaustralia.org.au/ais/toolbar

/

Open the appropriate web page in Internet Explorer: Select View, Toolbars from the Menu

bar in Internet Explorer Select the Accessibility Toolbar

Using the WAT

Using the WAT

Using the WAT

Simulations Ability to resize a window

Screen resolution simulation Simulate various vision-related

conditions

Using the WAT

Simulation Demonstrations www.cnn.com Screen resolution Color contrast Vision simulations

Using the WAT

Structure Heading elements: h1, h2, etc. Disable Cascading Style Sheets (CSS) Tables have headers

Using the WAT

Structure Demonstrations http://cio.sc.gov/councilscommittees/

palmetto800/talkgroupsandchanels.htm

Identify h1 element Readable without CSS Check for table headings

Using the WAT

Images Identify all images Toggle between image and

alternative text Test flicker rate

Using the WAT

Image Demonstration www.scdmvonline.com Show all images Check for alternative text

Humans needed to evaluate quality of text

Flicker test

Using the WAT

Validation HTML CSS HTML Tidy

Using the WAT

Validation Demonstation www.cnn.com HTML errors CSS errors HTML Tidy

Using the WDT

Download and install the WDT https://addons.mozilla.org/

downloads/latest/60/addon-60-latest.xpi

Using the WDT

Using the WDT

Cascading Style Sheets Disable browser defaults Disable all CSS CSS by Media Type

www.cnn.com

Using the WDT

Images Replace images with alternative text Display alternative text Hide images

www.cnn.com

Using the WDT

JavaScript View JavaScript

Tables Table information Table Depth

HTML Validation

http://cio.sc.gov/councilscommittees/palmetto800/talkgroupsandchanels.htm

Other Helpful Resources

100 Killer Web Accessibility Resources: Blogs, Forums, and Tutorials http://whdb.com/2008/100-killer-web-

accessibility-resources-blogs-forums-and-tutorials/

Web Accessibility Resources http://www.sc.edu/scatp/webaccess.htm