Small Steps Toward a More Accessible Web

Posted by Alison Aldrich on February 9th, 2010 Posted in: Technology

---

For people with disabilities, surfing the web can be a very frustrating experience. Many websites are developed without the special needs of people with visual impairments, hearing loss, and/or mobility challenges in mind. Here are a few simple steps you can take today that will improve the accessibility of your organization’s webpages.

Use an accessibility checker

A good first step to making your webpages more accessible is to run them through one or more online accessibility checkers. Enter a URL and you will get back a report suggesting areas for improvement. Here are three freely available accessibility checkers:

Functional Accessibility Evaluator – from the University of Illinois at Urbana-Champaign. Generates a very readable report with pass, warning, and fail indicators for various page elements.

W3C Web validator service – checks the markup of your webpages and delivers a line-by-line report of inconsistencies and accessibility problems

WAVE – Web Accessibility Evaluation Tool from WebAIM. Delivers an annotated version of your webpage highlighting areas for improvement.

Use Alt text to describe images

Visually impaired visitors to your website may be using special software to have the page contents read out loud to them.  In the html code, you should include Alt text to describe any meaningful images on the page. “Alt” is an attribute of the <img> tag. For example:

<img src=”/images/PNRStaff-06-24-08.jpg” alt=”group photo of the Regional Medical Library staff”>

For complex images (such as charts and graphs) that cannot be easily summarized in a few words, compose a longer summary on a separate, plain webpage and use the <longdesc> tag to point to that page. For example:

<img src=”/images/PNRStaff-06-24-08.jpg” alt=”group photo of the Regional Medical Library staff” longdesc=”/images/staffphoto2008.html”>

Alternatively, you could include the description in the regular text on the page.

Skip navigation

Links to navigate within a website are commonly placed at the top of the page, making those links the first things to be read aloud to visitors listening to your pages with screen reader software. Consider including a “skip navigation” link in the upper left corner to spare listeners the hassle of having to wait through a repeat of menu options before they get to the main content of the page. If you like, you can do this invisibly using the class “hide” within <span> tags. That way, the link will be heard but not seen.

<span><a href=”#SKIP” title=”Skip Navigation” >Skip this top of page navigation</a></span>

Transcripts and captions

Audio and video content are now common on the Web. For audio files, include transcripts for the benefit of hearing-impaired users (and for anyone who would rather read than listen). For video content, you should ideally include both live captions and text transcript. Captioning can be a time-consuming process, but tools exist to make it easier than you may think. Most screencasting and video production software includes captioning functionality. To caption existing videos already on the Web (on YouTube or Google Video, for example) try Overstream.

Keeping Web Accessibility in Mind from WebAIM is an example of a fully accessible video with captions, a transcript, multiple access links, and even a Spanish translation. Watch, read, or listen to the whole thing to gain a better appreciation for the experiences of web users with disabilities.

No small links

Many people have difficulty using a standard computer mouse. Some people use an adaptive mouse and keyboard instead, and others use “sip and puff” technology to surf the web using only their mouths.

Minimize the amount of manual dexterity it takes to successfully navigate your website. Avoid creating links that are tiny or close together. Try navigating your site using only the keyboard by tabbing from link to link. Does it work? For pages that include long lists of links, provide a table of contents at the top with anchor links allowing users to skip ahead to the sections that interest them.

Appropriate Use of Tables

When you display data in a table, make sure cells labeling data types are  appropriately marked with table header <th> tags. Sometimes tables are used not to display data but as an easy way to control the layout of the page. In this case, the <th> tag should not be used because it would not convey any meaningful information. When a table controls the layout of the page, make sure the different content elements in the table would be read in the correct order by screen reading software. This will be exactly the order in which they appear in the source code.

Office Files

If you link to Word documents, Power Point files, or PDF files on your website, take the time to make sure these files are accessible. WebAIM offers detailed instructions on how to do this:

Word – http://www.webaim.org/techniques/word/

PowerPoint – http://www.webaim.org/techniques/powerpoint/

Adobe PDF – http://www.webaim.org/techniques/acrobat/

Section 508 Compliance at NN/LM

Here in the NN/LM PNR office, we are taking steps to improve the accessibility of everything we put on our website. This is in accordance with Section 508 of the Rehabilitation Act, §1194.22 which requires Federal government agencies to provide  fully accessible web content.  The next time you attend an RML Rendezvous webcast, you will notice that it is being closed captioned.

Please let us know if you or someone you know has a disability that prevents full access to any NN/LM web-based service or resources. We will do our best to provide a fully accessible version.

Additional Resources

W3C Web Accessibility Initiative – The World Wide Web Consortium (W3C) is an international organization that develops Web standards.

WebAIM is a not-for-profit organization dedicated to improving web accessibility in government, non-profit, business, education, and health care sectors. WebAIM provides many, many useful tutorials and references.