Tessa Flores — November 23, 2019 When optimizing your website design, there’s one very important market you’ll want to consider when you’re thinking about access and usability: Worldwide, there are more than one billion people with disabilities that range from visual impairments to learning difficulties to hearing loss — and more.
Because the internet isn’t a one-size-fits-all platform, inaccessible website design inadvertently prevents people in the disabled community from having a smooth and cohesive online experience. (It’s also possible to face serious legal penalties by not adhering to the Americans with Disabilities Act and failing to develop a website that is accessible to all — so talk to your legal team!)
Creating an accessible website will immediately expand your potential audience, improve your website from an overall design and usability perspective, and improve your SEO (more on that later). Besides, creating accessibility and usability is a lot easier than you might think.
Below, we outline the key obstacles users with disabilities face and the changes you can make to improve your website accessibility. You’ll learn to build a website for people who have disabilities and for the various types of hardware and software they use to access websites.
Key Obstacles to Accessibility for People with Disabilities
Although there are many disabilities and conditions that can affect the way people browse the internet, we’d like to highlight some of the most common:
- Visual Impairment: This can range from partial to total blindness and includes difficulty seeing color contrasts.
- Hearing Impairment: This can range from partial to total hearing loss.
- Motor Skills/Physical Disabilities: This includes difficulty in moving certain parts of the body or being able to effectively make precise movements (e.g., the ability to use a computer mouse).
- Photosensitive Seizures: This includes conditions, such as epilepsy, that can cause seizures triggered by flashing lights.
- Cognitive Disabilities: This includes conditions that affect cognitive function, such as dementia and dyslexia.
Tools People with Disabilities Use to Access the Internet
With advances in assistive technology, people are able to utilize screen readers (which read the text on each page out loud), speech recognition software (which converts spoken word to text), Braille terminals, and alternative keyboards to accommodate special needs.
By designing (or redesigning) your website with these tools in mind, you’ll be a step ahead of more than 90 percent of websites that are not accessible to those with disabilities.
Understand Your Audience
Although it can be difficult to comprehend what it’s like to view your website as a user with a disability, there are tools you can use to gain a better understanding.
You can watch how people interact with your website using assistive technologies like screen readers (Google offers a free download called ChromeVox) or do a little reading up on how folks with disabilities customize their browsers. These two efforts will help you better understand how to develop a more accessible website.
12 Ways to Make Your Website Accessible
1. Use Alt Tags
Alt tags are those little words that pop up when you hover over an image on a website. Where do they come from? Usually, it’s the file name you used to save that image, but if you’re SEO-conscious (as you should be!), you’ve changed the words of that alt tag to be something relevant to your website and the image itself.
For example: If you have an infographic, you may have saved it as “small_business_growth_infographic_2019”, but when placing that infographic on your website, the SEO-conscious web designer would have changed that alt tag to something along the lines of “Small business growth hits 1.5 trillion dollars in 2019.”
How is this important to folks with disabilities? For folks with visual impairments that use screen readers, the alt tags are read out loud so the user knows what the image is. Improved alt tags increase accessibility, while also giving search engines more information to crawl, so take the time to create accurate and succinct alt tags.
It’s also important to keep in mind how these screen readers read information. When you use abbreviations like FBI, instead of the Federal Bureau of Investigations, make sure to put periods in between each letter (F.B.I.). Without the periods, the screen reader will read the word phonetically, causing a bunch of confusion. (This is true for all content, but it’s important to mention here, as imagery plays a key role in marketing campaigns.)
2. Create Subtitles and Transcripts
Does your website have a lot of videos? In order to make these videos accessible to folks with disabilities, you’ll want to provide subtitles and/or a transcription of the audio.
Many video-hosting sites, such as YouTube, provide free tools for users to add their own subtitles, and there are also free video transcription services available, such as oTranscribe, Express Scribe, and The FTW Transcriber.
3. Take Care of Your Links
When you embed a link into a post, describe it if possible. Instead of “Click here for more information,” try “To learn more about how to make your website accessible, click here.”
Also increase ease of use for your color-blind or color-challenged users by underlining your links and making sure there is a color contrast between hyperlinked text and regular text.
4. Take Care of Your Colors
Practice smart color choices throughout your website to enable color-blind and color-challenged users to better navigate your site. Some general rules to abide by include:
- Avoid pairing garish colors together (such as yellow, blue, and green) that could cause eye strain. Not sure what we mean? Check out these examples of bad color choices.
- Make sure you have a good contrast of colors on your site so that elements are distinguishable.
- Utilize dark text against a light background (such as black text on a white background) so that colors don’t bleed into one another and make it difficult to read.
A little lost in the color department yourself? WebAIM has a great (and free) tool you can utilize to grade the contrast of your color choices.
5. Get Clickable
For users with mobility challenges who have a hard time clicking on small items, make clickable items larger with a wider click range, so that as long as they click in the general vicinity of your clickable item, they’re good to go.
We know what you’re thinking: I have no idea how to do that. Fear not. It’s not as difficult as you might think. Check out this how-to guide from Webcredible, which shows (in a few easy steps) how you can manipulate your code to “get clickable.”
6. Keep It Simple
Break up your copy into smaller paragraphs, be specific with a conversational tone, utilize bullet points, create clear headers along with interactive media whenever possible, and always have super clear calls to action. All of these things will make it much easier for those who are utilizing screen readers to better understand the content you’re delivering.
Not only is this helpful for basically everyone, but it’s absolutely imperative for your elderly users and those with learning disabilities.
7. Make Sure Your Site Is Keyboard-Friendly
Because many assistive technologies rely on keyboard-only navigation, you’ll want to make sure your website can function without the use of a mouse and operates smoothly using only keyboard functionality.
This includes utilizing the tab key to jump between different areas of a page, such as links, buttons, and forms. To see if your website is already configured to operate with only a keyboard, try browsing it without using a mouse and only utilizing the Tab key.
Are you able to easily jump around between different elements, or is it difficult? If it’s difficult, check out WebAIM’s guide for keyboard accessibility design.
8. Make Sure All Content Is Easily Accessible
Do you have dynamic content on your page that changes without the page reloading (e.g., a rotating banner)? If so, make sure you utilize ARIA landmarks to inform assistive tools of the change in content. ARIA landmarks are tags that are added to your content to inform assistive tools of the additional content.
For more information on ARIA landmarks and how to use them, click here.
9. Design Your Forms for Accessibility
Just like we said about content and design, the idea is to keep things simple and clear in order to increase accessibility. This applies to your online forms. You’ll want to make sure each field is clearly labeled so the form is easily read by screen readers.
It’s also helpful to include clear instructions and information on the form, explaining how to properly fill it out.
10. Enable Resizable Text That Doesn’t Break Your Site
Every device from your tablet to your smartphone to your desktop allows users to resize text, an especially helpful feature for those that are visually impaired. When building (or rebuilding) your website, you’ll want to make sure your design supports this feature. You’ll want to:
- Avoid absolute units (such as utilizing pixels to specify text size).
- Use relative sizes (which allow text to be resized depending on content and screen size).
- Always make sure you keep “user scalability” turned on so users have the option to resize their text.
If you’re unsure whether or not your website is already configured to meet these criteria, you can utilize the WebAIM guide on font sizes.
11. Avoid Automatic Media
Have you ever had a bunch of internet browser tabs open and, all of a sudden, one of them started automatically playing a video and you couldn’t figure out which tab the video was on?
As annoying as automatically-playing media files can be, they’re an even bigger issue for accessibility. Can you imagine how much harder it would have been to turn off that video using a screen reader?
In general, it’s best to only include media on your webpage that starts after a user has prompted it.
12. Toot Your Own Horn
You’ve done all the work to reach this billion-person market and now your website is accessible. Why not tell the world about it with your own accessibility guide? Lay out all the ways your revamped (or brand new) website is disability friendly.
Check out the BBC’s own accessibility guide here. You don’t have to be as exhaustive as the BBC was, but it’s an excellent example and could give you some great ideas on how to get started.
Digital & Social Articles on Business 2 Community
(46)
