How to make your website accessible (and why it’s important)

Accessibility is an essential aspect of website design that ensures that everyone, including individuals with disabilities, can access and use your website. Yet despite its importance, website accessibility is still often overlooked by designers and DIY website creators alike. In 2023, there’s no reason not to consider accessibility when creating a website; it’s fairly easy to do and has many benefits, which we’ll dive into in this post.

Why is website accessibility important?

Website accessibility has benefits for users and website owners alike. Here are three primary reasons why it’s so important.

Inclusivity

Websites that are accessible to all users demonstrate a commitment to inclusivity and provide an inclusive user experience for all. This can help to foster a sense of community and belonging among users.

Legal compliance

In many countries, there are laws that require websites to be accessible to individuals with disabilities. For example, in the United States, Title III of the Americans with Disabilities Act (ADA) requires that all places of public accommodation, including websites, be accessible to individuals with disabilities.

Improved user experience

Accessible websites are easier to navigate and use for all users, not just those with disabilities. This can lead to a better user experience all around, resulting in increased satisfaction and engagement.

6 ways to make your website accessible

Now that we’ve discussed why website accessibility is important, let’s switch gears and look at the how. It may seem like a daunting task to make your website accessible if the concept is new to you, but as you’ll see, many of these steps are simple and straightforward. In fact, there’s quite a bit of overlap between web design best practices and accessibility, and for a clear reason: good design is inherently intuitive and accessible. But there are a few aspects to consider apart from design.

1. Use clear and simple language

Make sure that the content on your website is written in plain language. Avoid using jargon or complex language that may be difficult for some users to understand. If writing isn’t your strong suit and you can’t afford to outsource all the written content on your site, I recommend signing up for Grammarly. This free, handy extension analyzes all your content as you’re writing and offers suggestions for improving grammar and readability. I’m using it right now as I type out this blog post!

2. Provide alternative text for images

Alternative text (alt text) is a short description of an image that is displayed when the image cannot be seen. Alt text is important for visually impaired users who use screen readers to navigate websites. Every time you upload an image to your site, you have the option to add alt text to it. Although many people use this space to stuff keywords for SEO, you should really only include a keyword if it’s relevant to the contents of the image. Otherwise, it defeats the purpose of alt text, which is first and foremost, accessibility.

3. Make sure your site is keyboard-friendly

Many users with disabilities navigate websites using only a keyboard. Make sure that all functionality on your website can be accessed using only a keyboard, and that there are clear visual indicators of which elements have keyboard focus. Keyboard navigation involves the following keys:

• TAB key to navigate forward on a page
• SHIFT + TAB to navigate backward
• ENTER to click a link or button
• SPACE to jump down the page
• Arrow keys to navigate around a page

To get a better understanding of how this works, open any website and test it out. Are you able to easily navigate the site using the keyboard only? What about on your own website?

4. Use headings and labels correctly

Headings and labels help users understand the structure and organization of a webpage. Use headings and labels correctly, and make sure that they are meaningful and describe the content of the section they are associated with. Headings rank from h1 to h6 and are used to create a clear content hierarchy. For instance, each page should have just one h1 heading, which is the title of the page. All secondary subheadings are h2 headings, and any subheadings nested within an h2 heading are h3 headings. And so on.

Two common mistakes I see on websites are:

1. Using multiple h1 headings on a single page; and
2. Not using heading labels at all and instead differentiating headings visually (i.e. making the text larger or bolder).

Both of these mistakes are detrimental to a website’s accessibility and SEO. Fortunately, they’re easy mistakes to fix.

5. Provide captions and transcripts for video and audio content

Captions and transcripts provide a written representation of spoken and audio content, which is important for users who are deaf or hard of hearing. It’s also beneficial for users who simply don’t have time to watch a video or listen to an interview and would prefer to just skim through the content. Creating captions and transcripts is easy and affordable these days thanks to AI tools like Rev. However, if you use AI, be sure to proofread the results because they can be error-prone. Another option is to hire a VA (virtual assistant), especially if you’re pushing out video or audio content regularly.

6. Use contrasting colors

Our final website accessibility tip is a fundamental web design best practice: contrast. In a nutshell, contrast helps ensure that the content on a page is legible. For instance, light text on a dark background or vice versa. Color contrast is especially important for visually impaired and colorblind folks, who are likely to have a harder time distinguishing between colors than the average person.

A simple way to test if your colors contrast enough is to take a screenshot of your website and convert it to grayscale. Is all the text still legible when the colors are erased from the design? If not, you’ll know which elements to darken or lighten to create more contrast.

How to test your website for accessibility

In this post, we covered why accessibility is important and discussed 6 fundamental steps you can take to make your website accessible. Now, it’s time to put your website to the test. There are many different tools and checklists available to make this process easier and more accurate. One free tool to start with is called WAVE. Simply enter your site URL and see what comes up. Using this tool, I discovered a few elements on my own site that could use some improvement for accessibility.

For more tools and in-depth information on website accessibility, check out W3.org’s comprehensive guide.