Tips for Creating a 508 Compliant Website

In my first post around website accessibility I covered some of the history and issues around creating a 508 compliant website. Below are some tips to truly make your website accessible to web users with any neurological, physical or visual disabilities.

Use Alternative Text for Non-Text Content

1. Label Graphics and Images

Image with alt-text
An example of an image with the ‘alt-text’ field properly used for the benefit of the visually impaired.

2. Use Meaningful Title Attributes

A meaningful title attribute
A meaningful title attribute, seen when the mouse is placed over the link and read by screen-readers.

Title attributes as short summaries that describe where a hyperlink will take the user who clicks on it. It doesn’t help if the title attribute is the same as the link text.

3. Name Links Carefully

Users using screen-readers often move through a page by tabbing from link to link. “Click here” does not stand alone well, but “Find a Store” is self-explanatory.

Click here example
Using “click here” for your hyperlink text is a bad practice. If a screen-reader listed all the links on a page, those words would have no context or meaning.

Use Skip Navigation

Screen-reader users have to read HTML documents from top to bottom, without the ability to scan the web page for the information they’re interested in. Skip navigation allows screen reader users and people who can’t use a mouse to skip long lists of links, such as the primary navigation on a website.

Skip navigation example
An example of skip navigation on the new Target website.

Use Distinct and Meaningful Page Titles

Screen readers first read the text inside the page <title> tags. This creates problems such as:

A Good Title Tag
Here is a well written <title> tag. Notice the most important information is at the beginning.

Use Headings Correctly

Heading tags allow screen reader users to jump to the sections they’re interested in by semantically creating an outline of the web page.

Breaking up a long web page into logical subsections with headings makes it easier to get to your location of interest.

Window-Eyes Headling List
Here’s what a screen-reader sees when all the “headings” on the page are listed.

Make Forms Accessible

1. Label Your Form Elements

Labeling your input elements with meaningful and descriptive text makes it clear to the user what information they should be providing. This helps screen reader users know what data is expected for the inputs in your form. Using a label also expands the clickable area of an input making it easier for keyboard users with limited mobility.

A properly labeled form
A properly labeled form

2. Explicitly State Information

Indicating required fields in a form by making them bold is bad. Indicating required fields by using a phrase such as “required” is good.

3. Explain Select Menus (Pulldown Menus)

The default item in the select menu should clearly define the purpose of the box. For example, “Select Age Range” is preferable to “18-25.”

A pull-down menu
The default option in the menu describes it’s contents.

Site Testing Tools

Here are some useful tools for testing your website’s accessibility.

Related Posts: Getting Started With Website Accessibility When You Hear “DE+I,” What Do You Think Of? 3 Tips for Turning Complex Content Into Easy Reading May Means Hope for Stroke Survivors COVID-19: Implications to the Food Supply and Food Security in the U.S. Bye-bye brand police: Governing brand in a decentralized workforce