Section 508 of the Rehabilitation Act requires federal agencies to make their electronic and information technologies accessible to people with disabilities. Here’s a primer on website compliance with 508 guidelines.

First off, remember that Section 508 isn’t just about making websites more accessible for blind people. The guidelines make websites more accessible to people with disabilities ranging from colorblindness to paralysis, epilepsy, hearing impairment, and even a slow dial-up Internet connection. The goal is to make all the information on your website available in the simplest format, so that interaction with your site can be as flexible as possible.

That said, one of the most important considerations to make in adapting your website is how it will interact with a screen reader.  A screen reader is an assistive technology that translates information on a website into speech, Braille, or another format in an orderly fashion to help people with visual impairment or learning disabilities. One of your main tasks in reaching 508 compliance is cooperating with the screen reader to make your website as understandable as possible.

 

Step 1: Get friendly with the alt tag

Researcher, this is an alt tag. Alt tag, this is a well-informed researcher. When you’re putting an image in a website, you should always use the alt tag to include a detailed caption for the image so that a screen reader can describe it to users with visual impairment.

You should also make sure to include a “null” alt tag in images that are part of your site’s layout but don’t carry important information.  In html, you can do this by including the phrase alt=“”  in your img tag. Including a null alt text in these images allows a screen reader to skip over them without adding confusing narration.

Step 2: Make yourself colorblind

While there’s nothing wrong with adding color to your website to give it a little bit of pizzazz, be conscious of the fact that not everybody sees color the same way.  For people with colorblindness, colored text might fade into a colored background.  The best way to avoid this type of problem is to keep your contrast high.

And try to avoid using color to designate a section heading.  Screen readers break up web pages by using a different voice for headings, but only identify larger font sizes or formatting changes like bold or underline as designators.  You can use color in a section heading, but be sure to also designate the heading in some other way, too.

Step 3: Video killed the radiologist

 

Videos are one of the trickier subjects in accessibility.  In some cases, it’s easiest to just provide a text-only version of the content. Short of that, though, you can make videos accessible by providing captioning for both actions and dialogue.  And remember that audio files always need to be accompanied by a transcript.

Step 6: Adobe Acrobat isn’t always right

You’ve run the accessibility check on your PDF documents, and they come out clear, but that’s not always enough! 

There’s a simple check-list on the HHS website that you should run through before posting your PDF documents.

Step 4: The subtle difference between a table and a pile

When someone uses a reader to access a data table, they depend on the row headers and column headers of the table to make sense of its content.  In html you can add headers using the <th> tag at the beginning of each row and column.  Without row and column headers, the table becomes a jumble of data that’s nearly indecipherable for people with visual impairment.

Step 5: Save the strobe lights for Studio 54

Do you remember that controversy around a Pokémon episode that was banned in the USA because the flashing lights were dangerous to kids with epilepsy? Flickering animations are still dangerous on the Inter-net, so avoid strobing and flashing in your website.  Plus, nobody really needs to see that video of the mitosis break-dance anyway.

 

Step 7: Life without style sheets

While a style sheet is useful for making your website look nice, make sure that your website doesn’t rely too heavily on it.  Take a look at your website without the style sheet.  Does it still make sense?  Try to make sure that the page is organized logically so that it doesn’t need the style sheet to put elements in the right order.

Step 8: If all else fails…

Provide a text-only version of your website.  This is by far the best way to make your site accessible to people using a screen reader.  The best way to include the text-only option is to make a link that says “text only” at the top of a page in the same color as the website’s background, so that anybody who isn’t using a reader can’t see it.