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

Slides:



Advertisements
Similar presentations
ADA Compliant Websites & Documents What the heck am I supposed to do?
Advertisements

Web Accessibility: Mastering the Essentials for Compliance Annie Bélanger Liam Morland May 2013.
Principles of Web Design 5 th Edition Chapter Nine Site Navigation.
Creating Accessible Word Documents by Debbie Lyn Jones, IT Manager I, NSU Webmaster FRIDAY, JANUARY 23, 2015.
Web Accessibility Web Services Office of Communications.
Chapter 3 Tables and Page Layout
The ACCESS Project Jesse Hausler, UDL/Accessibility Coordinator Craig Spooner, Coordinator.
HTML Hypertext Markup Language –First proposed by CERN in 1989 –It is non-linear so it allows you to jump from place to place –Markup refers to the structure.
Introduction to Web Accessibility. What is Web Accessibility Web accessibility means that people with disabilities can use the Web Disabilities including.
Standards & Accessibility DMFD. Digital Media: Communication and DesignF2007 Comments Homepage  Requirement: include photo in index.html (today’s.
Issues related to the development of accessible web sites Steven Builta October 2002.
Chapter 4 Planning Site Navigation Principles of Web Design, 4 th Edition.
How to Create Accessible PowerPoint Presentations Elizabeth Tu and Thayer Watkins April, 2010.
IV. “Regular” Web Pages: HTML A Web Accessibility Primer: Usability for Everyone Office of Web Communications.
Web Accessibility John Rochford UMMS Shriver Center Director, INDEX Program Rich Caloggero WGBH National Center for Accessible Media MIT Adaptive Technology.
Designing for Disabled Users.  p?vid=35 p?vid=35.
 What is web accessibility? ture=relatedhttp://
HTML Tags. Objectives Know the commonly used HTML tags Create a simple webpage using the HTML tags that will be discussed.
Electronic Communication and Web Accessibility Workshop.
Carolyn Fiori, College of San Mateo Judy Lariviere, Skyline College Assistive Technology Specialists.
Accessibility of Text European Agency for Special Needs and Inclusive Education.
WEBINAR SERIES: ACCESSIBLE INTERACTIVE DOCUMENTS Week 3: Accessible Web Forms Norman Coombs
Getting Started with Expression Web 3
Planning an Accessible Website: Beyond Alt Tags Stephanie M. Randolph School of Health, Physical Education, and Recreation Indiana University.
Tutorial 1 Getting Started with Adobe Dreamweaver CS3
The Internet Writer’s Handbook 2/e Web Accessibility Writing for the Web.
Web Accessibility John M. Call, Coordinator Academic Accommodations and Technology University Accessibility Center Brigham Young University 1520 WSC –
WEB ACCESSIBILITY & CQ MEETING STANDARDS & MAKING ACCESS FOR ALL.
Is Your Site Accessible? Web Site Testing for Accessibility Presented by: The NYS Forum IT Accessibility Committee The NYS Forum Webmasters Guild Northeast.
Birkbeck University of London Business Workshop Web Accessibility Introduction and welcome.
Project 2 Adding Web Pages, Links, and Images Dreamweaver MX 2004 Concepts and Techniques.
Emily Gibson The College of New Jersey An Evaluation of Current Software Tools* Evaluation & Repair Software.
XP 1 Microsoft Word 2002 Tutorial 1 – Creating a Document.
Dreamweaver CS4 Concepts and Techniques Chapter 2 Adding Web Pages, Links, and Images.
Developing Accessible PDF Documents Carolyn Kelley Klinger October 10, 2009 Accessibility Camp DC.
Chapter 1 Creating a Dreamweaver Web Page and Local Site
Web Accessibility Web Accessibility Committee Memorial University of Newfoundland Presentation to Webdays 2005.
WEB ACCESSIBILITY. WHAT IS IT? Web accessibility means that people with disabilities can use the Web. Web accessibility encompasses all disabilities that.
Copyright © 2012 W3C (MIT, ERCIM, Keio) BAD: Before and After Demo Shadi Abou-Zahra W3C Web Accessibility Initiative (WAI)
Week 4 Planning Site Navigation. 2 Creating Usable Navigation Provide enough location information to let the user answer the following navigation questions:
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 5 Key Concepts 1 Copyright © Terry Felke-Morris.
Accessibility : Designing the Interface and Navigation The Non-Designer’s Web Book Chapter 7 Robin Williams and John Tollett Presented by Sherie Loika.
Creating Accessible PDFs Professional Development Day Fall 2015.
MIMOS Berhad. All Rights Reserved. Nazarudin Wijee Mohd Sidek Salleh Grid Computing Lab MIMOS Berhad P-GRADE Portal Heuristic Evaluation.
Multimedia Authoring1 What is accessible web design? Why bother with accessible web design? Legal reasons Benefits to people without disabilities How is.
 Start Microsoft Word from the icon or shortcut for the application. This is usually accessible from the Start Button. Then go to Programs, then Microsoft.
+ Accessible Document Basics Cindy Compeán Accessibility/Assistive Technology Specialist
A centre of expertise in digital information managementwww.ukoln.ac.uk Accessibility and Usability For Web Sites: An Introduction to Web Accessibility.
ADA 508 Compliance in Online Classes Presenter: Tahiya Marome.
Web Design Principles 5 th Edition Chapter 3 Writing HTML for the Modern Web.
The User Experience “Keeping Web Accessibility In Mind” Video available online at:
Web Accessibility June 2, 2016 Evaluation and Workflow.
Web Accessibility. Why accessibility? "The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect."
Web Accessibility Web Community Meeting July 22, 2016 July 29, 2016.
Creating an Environment that is Usable by All
The Internet for All.
Making the Web Accessible to Impaired Users
MUG Tuesday, May 31, 2016.
Creating Accessible PDFs from Word Docs
Information Architecture and Design I
Introduction to Web Accessibility
Creating Accessible Electronic Content
Web Accessibility Allison Kidd, Accessibility Specialist
Web Content Accessibility Beata M. Ofianewska (DG COMM) 7 December 2006 December 2006 COMM C2.
Creating Accessible PowerPoint Slides
Finding Magazine and Journal Articles in
Accessibility Tips for Your Office
Information Architecture and Design I
Introduction to Web Accessibility
WebAIM Screen Reader Survey Results
Presentation transcript:

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

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)

 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!

To begin, go to the WAVE page to install the toolbar (for Firefox) 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

AGBell WAVE Report  Ran WAVE report on 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.

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.

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

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

 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.

The W3C Web Accessibility Initiative shares an extensive list of tools at 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.

 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: (input

Check out the following sites for more information on Web accessibility.  World Wide Web Consortium (W3C):  Web Accessibility Information:  List of Accessibility Tools:  WAVE Toolbar:  Index of WAVE Icons:  Cognitive Accessibility Checklist: