The Art of the Possible: How to Create Disability-Friendly Websites
To date, 56 million people in the USA are living with a disability. Do you take this information into account when building or tweaking your website? You’d better do as 20% of your traffic could come from physically or mentally handicapped users.
People with auditory, cognitive and neurological, speech, visual, and other disabilities have certain problems when accessing a web page. Once you’ve got an accurate understanding of their discomfort, take these steps toward making your website free of web accessibility barriers.
Add alt tags
In web development, an alt tag — also known as an alt text, alt attribute, or alt description — is used to describe an image on a website. And by adding such tags to your HTML code, you help screen readers convey the meaning of an on-page picture to visually impaired visitors.
The more descriptive the alt text is, the better the user experience will be. Let’s have a look at different variants of alt tags for this image of Rafael Nadal.
Okay: <img src=”Nadal.png” alt=”Rafael Nadal”>
Better: <img src=”Nadal.png” alt=”Rafael Nadal hitting forehand on clay court”>
Not recommended: to leave the quotes empty (without any alt text):
<img src=”Nadal.png” alt=””>
Apart from assisting sight-impaired persons, alt tags are also useful when a browser is blocking images. Moreover, you can use alt attributes to strengthen the message toward search engine spiders and obtain SEO benefits. However, avoid keyword stuffing:
<img src=”Nadal.png” alt=”tennis Rafael Nadal tennis court clay tennis player forehand”>
To find out more about alt descriptions and other related information, read the image publishing guidelines by Google.
Use captions
If you own a video platform with live or video on demand content, pay particular attention to accommodating deaf and hard-of-hearing users. Equip the footage with captions even if your website has a couple of introduction, tutorial, or product description videos.
The hearing-impaired audience should be able to understand not only dialogues, but other important sounds, such as music, laughter, singing, barking, street noises, etc.
You may introduce either open or closed captions. The difference is that closed captions can be turned on and off when needed, giving users more control over the content they watch, whereas open captions are always in view.
Ready to get started? Here’s a comprehensive guide on creating transcripts and captions for your multimedia content.
Use color and contrast wisely
Color blindness affects roughly 1 in 12 men and 1 in 200 women in the world. For them, the web might be a cumbersome place to navigate. Their unease about not seeing color clearly, mixing colors up, or not differentiating certain colors may be also aggravated by low-quality monitors or tiny mobile screens. Here’s how you can help.
First and foremost, your website content should be readable. Make sure it passes these accessibility guidelines — based on the combination of text color, background color, and text size.
Besides, use labels for contact forms and other placeholders of your website.
And when denoting the required fields, do it with an asterisk, exclamation mark, or with the word “required.” If you use just color, some people won’t be able to see the difference.
Recommended
Not recommended
If you own an online store, pay heed to the way you display your products. Color-blind clients won’t be able to see the color palette, so provide a textual description instead.
Refine your links
Links are an indispensable part of the web, and you can hardly find a site without them. Here’s how to make your links understandable for users of all abilities.
Expand the width and/or height of the clickable area so that people with motor disabilities would feel comfortable when navigating the website. You can also add background color, but when assisting the motor-disabled, don’t let the needs of color blind people slip through the cracks.
Users with achromatopsia can’t see color at all, and it will be hard for them to distinguish hyperlinked words or phrases. Help them find the links by underlining the needed text — apart from using color.
Recommended
Not recommended
As a rule, screen readers tell users with poor vision when they face a link, so don’t include words like “link” or “links to” in your anchor text. In addition, avoid capitalizing text in links. First, such text is difficult to read for people with dyslexia. Second, screen readers may think it’s an abbreviation and pronounce it letter by letter.
If you want to avoid accessibility fiascos, don’t build links with anchors like “click here” or “find more”. According to Web Content Accessibility Guidelines (WCAG), “screen reader users often navigate websites going from link to link, using the tab key, so providing links that make sense is vitally important and necessary.” Be as descriptive as possible — underline the text that matters.
Recommended: Read our recent report on opioid abuse.
Not recommended: You can find our recent report on opioid abuse here./ Read our recent report on opioid abuse.
If you want to push the envelope, scrutinize the WCAG guidelines on descriptive links.
On a final note
In this article, we’ve given just a few recommendations on making your website safe for people of all abilities. Additional information can be found in WCAG Guidelines and BBC accessibility guides.
Moreover, when developing or tweaking your website, remember to comply with other official regulations and standards, including the Americans with Disabilities Act (ADA) and those established by the American Foundation for the Blind (AFB).
About the Author:
Yana Yelina is a Technology Writer. She is passionate about the untapped potential of technology and explores the benefits it can bring businesses of every stripe. You can reach Yana via LinkedIn or Twitter.
