Presentation is loading. Please wait.

Presentation is loading. Please wait.

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

Similar presentations


Presentation on theme: "All About WAVE An Overview of WAVE, A Web Accessibility Evaluation Tool presented by Julie E. Grisham, M.Ed."— Presentation transcript:

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

2 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/accessibilitywww.w3.org/standards/webdesign/accessibility

3  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 To begin, go to the WAVE page to install the toolbar (for Firefox) http://wave.webaim.org/toolbar 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/http://wave.webaim.org/

5 AGBell WAVE Report  Ran WAVE report on www.agbell.orgwww.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 In addition to the errors, the report will reflect passed elements of the Web site/page, most shown in green such as this. 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.

7 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 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  Index of WAVE icons – very helpful in understanding the outcomes of the WAVE reports. Index of WAVE icons  Evaluate for Cognitive Accessibility – the checklist helps determine the accessibility of a page. Evaluate for Cognitive Accessibility 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 The W3C Web Accessibility Initiative shares an extensive list of tools at http://www.w3.org/WAI/RC/tools/complete 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  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). http://achecker.ca/checker/index.php#output_divwww.agbell.org

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

13


Download ppt "All About WAVE An Overview of WAVE, A Web Accessibility Evaluation Tool presented by Julie E. Grisham, M.Ed."

Similar presentations


Ads by Google