You work hard to make your website useful. Don’t undercut your efforts by failing to make it accessible to all kinds of users.
If you’ve never thought much about who can and can’t use your site, the World Wide Web Consortium’s (W3C) Web Content Accessibility Guidelines (WCAG) can be a bit overwhelming.
Not to fear. A few little changes can make a big difference in your site’s accessibility. The four practices below cover some of the most common accessibility problems on the web. Even better, they require no special skills and very little time to fix, especially if you build with accessibility in mind from the start.
Include meaningful alternative (alt) text.
Apps like VoiceOver (Mac) and NVDA (Windows) speak the contents of web pages to people who are visually impaired by reading aloud from the underlying code. In order to tell the user what’s in a picture, the screen reader has to have something to read. That’s where you come in.
When you upload an image to your site, chances are the interface has a field for alternative text. Take a moment to include a few words of descriptive alt text that describe what’s in the picture (i.e. “spotted dog chasing a toy”) If your content management system doesn’t offer a field for alt text (some don’t) politely contact customer service and ask how you should make your pictures accessible to screen reader users.
Bonus: Search engines index that same code, and your alt text can provide keywords that help your site show up in searches. (Don’t take that as license to stuff your alt text with barely relevant keywords. That only angers the search gods.)
Use headings and subheadings.
Just as the sidewalk curb cuts make street crossing better for everyone, headings and subheadings are the tide that lifts all ships when it comes to web content.
DO: Use that dropdown list in your text editor - the one with options like Heading1, Heading2, Heading3 and paragraph.
DON’T: Bold the text and tweak the font size to make some lines bigger and bolder. That’s cheating.
Make the tile of the page a Heading1 and the first subheading a Heading2, then try to structure your page as a loose outline.
Sighted visitors will thank you because this organization helps them quickly scan the page and understand what it’s about. Users with cognitive disabilities will appreciate that, too. And screen reader users can jump from heading to heading, effectively “scanning” the page with their ears.
Bonus: This also helps keep your site looking clean and consistent, makes it easier to maintain.
Write link text that tells the user where they’re going
Next time you’re tempted to link the words “click here” just don’t. Just as screen readers can announce all the headings on a page, they can read out a list of link text to give the user an idea what this page connects to.
DO: See University of Michigan police department for details.
DON’T: For details on the University of Michigan police department site, click here.
Imagine that your page full of important links uses “Click here” for every link. A screen reader user would have to follow each link to a new page and figure out where they’ve landed. Or they may just skip the links and miss important information.
Mind your color contrast.
Designers love the clean, understated look of grey-on-white design, but too much of a good thing makes your site a misery for people with low vision. Try the NoCoffee Chrome plugin to experience it yourself. WCAG 2.0AA guidelines require a background to foreground color contrast ratio of at least 4.5:1. Fortunately there are some good online tools that can tell you where your site stands.
WAVE Accessibility Tool (website, also available as a Chrome and Firefox browser extension)
Better yet, design with good contrast from the start. ColorSafe asks you for a background color, font family and text size, then generates color palette options that meet WCAG 2.0 AA standards.
Amy E. Whitesall oversees web content and usability for the University of Michigan College of Engineering