The Basics of Accessibility on the Web

By Erin H. | May 2015

The W3C, which is the primary international standards organization for the World Wide Web, states that “[w]eb accessibility means that people with disabilities can use the Web.” But really, improving the accessibility of the web makes it easier for EVERYONE to use. An accessible site always has better usability -- and not just for people with disabilities.

Building a site from scratch that’s accessible takes no extra expense; correcting an already existing site can take a bit of effort and expense but in the long run produces a site that is easier and cheaper to maintain.

“For people without disabilities, technology makes things convenient. For people with disabilities, it makes things possible.”

Judith Heumann, former U.S. Department of Education’s Assistant Secretary of the Office of Special Education and Rehabilitative Services

It’s not necessary to duplicate content or add extra functionality to increase a site’s accessibility. The key is to take into account the requirements of users with different skills and those using assistive devices (link here) when designing your site. The W3C has compiled a prioritized list of recommendations for making sites accessible to everyone. You can check out the full checklist on the W3C’s site. 

web-accessibility

Quick Start Guide

Ready to begin? These five steps, courtesy of the American Foundation for the Blind are a good place to start:

1. Add Helpful Alt Text to Images

Alt text should describe the function of the image. For an image that acts as a link, “Search the Card Catalog” is a much more helpful description than “Photo of books and other reading materials”.

Try to keep it brief and prioritize the most essential information first.

Note: “Spacer images” don’t require alt text; just put a space between the quotes and leave it at that.

2.  Separate Content from Style

Don’t rely on visual cues for meaning. Visually impaired readers can’t see the fonts and colors that differentiate one section of text from another. Instead use headers and sub-headers to help guide site visitors, and never use text color to denote meaning.

3. Make your Links Accessible

Many visitors to your site will read only the links, skipping over explanatory text. Others will not be able to see the relationship between the explanation and the link—particularly if they are using a screen reader and tabbing from link to link. So make sure your links are descriptive and helpful. For example:

Bad: For the latest version of our software, <a href=”#”>click here.</a>

Good: <a href=”#”>For the latest version of our software, click here.</a>

4. Color & Contrast

For people with low or deteriorating vision, as well as people who are color blind, adequate contrast between text and background is essential.

Pages should have a minimum contrast ratio (between text and background) of at least 4.5 : 1 . Use the free color contrast checker provided by WebAIM to make sure your color choices are sound. http://webaim.org/resources/contrastchecker/

5. Works with Zoom

The ability to increase the font size of websites is important for many people. Users should be able to resize your site in their browser – increasing the size up to 200% -- without losing content or layout functionality; in other words, content should not "break" for site visitors if they resize it for better readability.

Other Helpful Resources

There are a ton of really helpful resources on implementing and maintaining accessible websites. Here are just a few: 

The Visually Impaired Web User’s Technology (American Foundation for the Blind) 

Stanford Online Accessibility Program: Tips & Tools

NVAccess: Home of the free NVDA screen reader

Topics: Design and Technology

New Call-to-action