Tips to Improve Your Website Accessibility

Website accessibility may not be the first thing that comes to mind when you’re developing your web presence. It can be a nebulous term because it’s often associated with people who have physical disabilities and the web is often seen as the great equalizer. The end result is that many people don’t put much thought into whether or not their website is accessible for everyone.

Website accessibility refers to the ability of all people, regardless of disability or severity of that disability, to freely access and use resources on the web. It can range from vision impairment, deafness, or a range of other things. The affliction is less important than you doing your part to ensure they have the best experience possible.

It takes deliberate effort to create a website that’s accessible to everyone. Many people will be unable to use your webpages as they’re intended because of inadvertently poor website accessibility choices you may have made. That will translate to lost revenue, engagement, and a reduction in other key metrics you track. In this guide, you’ll learn a few simple strategies to make your website more accessible while reaping the rewards.

Headings & page structure

The first step in creating an accessible website is to take care of the page structure. Many people will use screen readers to access pages and there are multiple elements the screen reader is designed to pick out.

Headings and titles

Every page on your website should have a clear and descriptive title. Not only is this good for marketing and SEO, but it also enables screen readers to quickly parse content for the user to understand. It’ll also give your website a clear structure.

Avoid using things like italics, bolding, underlines, etc. to create structure. Assistive technologies may not pick up on these subtle changes. Even a reader that’s moving quickly may miss then so try to use more obvious elements like H1, H2, H3, H3, etc. Even within this article, you can see the headings are broken down into sections using the different “H” formatting options.

Font choices

Some fonts are easier to read than others. For example, everyone may not be able to decipher a font that looks like cursive or certain types of imitation handwriting. Use a font that has a regular style and is relatively large. This helps with readability and can reduce your bounce rate.

Font spacing

This includes the space between individual letters, words, and lines. The space between words should be large enough so that it doesn’t appear to be an individual word. The space between lines should also be large enough so letters like the lowercase “g” don’t run into the lines below. A good rule of thumb is to set line-height at 1.5 times the font height.

Hyperlinking

Most hyperlinks have a slightly different color from the rest of the text on a webpage. This can even be changed in some website builders like Squarespace. In addition to these default measures, take the time to be explicit when linking to a resource. Instead of saying, “view what we do here,” phrase it so that people know what to expect. You can say, “visit our services page.”

Image alt tags

Imagery is a powerful way to create a website that stands out from the crowd. Website images can help you share your brand story, show who your products/services are for, and even help with complex topics. They can do a lot but not everyone can see or otherwise interact with them.

Wherever you use website images, be sure to add alt text. This stands for alternative text and is embedded in the HTML code of images. It’s picked up by screen readers or is displayed when the image fails to load. Take the time to create useful alt text for your images.

Instead of adding something like “image of field” you can be much more descriptive. It can be “field of low hills with green foliage and yellow flowers in full bloom.” At the same time, you don’t want to go over 125 characters because most braille displays don’t show many characters at any given moment. It’s a balancing act that may take some time to get used to.

Keep in mind that you don’t need to express that it’s an image in alt text because screen readers are able to identify it using the HTML tags around the image. Most website builders such as SITE123 make it easy to add alt text to every image on your page so there’s no reason skip this step. If you’re having trouble coming up with what to write, think about why the image is on the page in the first place.

Handling videos and audio

Even with a screen reader, it’s not possible for some people to extract information from your website. This can happen when you have audio or video elements on a page. In such a situation, you can improve your website accessibility by adding transcripts below the media so the screen reader can pick it up.

If you’re unable to add complete transcripts then consider creating a summary of what’s being explained. That way, your visitors can get the key points of what you’re sharing. A fringe benefit of using transcripts or summarizing content in different formats is the ability to achieve better rankings in search engines.

Color choices

Another important step to improve website accessibility is by using the right colors in the right way. You have a brand that likely uses specific colors to let people know they’re in the right place and stand out from the competition.

If you’re unable to change your website color palette, you can still work within the framework of your brand guidelines to make color choices that create an accessible website. For example, most brands have multiple colors and gradients. When creating pages on your website, consider how the colors you’re using can be made to contrast with each other. If you’re making a chart, can you use contrasting colors for the different bars or lines? If you’re adding a call to action button, can you make it contrast deeply with the background?

In addition to using contrasting colors, think about how you can label things to make them more descriptive and aid accessibility. For example, if you’re unable to use contrasting colors in a chart, would you be able to label each piece of data for viewers? This is also a viable alternative to improve website accessibility.

Actively avoid grouping colors that have low contrast and may be difficult for color blind people to differentiate. Purple and blue, yellow and orange, certain shades of green and brown, etc. all have low contrast when paired.

Conclusion

Website accessibility may seem like something that will only affect a small portion of your potential market. In reality, tens of millions of people are living with different types of disabilities. The way they’ll be impacted varies but it’s up to you to do your part to turn the web into a place that’s accessible to everyone.

This guide has outlined a few things you can do immediately to make that a reality such as clear headlines, choosing legible fonts, being deliberate with your hyperlinking, adding image alt tags, and more. It's important to use website builders that allow you to do this without any added effort – otherwise, it may not get done. If you don’t know which tool to choose then browse our helpful reviews to narrow your choices.