230 likes | 341 Vues
Discover essential tools like the Web Accessibility Toolbar (WAT) and the Firefox Web Developer’s Toolbar (WDT) to evaluate websites effectively. These tools enable you to assess color contrast, flicker rates, and simulate various user experiences, ensuring better web accessibility. While they empower non-technical users to identify page elements without HTML knowledge, remember that these tools are not a substitute for human evaluation. Learn how to utilize these resources to enhance your website's usability and accessibility.
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