Coding: Formative Evaluation: Accessibility

In 1998, Congress amended the Rehabilitation Act to require federal agencies to make their electronic and information technology accessible to persons with disabilities. Section 508 was enacted to eliminate barriers to information technology, to make available new opportunities for people with disabilities, and to encourage development of technologies that will help achieve those goals.

Read Chapter 13 by Rob Huddleston in HTML, XHTML, & CSS.

Making your website accessible is an important part of web development.

Basics for Accessibility

Title. Be sure to include a title in the head section of the document.

Text. For text, use style sheets and class names that are descriptive. Add voice families for listeners.

The easiest way to get started is by making sure you have included alternative text for all visual and auditory elements of your page such as images, links, tables, videos, and sounds.

Images. For images, use alternative text.

<img src="woods.jpg" alt="This photograph shows an old-growth cedar forest in the northern Cascades." />

Tables. For tables, use a table summary and caption.

<table summary="This table compares the television viewing habits of teenage males and females." >

Audio. It's a good idea to provide a narrative alternative that can be read aloud. Or, at least use the ALT option for a description.

<object type="audio/x-wav" data="frog.wav" width="200" height="20">
<param name="src" value="frog.wav"/>
<param name="autoplay" value="false"/>
<param name="autoStart" value="0"/>
alt : <a href="frog.wav">frog.wav</a>
</object>

Video. Multimedia projects present unique problems for accessibility. Consider adding description. Notice the coding below;

<object type="application/x-shockwave-flash" style="width:450px; height:366px;" data="http://www.youtube.com/v/GsF1RzL1Ql8" >
This video contains important information including...
<param name="movie" value="http://www.youtube.com/v/GsF1RzL1Ql8" />
</object>

Avoid frames and complex layouts that would be difficult for web assistants to interpret.

Considerations in Text-Only Versions

Needs

• Meet special needs associated with visual and auditory challenges
• Provide alternative presentation method to address roll-over and other technical issues
• Incorporate option for printing

Basic Elements of Text-Only

• Equivalent alternatives to auditory and visual content
• Convey information without color
• Remove formatting such as tables
• Provide alternatives to interactive activities (i.e., roll-overs, pop-ups)
• Provide context and orientation information & clear navigation mechanisms

Suggested Format
[This page contains the text of the entire first module titled Module A: Overview. This module contains 16 numbered screens.]

[Start Screen A-1 of 16]

What is Outcomes Based Evaluation?

Your work in a library or museum makes a difference in the life of visitors. What is the best way to demonstrate that difference?

[End Screen A-1 of 16]

Learn More

The World Wide Web Consortium (W3C) is, the international community where member organizations, a full-time staff, and the public work together to develop and maintain Web Standards (Remember the validation tools for HTML and CSS that we have already used). W3C's Web Accessibility Initiative (WAI) works with organizations around the world to develop strategies, guidelines, and resources to help make Web content accessible to people with disabilities. One of the leading U.S. groups involved is WebAIM: Web Accessibility in Mind, a non-profit organization within the Center for Persons with Disabilities at Utah State University.

Read WebAIM's Introduction to Web Accessiblity.

Accessibility tools can only partially check accessibility through automated online software tools. Of the sixteen standards in Section 508, only seven standards can be partially evaluated automatically. Similarly, of the combined 65 checkpoints in WCAG 1.0 Priority 1 through Priority 3, only nineteen can be partially evaluated automatically. The real key is to understand the web accessibility standards rather than totally relying on a tool to determine if a page is accessible or not.

Read A Review of Free, Online Accessibility Tools from WebAIM.

Test for Web Accessibility

When you think you've made your website web accessible, it's time to check with an online accessibility tool such as (1) HiSoftware® Cynthia Says™ Portal, (2) WAVE from WebAIM, or (3) Accessibility Valet Demonstrator to see if your page is really compliant with current guidelines. These are automatic verifiers of web site accessibility designed to expose possible barriers to website use by those with disabilities. These online tools check your web page to determine how well it addresses Section 508 of the US Rehabilitation Act and W3C's Web Content Accessibility Guidelines (WCAG). They check one page at a time and provide feedback. Your job is not to address everything, but to be aware of the barriers to accessibility. The tools are slightly different in the way they look and the way they report back their results to you. For example rather than providing a complex technical report, WAVE shows your original web page with embedded icons and indicators. Be sure to read the Help Sections of any of the accessibility tools that you use.

Be reminded that accessibility tools can only partially check accessibility through automation. The real key is to understand as much as possible about the web accessibility standards rather than totally relying on a tool to determine if a page is accessible or not. And similar to using online code validation tools, the more that you work with an accessibility tool - the more that you will understand.

Running the Test - An Example at Cynthia Says

Go to the HiSoftware® Cynthia Says™ website. Enter your URL.

Copy and paste the URL of the webpage which you want to check into the 'Web Page (Required)' text box. Avoid keyboarding / typo errors by Copying and pasting the URL directly in place rather than entering manually. Check to be sure that you have the URL correct.
Be sure that Section 508 is selected underneath of Accessibility Report Mode.
Read through the information provided in the 'Completing this form' section (bottom of page).
Then check your URL by clicking on the 'Test your site' button.

Using the guidelines established by the World Wide Web Consortium's (W3C) Web Access Initiative (WAI) and the Section 508 guidelines from the Architectural and Transportation Barriers Compliance Board (Access Board) of the U.S. Federal Government, HiSoftware® Cynthia Says™ will test your web pages.

Examining the Results

When you get your Verification results, you'll want to go back and make changes that might increase the accessibility of your pages. Unless you're a state or federal government agency (Check individual states for exact requirements), you don't have to make all the recommended changes. However you should be aware that if your pages aren't Section 508 compliant, some people may not be able to use your site.

You should make changes so that 0 errors occur. It's okay if you have a few warnings, as long as you're aware of the issue and understand why the warning is given. Oftentimes it is a situation that cannot be automatically checked by the software and is something that you can check yourself. Read and understand Cynthia™ Tested Button Guidelines - When, Why, and How to use. If and only if your webpage passes the accessibility test with no errors, then you should follow the directions and use / place the Cynthia Tested Logo on the webpage (Displayed here below).

The system does not always automatically create or give you access to the icon like the HTML or CSS validation. However you are free to add a Tested Icon if your page(s) is compliant with the minimum levels for Section 508, WCAG 1.0 P1, CLF or an Equivalent Standard.

Note: If you get a message saying that the system is busy, just try again later.

Try It

Conduct an accessibility validation test on your practice page. For help in interpreting the results, explore the documents connected in the Learn More section below. How can you improve your web authoring to be more accessible?

Learn More

HiSoftware® Cynthia Says™ also provides several online tutorials that explain and guide your coding for passing accessibility tests.

Creating Alt Text for Images - good and bad practices used in describing images with alternative text or long descriptions.

Section 508 Standards (a) / WCAG Guidelines 1.1 - guide to complying with the Section 508 guidelines.

Section 508 Standard (b) & W3C WCAG 1.0 Guidelines 1.1 - tips for Section 508 with equivalent alternatives for presentation of multimedia elements.

Section 508 (c) W3C Guidelines 2.1 - information conveyed with color is also available without color.

Section 508 (g&h) W3C Guidelines 5.1 &5.2 - use of columns, cells, tables and their headings.

Section 508 (i) W3C Guidelines 1.1 &12.1 - use of frame and frame set elements.

Section 508 (j) W3C Guidelines 7.1 - alternatives for BLINK and MARQUE elements.

Section 508 (l)&(m) W3C Guidelines 6.3 - Ensure that pages are usable or provide equivalent information when scripts, applets, or other programmatic objects are turned off or not supported.

Section 508 (0) - provide method that allows users to skip repetitive navigation links.

The above tutorial guide sections are from the book Understanding Accessibility, published by HiSoftware Publishing. The entire book can be viewed online in accessible HTML Help format. Also find more information at:

Section 508: The Road to Accessibility - information from the federal government.

---