Missy Harvey, Technology and Communication Coordinator
Many members of our network have received funding from MAR over the years. If a website is developed under one of these awards, the website must comply with Section 508 of the Rehabilitation Act, requiring Federal government agencies to provide accessible web content to people with disabilities.
Using the web can be frustrating but for people with disabilities, it can be even more so. Most websites are developed without any concern for people with visual impairments, hearing impairments or deafness, motor skill challenges, etc. So what can we do to improve the accessibility of our websites to help meet the needs of those facing such challenges?
Here are seven steps we can follow to improve the accessibility of our websites:
Step 1: Use Alt Tags with Images
Visually impaired people use special software to access web pages that reads the contents of a web page out loud to the person. In the HTML code, we need to include Alt tags to describe any images on the page. “Alt” is an attribute of the <img> tag. Best practices recommend that the text be descriptive rather than just 1-2 words.
<img src=”dog.jpg” alt=”golden retriever catching a Frisbee in mid-air”>
For images that are more complicated—such as charts and graphs—that cannot be easily described in a few words, provide a thorough description in the regular text on the web page. Another method is to use the <longdesc> tag to point to a plain webpage with a longer summary.
Step 2: Avoid Short Clickable Links
Therefore, it is important to reduce the amount of dexterity it takes to navigate your website. An important way to do this is to avoid creating clickable links that are short or too close together. Experiment with navigating your website using the keyboard by pressing the Tab key to jump from link to link. You’ll figure out quickly how well it works.
For websites with long lists of links, provide a table of contents at the top with anchor links allowing users to skip directly to the sections that are important to them.
Step 3: Skip Navigation
Table of contents—clickable links to navigate within a webpage are typically placed at the top of a web page. That means those links are the first pieces of text to be read aloud to visually impaired people listening to your pages with screen reader software.
Consider providing a “skip navigation” link in the upper left-hand corner so listeners can skip to the main content of your web page. You can do this invisibly using the “hide” class between <span> tags. That way, the link will be heard by the person but not seen.
<span><a href=”#skip” title=”Skip Navigation”>Skip page navigation</a></span>
Step 4: Appropriate Use of Tables
When using tables on a website, make sure cells labeling data types are marked correctly with table header <th> tags. Occasionally tables are used as a means to control the layout of a webpage, rather than to display data. If that’s the 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.
Step 5: Transcripts and Captioning
Websites these days use lots of multimedia (audio and video content). For audio files, include transcripts for hearing-impaired people. For video files, include both live captioning and a text transcript.
Captioning tools are available to make the process easier. These days most video production software include captioning capabilities. To caption existing videos you may already have on websites (e.g., YouTube), use Overstream.net.
Step 6: Use an Accessibility Checker
Always make sure to run your websites through an accessibility checker. You enter a URL and receive a report offering areas needing changes or improvement. Here are three available accessibility checkers:
- WAVE: Web Accessibility Evaluation Tool from WebAIM. This tool provides an annotated version of your web page highlighting areas needing improvement. WAVE now provides a Firefox Toolbar and a DreamWeaver Extension.
- FAE: Functional Accessibility Evaluator generates a report with pass, warning, and fail indicators for various page elements.
- W3C Markup Validation Service: Checks the HTML, XHTML, CSS, etc. of your website and delivers a report of inconsistencies and accessibility problems.
Step 7: Including MS Office Files
If your website provides clickable links to MS Word, PowerPoint, or PDF files, you need to make sure these files are 508 compliant as well. WebAIM offers excellent instructions:
- PowerPoint: http://www.webaim.org/techniques/powerpoint/
- Adobe PDF: http://www.webaim.org/techniques/acrobat/
MAR and 508 Compliance
MAR is currently undergoing a large reworking of our own website to ensure we are 508 compliant. We hope to announce our new site by the end of January 2013. In the meantime, we will be providing additional helpful 508 information on our website. We will also be holding a Boost Box or Lunch with the RML session related to the topic. So stay tuned.
- WebAIM is a not-for-profit organization dedicated to improving web accessibility in government, non-profit, business, education, and health care sectors. They provide many excellent tutorials and references.
- WebAIM 508 Checklist
- NIH Senior Health shows great examples of accessibility in use on their website. Note the “skip nav” link, text size and color contrast controls, as well as optional audio.
- W3C Web Accessibility Initiative: The World Wide Web Consortium (W3C) is an international organization that develops Web standards.
- Myths and Facts about 508 from the U.S. Department of Health and Human Services (HHS).
- Creating an ADA-Compliant Website provides a good overview for web designers.
- The Beginners’ Guide to 508 Compliance, Or How to Make Your Website More Accessible to Everybody in Eight Easy Steps from NIH Catalyst.