Back
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
- Add ‘alt-text’ to graphics for screen readers
- Describe the function of the image. Especially if the image is a link, “Search the Card Catalog” is much more useful than “Photo of a collection of books and other reading materials scattered on a library table.”
- Brief is better. Remember, syllables are time.
- Put the most essential information first. If it is necessary to use a number of words, use “Acme Logo: Sun rising over white sand dunes” rather than “Sun rising over white sand dunes: Acme Logo”
2. Use Meaningful Title Attributes
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.
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.
Use Distinct and Meaningful Page Titles
Screen readers first read the text inside the page <title> tags. This creates problems such as:
- Users cannot determine what page they are on.
- If a user arrived on a page via link, and the title is the same or non-existent on both pages, it’s difficult to determine if the link worked without scanning the contents of the page.
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.
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.
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.”
Site Testing Tools
Here are some useful tools for testing your website’s accessibility.