WAVE+-+Web+Assessability

=Web Assessibility & Evaluation with WAVE = Craig Kasemodel

**The web's potential** **﻿** The internet or web offers unlimited potential for all people to participate in the new social media, conduct research for information, and to participate in online learning. It is imperative to ensure the web accessible to all people regardless of their ability. The web is an important resource for many aspects of life. The Web Accessibility in Mind, an initiative of Utah State University, estimates that close to 20% of all people have some type of disability that potentially limit their use of the web ([|http://webaim.org/]). In order to provide equal access and equal opportunity for all people from all walks of life, web accessibility is important for active participation in society for all people. It is also the law!

**The Digital Divide** media type="youtube" key="KM-4nCCLjAs" height="315" width="420"

**Keeping Web Accessibility in Mind** [|Keeping Web Accessibility in Mind Video] **﻿** **Experiences of Students with Disabilities** media type="youtube" key="kziXJX6a7E4" height="315" width="420"

**﻿** **What is Web Accessibility?** **﻿** **According to the Web Accessibility Initiative, //"Web accessibility means that people with disabilities can use the Web//**//. More specifically, Web accessibility means that people with disabilities can perceive, understand, navigate, and interact with the Web, and that they can contribute to the Web. Web accessibility also benefits others, including// [|//older people//] //with changing abilities due to aging.// //Web accessibility encompasses all disabilities that affect access to the Web, including visual, auditory, physical, speech, cognitive, and neurological disabilities. Millions of people have disabilities that affect their use of the Web. Currently most Web sites and// [|//Web software//] //have// **//accessibility barriers//** //that make it difficult or impossible for many people with disabilities to use the Web. As more accessible Web sites and software become available, people with disabilities are able to use and contribute to the Web more effectively.// <span style="font-family: Arial,Helvetica,sans-serif; font-size: 120%;">//Web accessibility also// **//benefits//** //people// without //disabilities. For example, a key principle of Web accessibility is designing Web sites and software that are flexible to meet different user needs, preferences, and situations. This// **//flexibility//** //also benefits people// without //disabilities in certain situations, such as people using a slow Internet connection, people with "temporary disabilities" such as a broken arm, and people with changing abilities due to aging. The document "//[|//Developing a Web Accessibility Business Case for Your Organization//]//" describes many different benefits of Web accessibility, including// **//benefits for organizations//**//."// ([]).

<span style="font-family: Arial,Helvetica,sans-serif; font-size: 170%;">**Web Accessibility﻿** <span style="font-family: Arial,Helvetica,sans-serif; font-size: 120%;">media type="youtube" key="d53wCKCtmyY" height="315" width="420"

= Web accessibility in civil society: Persons with disabilities in today's educational environments  = media type="youtube" key="MuBtQMsXQvI" height="315" width="560"

** Financial Factors in Developing Web Accessibility ** <span style="font-family: Arial,Helvetica,sans-serif; font-size: 120%;">An organization's efforts to make its website accessible often have a financial impact, and can result in positive return on investment and cost efficiencies. Financial costs and benefits in developing accessible websites apply differently to specific organizations and situations. For example, costs related to Web accessibility are often lower when building a new site than when fixing an existing site, and sometimes complex sites are less costly to fix than simple sites because they use templates and content management systems (CMS).

<span style="font-family: Arial,Helvetica,sans-serif; font-size: 120%;">A major benefit of Web accessibility is the potential for direct and indirect financial gains from increased website use. Web accessibility can make it easier for people to find a website, access it, and use it successfully, thus resulting in increased audience (more users) and increased effectiveness (more use). Many organizations benefit financially when more people successfully use their website; for example, commercial companies can get more sales, educational institutions can get more students, and non-profit organizations can get more funding by demonstrating successful outreach and dissemination. Increasingly, websites are used to cut costs by decreasing customer support services and letting customers complete transactions online rather than requiring personnel and paper interactions. The many examples of cost savings from online transactions include citizens renewing licenses; filing tax returns and making payments online; investors trading stock and monitoring their pension funds online; and students registering for classes and completing course work online. Thus, increased site use can result in financial gains and cost savings.

**The Essential Components of Web Accessibility** <span style="font-family: Arial,Helvetica,sans-serif; font-size: 120%;">It is essential that several different components of Web development and interaction work together in order for the Web to be accessible to people with disabilities. These components include: (<span style="font-family: Arial,Helvetica,sans-serif;">[] )
 * <span style="font-family: Arial,Helvetica,sans-serif; font-size: 120%;">**content** - the information in a Web page or Web application, including: **Web browsers, media players**, and other "user agents"**assistive technology**, in some cases - screen readers, alternative keyboards, switches, scanning software, etc.
 * <span style="font-family: Arial,Helvetica,sans-serif; font-size: 150%;">natural information such as text, images, and sounds
 * <span style="font-family: Arial,Helvetica,sans-serif; font-size: 150%;">code or markup that defines structure, presentation, etc.
 * <span style="font-family: Arial,Helvetica,sans-serif; font-size: 120%;">**users**' knowledge, experiences, and in some cases, adaptive strategies using the Web
 * <span style="font-family: Arial,Helvetica,sans-serif; font-size: 120%;">**developers** - designers, coders, authors, etc., including developers with disabilities and users who contribute content
 * <span style="font-family: Arial,Helvetica,sans-serif; font-size: 120%;">**authoring tools** - software that creates Web sites
 * <span style="font-family: Arial,Helvetica,sans-serif; font-size: 120%;">**evaluation tools** - Web accessibility evaluation tools, HTML validators, CSS validators, etc.
 * <span style="font-family: Arial,Helvetica,sans-serif; font-size: 120%;">**evaluation tools** - Web accessibility evaluation tools, HTML validators, CSS validators, etc.


 * How the Essential Components Relate **



media type="youtube" key="y4m_S4XBw5A" height="315" width="420"

<span style="font-family: Arial,Helvetica,sans-serif; font-size: 150%;">Making the Web Accessible
<span style="font-family: Arial,Helvetica,sans-serif; font-size: 120%;">There are two main guidelines and standards for developing an accessible internet. The Web Accessibility Initiative has developed the Web Content Accessibility 2.0 (WCAG 2) guidelines ([] and []) and the US federal government has amended the United States Rehabilitation Act several times to include and update Section 508 ([], [], and []).

<span style="font-family: Arial,Helvetica,sans-serif; font-size: 150%;">**Section 508** <span style="font-family: Arial,Helvetica,sans-serif; font-size: 150%;">**﻿** <span style="font-family: Arial,Helvetica,sans-serif; font-size: 120%;">//"Section 508 requires that when Federal agencies develop, procure, maintain, or use electronic and information technology, Federal employees with disabilities have access to and use of information and data that is comparable to the access and use by Federal employees who are not individuals with disabilities, unless an undue burden would be imposed on the agency. Section 508 also requires that individuals with disabilities, who are members of the public seeking information or services from a Federal agency, have access to and use of information and data that is comparable to that provided to the public who are not individuals with disabilities, unless an undue burden would be imposed on the agency." (//[]).

<span style="font-family: Arial,Helvetica,sans-serif; font-size: 170%;">**WCAG 2 (Web Content Accessibility 2.0)** <span style="font-family: Arial,Helvetica,sans-serif; font-size: 150%;">**﻿** <span style="font-family: Arial,Helvetica,sans-serif; font-size: 120%;">The Web Accessibility Initiative has a short list of the WCAG 2 guidelines: <span style="font-family: Arial,Helvetica,sans-serif; font-size: 120%;">**//"Perceivable//** <span style="font-family: Arial,Helvetica,sans-serif; font-size: 120%;">**//Operable//** <span style="font-family: Arial,Helvetica,sans-serif; font-size: 120%;">**//Understandable//** <span style="font-family: Arial,Helvetica,sans-serif; font-size: 120%;">**//Robust//** <span style="font-family: Arial,Helvetica,sans-serif; font-size: 120%;">([]).
 * <span style="font-family: Arial,Helvetica,sans-serif; font-size: 120%;">//Provide **text alternatives** for non-text content.//
 * <span style="font-family: Arial,Helvetica,sans-serif; font-size: 120%;">//Provide **captions and other alternatives** for multimedia.//
 * <span style="font-family: Arial,Helvetica,sans-serif; font-size: 120%;">//Create content that can be **presented in different ways**,including by assistive technologies, without losing meaning.//
 * <span style="font-family: Arial,Helvetica,sans-serif; font-size: 120%;">//Make it easier for users to **see and hear content**.//
 * <span style="font-family: Arial,Helvetica,sans-serif; font-size: 120%;">//Make all functionality available from a **keyboard**.//
 * <span style="font-family: Arial,Helvetica,sans-serif; font-size: 120%;">//Give users **enough time** to read and use content.//
 * <span style="font-family: Arial,Helvetica,sans-serif; font-size: 120%;">//Do not use content that causes **seizures**.//
 * <span style="font-family: Arial,Helvetica,sans-serif; font-size: 120%;">//Help users **navigate and find content**.//
 * <span style="font-family: Arial,Helvetica,sans-serif; font-size: 120%;">//Make text **readable and understandable**.//
 * <span style="font-family: Arial,Helvetica,sans-serif; font-size: 120%;">//Make content appear and operate in **predictable** ways.//
 * <span style="font-family: Arial,Helvetica,sans-serif; font-size: 120%;">//Help users **avoid and correct mistakes**.//
 * <span style="font-family: Arial,Helvetica,sans-serif; font-size: 120%;">//Maximize **compatibility** with current and future user tools."//


 * <span style="background-color: transparent; color: #333333; font-family: Arial,Helvetica,sans-serif; font-size: 170%;"> WCAG 2.0 Theme Song Web Content Accessibility Guidelines **

<span style="font-family: Arial,Helvetica,sans-serif;">media type="youtube" key="gtuna2AWvqk" height="315" width="420"

** BSI Documentary - Web accessibility - World Standards Day 14 Oct 2010 **

media type="youtube" key="awldEoQ-aNQ" height="315" width="560"

<span style="font-family: Arial,Helvetica,sans-serif; font-size: 170%;">**Principles of Accessible Design** <span style="font-family: Arial,Helvetica,sans-serif; font-size: 120%;">**﻿**WebAIM has condensed these guidelines and standards into a usable set of Principles of Accessible Design to make a website "POURable" and compliant with Section 508. They are as follows:

<span style="font-family: Arial,Helvetica,sans-serif; font-size: 120%;">//"//[|//Provide appropriate alternative text//] <span style="font-family: Arial,Helvetica,sans-serif; font-size: 120%;">//Alternative text provides a textual alternative to non-text content in web pages. It is especially helpful for people who are blind and rely on a screen reader to have the content of the website read to them.//

<span style="font-family: Arial,Helvetica,sans-serif; font-size: 120%;">[|//Provide headings for data tables//] <span style="font-family: Arial,Helvetica,sans-serif; font-size: 120%;">//Tables are used online for layout and to organize data. Tables that are used to organize tabular data should have appropriate table headers (the element). Data cells should be associated with their appropriate headers, making it easier for screen reader users to navigate and understand the data table.//

<span style="font-family: Arial,Helvetica,sans-serif; font-size: 120%;">[|//Ensure users can complete and submit all forms//] <span style="font-family: Arial,Helvetica,sans-serif; font-size: 120%;">//Ensure that every form element (text field, checkbox, dropdown list, etc.) has a label and make sure that label is associated to the correct form element using the tag. Also make sure the user can// [|//submit the form and recover from any errors//]//, such as the failure to fill in all required fields.//

<span style="font-family: Arial,Helvetica,sans-serif; font-size: 120%;">[|//Ensure links make sense out of context//] <span style="font-family: Arial,Helvetica,sans-serif; font-size: 120%;">//Every link should make sense if the link text is read by itself. Screen reader users may choose to read only the links on a web page. Certain phrases like "click here" and "more" must be avoided.//

<span style="font-family: Arial,Helvetica,sans-serif; font-size: 120%;">[|//Caption and/or provide transcripts for media//] <span style="font-family: Arial,Helvetica,sans-serif; font-size: 120%;">//Videos and live audio must have captions and a transcript. With archived audio, a transcription may be sufficient.//

<span style="font-family: Arial,Helvetica,sans-serif; font-size: 120%;">//Ensure accessibility of non-HTML content, including// [|//PDF files//]//,// [|//Microsoft Word//] //documents,// [|//PowerPoint//] //presentations and// [|//Adobe Flash//] //content.// <span style="font-family: Arial,Helvetica,sans-serif; font-size: 120%;">//In addition to all of the other principles listed here, PDF documents and other non-HTML content must be as accessible as possible. If you cannot make it accessible, consider using HTML instead or, at the very least, provide an accessible alternative. PDF documents should also include a series of tags to make it more accessible. A tagged PDF file looks the same, but it is almost always more accessible to a person using a screen reader////.// <span style="font-family: Arial,Helvetica,sans-serif; font-size: 120%;">//﻿// <span style="font-family: Arial,Helvetica,sans-serif; font-size: 120%;">[|//Allow users to skip repetitive elements on the page//] <span style="font-family: Arial,Helvetica,sans-serif; font-size: 120%;">//You should provide a method that allows users to skip navigation or other elements that repeat on every page. This is usually accomplished by providing a "Skip to Content," "Skip to Main Content," or "Skip Navigation" link at the top of the page which jumps to the main content of the page.//

<span style="font-family: Arial,Helvetica,sans-serif; font-size: 120%;">[|//Do not rely on color alone to convey meaning//] <span style="font-family: Arial,Helvetica,sans-serif; font-size: 120%;">//The use of color can enhance comprehension, but do not use color alone to convey information. That information may not be available to a person who is colorblind and will be unavailable to screen reader users.//

<span style="font-family: Arial,Helvetica,sans-serif; font-size: 120%;">[|//Make sure content is clearly written and easy to read//] <span style="font-family: Arial,Helvetica,sans-serif; font-size: 120%;">//There are many ways to make your content easier to understand. Write clearly,// [|//use clear fonts//]//, and// [|//use headings and lists appropriately//]//.//

<span style="font-family: Arial,Helvetica,sans-serif; font-size: 120%;">[|//Make JavaScript accessible//] <span style="font-family: Arial,Helvetica,sans-serif; font-size: 120%;">//Ensure that// [|//JavaScript event handlers//] //are device independent (e.g., they do not require the use of a mouse) and make sure that your page does not rely on JavaScript to function.//

<span style="font-family: Arial,Helvetica,sans-serif; font-size: 120%;">[|//Design to standards//] <span style="font-family: Arial,Helvetica,sans-serif; font-size: 120%;">//HTML compliant and accessible pages are more robust and provide better search engine optimization.// [|//Cascading Style Sheets//] //(CSS) allow you to separate content from presentation. This provides more flexibility and accessibility of your content."// <span style="font-family: Arial,Helvetica,sans-serif; font-size: 120%;">([|http://webaim.org/intro/] and []).

<span style="font-family: Arial,Helvetica,sans-serif;">media type="youtube" key="NAuz_LSnDqw" height="315" width="560"
 * <span style="background-color: transparent; color: #333333; font-family: Arial,Helvetica,sans-serif; font-size: 22px;">Accessibility: Websites: Project: Part 1 **


 * <span style="color: #000000; font-family: Arial,Helvetica,sans-serif; font-size: 170%;">Evaluating the Accessibility of a Web Site **

<span style="font-family: Arial,Helvetica,sans-serif; font-size: 120%;">There are numerous methods and tools for determining the accessibility of a web site. When developing or redesigning a website, early evaluation in the process for accessibility is key to addssing problems before they become complex. Knowledgeable human evaluation is required to determine if a website is truly accessible. However, there are evaluation tools to help with evaluation. The Web Accessibility Initiative provides a multi-page resource suite of tools that outlines different approaches and general procedures for evaluating websites for accessibility that supplements content management and quality assurance methods ([]). The WAVE tool is one such tool with ease of use and ease of interpretation in the evaluation process ([]).

<span style="font-family: Arial,Helvetica,sans-serif; font-size: 170%;">**WAVE Tool** <span style="font-family: Arial,Helvetica,sans-serif; font-size: 170%;">**﻿** <span style="font-family: Arial,Helvetica,sans-serif; font-size: 120%;">The Web Accessibility Evaluation Tool by WebAIM ([|http://wave.webaim.org/]) of Utah State University is easy to use and easy to interpret results for web accessibility evaluation. There are several methods that WAVE can evaluate a website for accessibility.

<span style="font-family: Arial,Helvetica,sans-serif; font-size: 120%;">1. Enter a website address via your web browser. <span style="font-family: Arial,Helvetica,sans-serif; font-size: 120%;">2. Upload a file for WAVE evaluation prior to posting to the web. <span style="font-family: Arial,Helvetica,sans-serif; font-size: 120%;">3. Check HTML code prior to using on the web. <span style="font-family: Arial,Helvetica,sans-serif; font-size: 120%;">4. Use the Firefox toolbar to evaluate a web page. <span style="font-family: Arial,Helvetica,sans-serif; font-size: 120%;">5. Use the Dreamweave extension to evaluate a website during the creation process. <span style="font-family: Arial,Helvetica,sans-serif; font-size: 120%;">6. Use the WAVE bookmarklet to evaluate a web page when using other developer tools in Firefox.

**WAVE Website Screenshot** <span style="font-family: Arial,Helvetica,sans-serif; font-size: 120%;">
 * <span style="font-family: Arial,Helvetica,sans-serif; font-size: 170%;">WAVE Demonstration **
 * <span style="font-family: Arial,Helvetica,sans-serif; font-size: 170%;">media type="youtube" key="8xQ8oVguSNE" height="315" width="420"﻿ **

**References:** <span style="font-family: Arial,Helvetica,sans-serif; font-size: 120%;">**﻿** <span style="font-family: Arial,Helvetica,sans-serif; font-size: 120%;">8 Simple Tips To Improve Accessibility -- THE Journal. (n.d.). Retrieved September 23, 2011, from [] <span style="font-family: Arial,Helvetica,sans-serif; font-size: 120%;">accesselearning Module 9: HTML Introduction. (n.d.). Retrieved September 23, 2011, from [] <span style="font-family: Arial,Helvetica,sans-serif; font-size: 120%;">accesselearning Tutorial: Overview. (n.d.). Retrieved September 23, 2011, from [] <span style="font-family: Arial,Helvetica,sans-serif; font-size: 120%;">Accessible Technology Initiative: California State University, Office of the Chancellor. (n.d.). Retrieved September 25, 2011, from [] <span style="font-family: Arial,Helvetica,sans-serif; font-size: 120%;">Best Practices & Guidelines | Usability.gov. (n.d.). Retrieved September 25, 2011, from [] <span style="font-family: Arial,Helvetica,sans-serif; font-size: 120%;">ConnSENSE Bulletin. (n.d.). Retrieved September 23, 2011, from [] <span style="font-family: Arial,Helvetica,sans-serif; font-size: 120%;">Electronic & Information Technology (Section 508) Homepage. (n.d.-a). Retrieved September 25, 2011, a from [] <span style="font-family: Arial,Helvetica,sans-serif; font-size: 120%;">Essential Components of Web Accessibility. (n.d.). Retrieved September 25, 2011, from [] <span style="font-family: Arial,Helvetica,sans-serif; font-size: 120%;">Evaluating Websites for Accessibility: Overview. (n.d.). Retrieved September 25, 2011, from [] <span style="font-family: Arial,Helvetica,sans-serif; font-size: 120%;">Frequently Asked Questions About Section 508: Accessible Technology Initiative: CSU System. (n.d.). Retrieved September 25, 2011, from [] <span style="font-family: Arial,Helvetica,sans-serif; font-size: 120%;">Guidelines | Usability.gov. (n.d.). Retrieved September 14, 2011, from [] <span style="font-family: Arial,Helvetica,sans-serif; font-size: 120%;">How to Meet WCAG 2.0. (n.d.-a). Retrieved September 25, 2011, a from [] <span style="font-family: Arial,Helvetica,sans-serif; font-size: 120%;">Section 508. (n.d.). Retrieved September 25, 2011, from [] <span style="font-family: Arial,Helvetica,sans-serif; font-size: 120%;">Section 508 | HHS.gov. (n.d.). Retrieved September 25, 2011, from [] <span style="font-family: Arial,Helvetica,sans-serif; font-size: 120%;">South Carolina Assistive Technology Program (SCATP). (n.d.). Retrieved September 23, 2011, from [] <span style="font-family: Arial,Helvetica,sans-serif; font-size: 120%;">UDT in Schools Online Course: Introduction. (n.d.). Retrieved September 23, 2011, from [] <span style="font-family: Arial,Helvetica,sans-serif; font-size: 120%;">WAVE - Web Accessibility Evaluation Tool. (n.d.). Retrieved September 14, 2011, from [] <span style="font-family: Arial,Helvetica,sans-serif; font-size: 120%;">WCAG 2.0 at a Glance. (n.d.). Retrieved September 25, 2011, from [] <span style="font-family: Arial,Helvetica,sans-serif; font-size: 120%;">Web Accessibility for Online Learning. (n.d.). Retrieved September 25, 2011, from [] <span style="font-family: Arial,Helvetica,sans-serif; font-size: 120%;">Web Accessibility Initiative (WAI) - home page. (n.d.). Retrieved September 23, 2011, from [] <span style="font-family: Arial,Helvetica,sans-serif; font-size: 120%;">Web Content Accessibility Guidelines (WCAG) 2.0. (n.d.). Retrieved September 23, 2011, from [|http://www.w3.org/TR/2008/REC-WCAG20-20081211/#contents] <span style="font-family: Arial,Helvetica,sans-serif; font-size: 120%;">WebAIM: Web Accessibility In Mind. (n.d.). Retrieved September 14, 2011, from [] <span style="font-family: Arial,Helvetica,sans-serif; font-size: 120%;">Welcome to AccessIT. (n.d.). Retrieved September 23, 2011, from [] <span style="font-family: Arial,Helvetica,sans-serif; font-size: 120%;">What is Universal Design- Principles of UD. (n.d.). Retrieved September 14, 2011, from []