Marketing for Libraries Logo

HTML Section: Website Accessibility

Web Accessibility In Mind (WebAIM) is administered through a grant provided by the Fund for the Improvement of Postsecondary Education (FIPSE) Learning Anywhere Anytime Partnerships (LAAP). Our goal is to improve accessibility to online learning opportunities for all people; in particular to improve accessibility for individuals with disabilities who currently may have a difficult time getting access to postsecondary online learning opportunities. - WebAIM

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.

Accessible website are defined as those that can be used by people regardless of physical or technological limitations.

As you plan your website, consider the following categories of physical disabilities: visual, auditory, motor, cognitive, and seizure. Think about how a person with a particular disability would be able to access the information on your website. Specifically, consider the following areas:

Also consider the technological challenges of your end user. People with small screens, dial-up connections, and limited software should still be able to benefit from your website.

readRead!
Read How People with Disabilities Use the Web: Overview at WC3.

Also read Universal Usability by P.J. Lynch and S. Horton at Web Style Guide plus Accessibility at W3C for some background information on accessibility.

Section 508

Section 508 of the US Rehabilitation Act requires access to electronic and information technology procured by Federal agencies. Be sure to read the Electronic and Information Technology Accessibility Standards (Section 508). Regardless of your website's purpose, you should plan to meet the demands of Section 508.

Approaches to Accessibility

There are two approaches to accessibility.

First, you can embed the site with resources that will assist a user with access. For example, adding ALT tags to describe images is integrated right into the website.

Second, you can create an alternative version of your website or individual pages within your website. For example, you could create a Text-Only version of your website. Or alternative activities for an interactive Flash animation assignment.

readRead!
Read Understanding accessibility and review the Web checklist guidelines from IBM.

Read The User's Perspective and HTML Accessibility from WebAIM. 

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

Basic Elements of Text-Only

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]

Tables and Accessibility

Tables cause particular problems for visually impaired users. It's a good idea to avoid tables unless you have a specific need to display data.

By default, a screen reader will read table text row by row, from left to right. If your data table runs logically in columns, a row-by-row reading will render it unintelligible. You can make your table more accessible by applying a few more attributes.

Some table markup does not yet work for screen readers. You should at least use the SUMMARY attribute to describe your table as well as the CAPTION tag instead of other tags to give your table a title. Also use the TH tag to indicate table headings.

CSS and Accessibility

Over the past few years there has been much discussion about making Cascading Style Sheets more accessible. There are a few techniques that can assist particular types of users. For example aural properties such as voice-family, volume, pitch, and cue can assist users. See examples at Aural Properties.

Go to W3C Accessibility Features of CSS and Aural Cascading Style Sheets to learn more about specific issues.

readRead!
Read Cascading Style Sheets and Accessibility (2008) by Marco Bertoni. This article discusses ways to make your CSS more accessible.

Test Accessibility

Although you may work hard to address accessibility issues, it's still a good idea to test each web page to ensure compliance.

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.

 

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. If and only if your webpage passes the accessibility test with no errors, then you should follow the directions and use / place an accessibility tool logo on your webpage (Sample from Cynthia Says displayed below).

image of Cynthia Tested logo

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 itTry 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? (You may use any of the accessibility tools; added information for Cynthia Says provided below.)

Read Using the Cynthia Says Accessibility Validation Service from AIM.

Go to HiSoftware® Cynthia Says™. Enter the URL of the webpage you want to check. Make sure the Accessibility Report Mode is set for Section 508 and click on the 'Test Your Site' button. Review the results.

Read and understand Cynthia™ Tested Button Guidelines - When, Why, and How to use.

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.

readRead!
Read WebAIM's Introduction to Web Accessibility.

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.

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

 

References

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.

Questions Answered by Experts from the Information Technology Technical Assistance & Training Ctr. at Georgia Institute of Technology

Section 508

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.

Tools and Resources at Section 508


| eduScapes | IUPUI Online Courses | Teacher Tap | 42eXplore | About Us | Contact Us | © 2006-2013 Annette Lamb & Larry Johnson