Transcript Web Tools to Evaluate Sites

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/l
atest/60/addon-60-latest.xpi
Benefits
Various tools to evaluate websites
Functions:





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
page
Identifies elements of a page without
digging into HTML
Allows users to see a page how others
may see the page
Cons
Not a replacement for a human
evaluation
Non-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/palme
tto800/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/lates
t/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-webaccessibility-resources-blogs-forums-and-tutorials/
Web Accessibility Resources

http://www.sc.edu/scatp/webaccess.htm