How to make a website accessible

Website builder on Mac desktop with screen which says DO MORE
(Image credit: Photo by Carl Heyerdahl on Unsplash)

When designing or building an online presence for your business, it's important to know how to make a website accessible. Many of the best website builders simplify the process, and even the best web hosting services often provide some advice nowadays, but it's important to plan ahead. 

Making a website more accessible will increase your customer reach, ensuring that anyone with an accessibility issue can still view your website in the way that you want it to look. It also improves your search engine optimisation, with Google likely to rank your site higher in search results because of accessibility features. 

An accessible site is generally far easier to use for everyone too, not just those users with disabilities that may affect how they browse a website. Simply put, there's no downside to making a website accessible. That's why we've taken a look at how to make a website accessible, and anything you need to consider along the way.

As with a lot of web hosting and website maintenance these days, many of these steps are very simple to implement, but it's worth setting aside some time to doing so.

How to make a website accessible: Preparation 

Preparing for making a website accessible differs depending on if you already have a website or you're still building one. If you're currently learning how to build a website from scratch, the process to make a website more accessible is generally simpler, but the same rules and tips below apply. 

That's also the case if you're setting up a site with one of the best website builders such as Wix or Square Online. Both services offer numerous accessibility features as standard, so it's much easier to follow advice intended for making sites more accessible. Some of them may have even been automatically implemented by the service. 

Because of that, not every one of these tips below will apply to your business's website. It's still useful to read up on them, especially if you're considering a redesign in future, but work your way through the ones that are relevant and stick with it. 

Be prepared to set aside a number of hours, such as half a day, to ensuring the website is up to current accessibility standards. 

Step 1: Check your website's colors 

website open on laptop on desk

Think about color combinations and visual impairments when choosing colors for your site (Image credit: Pexels)

One of the biggest issues for many users is when it comes to colors and contrast.

Some visual impairments can lead to low color contrast sensitivity, which makes it tricky to see foreground and background colors when they've been designed poorly. For instance, yellow letters on a black background or white on a black background. 

Make sure your site is designed in a way that is visually clear at all times. That includes avoiding using thin fonts or awkward color combinations. It's also good to consider users with color blindness, and adjust your site accordingly. 

Step 2: Use headings correctly throughout your writing 

If your business's site is quite text-heavy, it's important to use headings correctly to organise how the site is arranged. Screen readers for visually-impaired users use heading structures to navigate the content. 

Make sure that you only use <h1> tags for the primary title of the page, and avoid skipping heading levels as you work your way through a document. 

By working through the headings from <h1> to <h2> and <h3>, screen readers won't be confused by the possibility of content being missing.

Step 3: Use proper alt text for images 

mac computer open on web browser with blue lighting

Image alt text needs to describe what the image shows: the clearer the better (Image credit: Photo by Designecologist from Pexels)

When uploading an image, it might feel inconvenient to have to describe it via an alt text tag, but it's vital for screen readers. 

An alt tag should only ever be used to describe what an image is displaying. It should never be used to add information to an existing article or in a vague sense. A clear description ensures that visually-impaired users can still appreciate what the image is displaying.

Previously, many websites used terms like "Click here" to entice visitors to click on a link. Screen reader users typically navigate a list of links separately from the article, so it's a better idea to use descriptive and unique names for these so that the user knows exactly what the link leads to.

In conjunction with that, create links that are logical. Avoid using "about" when you could instead use "about the company" instead. 

Step 5: Make your site keyboard-accessible  

keychon k2 mechanical keyboard sitting on table

Some users will need to use keyboards to navigate sites, so ensure they can navigate your website without any difficulties (Image credit: Tom's Guide)

It's important to make your website accessible for someone solely using a keyboard. Many users with mobility disabilities may not be able to use a mouse or trackpad. Instead, they may prefer to access content by pressing the tab or arrow keys. Other users may need to use single-switch inputs or a mouth stick. 

Make sure that your website's tab order matches the visual order on the site, so that it can be logically navigated. For any long articles, break content up with anchor links so that a user can skip to the relevant portion of the page they require. 

Step 6: Offer different text sizes 

Make it possible to enlarge the font size used on your website. That way, visitors with limited vision can enlarge the font, so they can read it more easily. It's also useful for anyone viewing content on a small monitor or a mobile screen.

Many website builders and popular CMSs such as WordPress offer this option.  

Step 7: Make video accessible 

If your website utilises videos, make sure that each video includes an audio description, to describe any visual-only parts of the video for blind and visually-impaired users.

For deaf users or those with hearing issues, make sure that there are subtitles for any audio-only parts of a video. 

Step 8: Avoid using tables 

screenshot of table in buying guide

Our buying guide for the best website builders demonstrates how you can use a table within a website (Image credit: Future)

Tables should only be used on websites to arrange data and figures. They shouldn't be used to create a layout of a site. This is fairly easy to avoid when using a website builder, but it's important to consider this when building a site from scratch.

Fail to do so, and screen readers will treat a table layout like a table of data, reading out information incorrectly and making it difficult to navigate. 

How to make a website accessible: Summary 

Planning is core when exploring how to make a website accessible. It's important to set aside significant time to either creating a website that is accessible, or adapting an existing one to fit such needs. 

Besides looking through this list of tips, it's also important to look at your site and consider how it would be approached by users with other needs. 

Using one of the best website builders or WordPress is a good way to ensure that you can't make any accessibility mistakes, but with a bit of planning, it's still just as achievable making your first website too.  

Further reading on making a website accessible  

It's important to think about accessibility right from the start when setting up a website. Check out how to choose a web hosting service as well as look at the core differences between web hosting vs WordPress hosting so you can figure out what works best for you and your business.

Jennifer Allen

Jennifer is a roving tech freelancer with over 10 years experience. Her main areas of interest are all things B2B, smart technology, wearables, speakers, headphones, and anything gaming related. Her bylines include T3, FitandWell, Top Ten Reviews, Eurogamer, NME and many more. In her spare time, she enjoys the cinema, walking, and attempting to train her pet guinea pigs. She is yet to succeed.