The Internet isn’t always “one size fits all.” Every day, inaccessible web design prevents billions of people in the disabled community from an easy online experience.
For those with visual impairments, learning difficulties, hearing loss and more, there are dozens of unique challenges waiting behind every URL. But building a disability-friendly site is a lot simpler than you might think.
“This sounds pretty obvious, but understanding the problems people with disabilities face on the web is the key to building an accessible product,” he says in an email interview with Mashable.
Knowing is half the battle, but implementing the necessary changes for a more inclusive web experience can seem daunting. However, you’re hurting yourself if your website isn’t accessible to those with disabilities.
“If you just want to look at it from a strictly commercial perspective, if sites don’t consider disabled users, they’re missing out on a huge chunk of the market,” says Sandi Wassmer, a technologist and design expert who registered blind in 2008.
Approximately one billion people in the world live with disabilities, according to the UN. That’s a sizable chunk indeed.
In addition to those born with disabilities, Wassmer points out another user group to be aware of — the aging population.
“Some of the natural signs of aging, such as loss of sensory acuity, ability to process cognitive load and fine motor skills, all impact how older people interact with technology,” she says.
With that in mind, there are plenty of ways to make sure you’re doing your best to create an accessible site. Here are a few simple, practical tips to implement when creating a disability-friendly site.
1. Use alt tags.
When you hover your mouse over an image on a website, the little words that pop up are called alt tags. For someone who has a visual impairment and uses a screen reader (a software program that reads text on a website out loud), the alt tags are read aloud, and are the only way a user knows what the image is.
Take alt tags seriously and use them as an opportunity to describe the image accurately and succinctly. If it’s a picture of a person, write out the person’s name. If it’s an object, use a couple of words to describe it (for example, if it’s a photo of pile of bricks, use the alt text “pile of bricks”).
2. Create subtitles and transcripts.
If your web content regularly includes videos, try to provide subtitles — especially if you’re producing the bulk of your own video content. Popular video hosting sites such as YouTube have tools that allow users to add subtitles to their clips.
Making a transcription of the video available online is also an incredibly helpful resource for users.
3. Put periods in abbreviations.
If you’re abbreviating something in HTML, put periods in between each letter. For example, if you’re referencing the Central Intelligence Agency, write it out as C.I.A., rather than CIA. A screen reader won’t recognize the abbreviation without periods, and will instead read it out phonetically as a word (C-I-A will be read as “cia”).
4. Describe your links.
When embedding a link in a post, it’s more useful to describe the link, rather than just telling the reader to “click here.” For example, it’s better to write out, “To learn more about technology, check out Mashable’s tech channel” instead of “To learn more about technology, click here.”
Whenever possible, underline your links or make sure that there is a color contrast between hyperlinked text and regular text. That way, colorblind users will able to find a link immediately without having to hover over it with their cursors.
5. Utilize color control.
Practicing smart color choices is useful for a website with any kind of audience. Avoid pairing garish colors, and be wary of using yellow, blue and green close to one another (this is especially difficult for colorblind users). Black text on a white background is the best general practice, because it’s readable for most audiences.
6. Get clickable.
For users with mobility problems, it can be difficult to click on small items within a tiny clickable range. It’s like trying to nail a bullseye every single time you play a game of darts. Give the clickable item a wider range so the user can click on it within the item’s general area.
There are plenty of available guides for how to create this in code, like this how-to from Webcredible.
7. Keep your copy simple.
This tip is helpful for any audience, but is imperative for elderly audiences or those with learning disabilities. If you’re putting a lot of text onto your website, break it into smaller paragraphs. Use simple, straightforward language in the active voice.
Naturally, this might not work for all sites, depending on the content, but you can apply it to various pages (such as an “About” or “History” section).
8. Include an accessibility guide.
If you’ve done your best to make your site disability-friendly, include a section that lays out all of the ways your site is accessible. Alternatively, you can post a guide on tips and tricks users can implement on their own computers. A great example of this comes from the BBC, which has an entire section devoted to accessibility.
“Rather than providing various tools for accessibility, they provide information on how to make the most of the settings and features on their computer or in their browser,” Berry says. As far as accessible mainstream sites go, Berry says he’s “impressed” by how user-friendly the BBC is.
Broken down into multiple sections, the BBC offers support based on the user’s disability, with selections such as “I can’t see very well,” “I am blind” and “I find words difficult.” Wassmer also cited the BBC as an exemplary site of disability friendliness.
Even if you don’t have the same resource level as the BBC to create such an exhaustive guide, you should still round up your accessibility selling points. It can be of powerful use for your site’s visitors.
9. Know your audience.
“It’s difficult, if not impossible, to design generically for all disabilities,” Wasserman says. “Within the main categories of disability — sensory, physical and cognitive — there is such wide variation, so it’s important to understand your users first.”
If you’re passionate about making the most accessible site possible, try to get a physical read on how someone with disabilities actually goes online.
“Watch how people interact with the web, through assistive technologies like screen readers, or how they customize their browser,” Berry says.
You can also use yourself as an example. Download a screen reader, like Google’s free ChromeVox, and learn firsthand how assistive technology works. The experience will inform you on your journey to designing a more disability-friendly website.
