web tools to evaluate sites using technology to aid in website evaluations allison yeager
TRANSCRIPT
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