230 likes | 314 Views
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)
E N D
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 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 • 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 • 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