8 Ways to Make Your Website Accessible

The main goal of every website is to attract as many visitors as possible. However, one critical factor in ensuring that everyone can access your website is often forgotten: web accessibility.

If your website lacks accessibility, you are missing out on 2.2 billion people who have blindness and visual impairment and 466 million people with deafness and hearing loss. 

In other words, making your website accessible can increase your visitors. Furthermore, with the number of ADA lawsuits  rising rapidly, you want to be on the right side of the law. 

Fortunately, web accessibility isn’t as difficult to account for as people perceive it to be. Here are a few tips that will help you make your website accessible:

1. Use Keyboard-Friendly Navigation 

For users with blindness, navigating a website with a mouse is impossible. Instead, they use "tab" and "arrow" keys or keyboard shortcuts, making it necessary to have a keyboard-friendly website. 

Make sure the tab or arrow key navigation order follows the visual content structure. You should also add "Skip to main content" tabs at the top of each page, allowing disabled users to skip to the important stuff. 

2. Add Correct Alt Text

Screen readers can only read text. As a result, they can't distinguish between an image with a stop sign and that of a sunset. That's where alt text comes in. It can help screen readers to convey the message in the images to the blind and vision-impaired readers. 

However, you should describe the image in concise and crisp words. Make sure to include the text in the image in your alt tag as well. You can leave the alt tag blank if the image is used purely for aesthetics and has nothing to do with the main content. It will help disabled users to skip to the main content without getting distracted.

Additionally, if your site has CTAs or menus with animated hover states, ensure you use alt text that identifies the element as a link or describes what’s written so screen readers can read them.

3. Use The Right Color and Contrast

Color blindness is one of the most common vision impairments. Colorblind users are unable to see some, or all, colors properly. As a result, they may struggle to interpret text or images with low contrast. 

So, make sure to use the correct text size, text color and background color. For example, black text on a white background and yellow text on a black background are excellent color-contrast combinations. 

If you have product imagery on your site, you might not be able to change what your products look like. However, you can describe the color palette in the product details to help users understand how the product looks.

4. Make the Content Readable

Randomly placed and unorganized content is hard to read for anyone, not just blind and vision-impaired users. To make it easier for screen readers to interpret your content, make sure to structure your copy and keep the organizational pattern consistent on related pages such as product pages.

Use heading tags to identify your text hierarchy. The H1 tag should be used for the main title and nothing else. Then H2s, H3s and so on can be used for sections and subsections. Also, don't skip headings. For example, don't go from H2 to H4 directly. 

Finally, use short and precise sentences throughout the content. Avoid adding lengthy paragraphs. If the content is lengthy, add the Skip tab at appropriate intervals, allowing visitors using keyboard navigation to skip to the next section. 

5. Add Accessibility-Friendly Forms

Most websites use online forms for communication, registration, login and ordering. To save on-page real-estate, they also use placeholder text. However, placeholder text has low contrast, making it difficult to see. It also disappears as soon as you start typing and cannot be read by screen readers. 

For better web accessibility, you should use labels for contact forms and the login page on your website. Always use an asterisk and exclamation mark along with the word "required" to indicate the required fields in your forms. Using only colors or pop-ups isn’t helpful for all users.

6. Say No to Automatic Navigation and Media

You can use captions, video transcripts and audio descriptions to make your multimedia accessible to blind and vision-impaired users. However, that alone isn't enough. 

Most media players start playing videos automatically by default, which can be distracting for blind and vision-impaired users. Make sure the videos do not auto-play, and the video player is keyboard-friendly. 

The same goes for slideshows. Use alt text to explain each slide in detail and ensure your slides can be progressed through using keyboard commands. 

7. Optimize Your Links

Just like the text, you also need to optimize the URLs on your website. Use a description that provides the right context for all users. The URL name should be unique, not too long and tell the user what to expect on the page the link leads to. 

You should also avoid using text like "Click Here" or "Read More," as it is not descriptive. If you are pointing users to a page describing your XYZ product, instead of using just "Read More," you should say "Read more about our product XYZ here."

8. Minimize Use of Tables

Although most screen readers are reasonably good at their jobs, reading content in a table is a challenge, especially if the table is complicated with multiple rows and columns. Tables add more verbosity to visitors using screen readers, and screen readers may also fail to read the content in its visual order, creating confusion. 

If you do include tables on your site, use descriptive headers for rows and columns. The headers should explain the relationship between different cells to the screen reader users. You can use the "scope" (HTML) attribute and table captions in (HTML5) to make your tabular data more digestible for screen reader users.

The Takeaway

Creating an accessible, user-friendly website can help you earn a positive brand reputation and increase the audience that your marketing can reach. If you are designing a new website, start thinking from the accessibility point of view from the beginning. If you already have a website, it is never too late to make it accessible. Hopefully, with these eight easy-to-implement tips, you can start making your website accessible today.