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.
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:
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.
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.
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.)
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.
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.
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:
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.
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.”
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.
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.
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.
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.
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:
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.
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.
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.