5 Tips for Making a Website Accessible
The internet is one of life's greatest inventions — or at least it should be. Unfortunately, not all information on the world wide web can be accessed by everyone. Because not everyone can use the internet in the conventional way. This is why web accessibility is so important.
Web accessibility is, in simple terms, ensuring that your website and other digital content can be navigated, operated, interacted with, and consumed by users regardless of barriers. But sometimes web developers, online content creators, and designers forget to consider accessibility issues.
To help you ensure your website's accessibility, here are five things to focus on.
5 Things to Focus On for an Accessible Website
- Use clear language.
- Add captions to video and audio.
- Make your content easy to navigate.
- Include descriptive alternative text.
- Check (and fix) color contrast.
1. Use Clear Language
Using plain or simple language enables all users to be able to understand your content, including people with cognitive disabilities and low reading literacy.
Here are some tips:
- Put important details first.
- Use words that your readers are familiar with.
- Avoid using complex words and phrases.
- Always explain technical terms or, if possible, avoid using them altogether.
- Avoid using the passive voice. Use active voice instead — having a clear "actor" in your sentences, so that they're easier to understand.
Here's an example of a sentence with complex language: "Should you become involved in a vehicular collision, a representative assigned by the insurance company will endeavor to ascertain the degree and cause of the damages on the properties of all involved parties."
And here it is reworked to use simple language: "If you get into a car accident, our agent will investigate to find out the cause of the collision and how much damage there is."
2. Add Captions to Video and Audio
Not everyone processes information online in the conventional way. People with hearing impairments, for instance, won't be able to access information from videos and sound clips. Adding captions to video and audio will enable them to understand the information you're sharing on your website.
When doing so, keep these tips in mind:
- Subjects and phrases should be together in one caption.
- Clearly label speakers.
- The appearance of captions should coincide with the audio.
- Describe sounds that are audible but cannot be seen such as a knock, doorbell ringing, and gunfire.
3. Make Your Content Easy to Navigate
Web accessibility is not just in how you word your content and adding texts to videos and audio clips. It's also about how easy your content is to navigate.
- Break the text into sections. Too much content can be overwhelming for any reader. That doesn't mean that you need to limit the amount of information on your website. You only have to make it easy to skim blocks of text that users aren't interested in reading, allowing them to navigate directly to the section they want to read. Just make sure that you break down your content in a logical manner.
- Use various headings. Creating headings makes it easier for readers to understand how your text is structured. More importantly, it will make it easier for users using assistive technology such as a screen reader to jump between sections until they find what they're looking for.
- Remediate all documents. You need to make sure that all documents you have online are accessible. Remediation is the process of evaluating existing PDFs and other types of documents based on the standards of accessibility. This means that any PDFs and other documents you have can be read using assistive technologies as well as by those with cognitive disabilities. This process includes adding a table of content, headings, alternative text for images, and tags.
4. Include Descriptive Alternative Text
Not everyone can see images — that's where alternative (alt) text comes in. Alt text, also called alt attributes and alt descriptions, is a short written description of an image to provide visually impaired users with the information that is being displayed. It is also used in place of an image when it doesn't load.
Adding a short but descriptive alt text to each image on your website will enable users with screen readers to understand your content. Without alt text, some users will just skip these images or try to figure out your content based on the image's file name.
When it comes to adding alt text, make sure to:
- Place keywords in the alt text if possible. Alt text is not just good for accessibility. It can also help improve search engine optimization (SEO), particularly when it comes to Google images. Alt text can help you rank better in Google images, which can help you drive traffic to your website.
- Keep it short and specific. Long alt text can be annoying to read, especially for those using a screen reader. Short and concise is best. Your alt text should also be accurate. Don't stuff it with too many keywords or be redundant in your information.
For instance, if you had a picture of a stack of blueberry pancakes being sprinkled with powdered sugar:
- Bad alt text would be “breakfast food pancakes hotcakes recipe delicious.” You’ve put too many keywords in the alt text (keyword stuffing).
- Okay alt text would be “pancakes.” It’s short but not that specific.
- Better alt text would be “a stack of blueberry pancakes with a sprinkle of powdered sugar.” It’s short and specific but with the keyword included.
5. Check (and Fix) Color Contrast
Color contrast has a huge impact on the accessibility of your website. Color contrast affects how people perceive and interact with the information on your website.
When web developers and designers create a website, they often look at colors that have the most appeal or relevance to your brand. Colors used should provide enough contrast that a user is able to differentiate between the text and the background.
So, how do you check color contrast? First of all, this cannot be done by performing a visual check. Everyone perceives things with their eyes differently, including color. Even if you have good vision, your eyes can play tricks on you.
To do this properly, you'll need to use a color contrast checking tool like WebAIM's Contrast Checker. According to standards set by the Web Content Accessibility Guidelines (WCAG) 2.1, the contrast ratio of text and images of text should be at least 7:1, except for large-scale text and its images, which should have a contrast ratio of at least 4.5:1.
Enable More People to Enjoy Your Website
Web accessibility allows all users, regardless of their abilities, to be able to consume online content. It's important that web developers, designers, and content creators take time to learn what makes a website accessible to all.
It's even more important that they take time to learn how to fix any accessibility issues on their website, and if possible, to build accessibility right from the start.