All About WAVE An Overview of WAVE, A Web Accessibility Evaluation Tool presented by

1. All About WAVEAn Overview of WAVE, A Web Accessibility Evaluation Tool presented by Julie E. Grisham, M.Ed.

2. Web Accessibility Why Web accessibility? • Provide equal access and opportunity • Support social inclusion What are examples of Web accessibility? • Alternative text for images • Keyboard input • Transcripts • Captioning The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect. Tim Berners-Lee W3C Director and inventor of the World Wide Web Source: Worldwide Web Consortium (W3C) www.w3.org/standards/webdesign/accessibility

3. What is WAVE? • WAVE is a free web-based accessibility tool provided by WebAIM that allows designers/developers make their Web sites accessible. • WAVE works with Firefox as a toolbar and as an extension of Adobe Dreamweaver. • Unlike some other tools, WAVE shows original Web pages with icons and indicators that represent the accessibility of that page. • Although many aspects are suited for those well-versed in Web design, novices can benefit from WAVE’s summary reports which detail errors, etc. • WAVE is an excellent tool for a speedy evaluation!

4. How is WAVE used? To begin, go to the WAVE page to install the toolbar (for Firefox) http://wave.webaim.org/toolbar Using the WAVE toolbar • To run a WAVE report, browse to a web page, then select the "Errors, Features, and Alerts", "Structure/Order View", "Text-only View", or "Outline View" icons on the toolbar. • The plus side is the Web page is used to create the report – clicking on those elements listed in the first bullet will display the report. • The "Reset Page" icon will refresh the page and only used between reports. • The "Icons Key" button will display a list of all WAVE icons with additional details, information, and recommendations. This is a plus to help with evaluations of Web sites. Source: WAVE http://wave.webaim.org/

5. Sample WAVE Report AGBell WAVE Report • Ran WAVE report on www.agbell.org RESULTS: The WAVE report results reflected ten (10) accessibility errors. For the most part, the Web page evaluated is accessible. The errors found depend on what they are AND if changes are necessary.

6. Results of WAVE When running the report, you will see this either in big letters across the top of the page or in a cream-colored bar just at the top of the Web page. WAVE will inform as to how many accessibility errors were found. In addition to the errors, the report will reflect passed elements of the Web site/page, most shown in green such as this.

7. Examples of Errors Red Icon represents an error. Icon indicates that alternative text is not present for an image. Resolution: WAVE indicates that the image must have an alt attribute. That alt attribute contains accurate, adequately descriptive, and succinct alternative text for that image. If an image does not convey content, it should have null alternative text (alt="") Red Icon represents an error. Icon indicates that the linked image missing alternative text. Alternative text is not provided for an image that is the only thing within a link. Resolution: WAVE indicates that because each link provides a function, if the only content within a link is an image, that image must supply alternative text that describes the content of the image and/or the function of the link. Source: Wave Icon Key

8. Examples of Errors (cont.) Yellow Icon represents an HTML alert, but not necessarily an error. This means problematic link text. Headings are not in a logical order (e.g., first heading is not h1 or heading levels are skipped). Resolution: In most cases, a document should begin with an h1 and should not skip heading levels. Yellow Icon represents an HTML alert, but not necessarily an error. This means incorrectly ordered headings. Key shows that link text does not make sense out of context, contains extraneous text (such as "click here"), or is the same as another link on the page, but links to a different location. Resolution: WAVE suggests rewording the link so that it is more descriptive of its destination when read out of context of the rest of the document, remove any extraneous text (such as "click here"), and ensure that links with the same link text link do not link to different locations. Source: Wave Icon Key

9. Tips for Using WAVE • Index of WAVE icons – very helpful in understanding the outcomes of the WAVE reports. • Evaluate for Cognitive Accessibility – the checklist helps determine the accessibility of a page. Remember, do not rely solely on tools such as this to be the final word. A personal, subjective review of the page should be added to your Web access reviews.

10. Other Accessibility Tools The W3C Web Accessibility Initiative shares an extensive list of tools at http://www.w3.org/WAI/RC/tools/complete This can be simplified using the “Simple Search” button on the left of the screen. This enables you to narrow your search according to your requirements. The sample report of the AGBell Web site was run on A-Checker, a tool from Canada.

11. A-Checker vs. WAVE:A Comparison of Two Tools • Results were similar – 18 issues were found with A-Checker vs. 10 with WAVE. • Common issues had same suggestions for repairs. This indicates a global awareness of Web accessibility guidelines. • Check out the results at: http://achecker.ca/checker/index.php#output_div (input www.agbell.org).

12. Resources Check out the following sites for more information on Web accessibility. • World Wide Web Consortium (W3C): http://www.w3.org/ • Web Accessibility Information: http://webaim.org/ • List of Accessibility Tools: http://www.w3.org/WAI/RC/tools/complete • WAVE Toolbar: http://wave.webaim.org/toolbar • Index of WAVE Icons: http://wave.webaim.org/icons • Cognitive Accessibility Checklist: http://webaim.org/articles/evaluatingcognitive/#checklist

13. Questions/Comments?