Webcertain blog

How to make your web content accessible

a laptop with disability symbols on it

There are legal, ethical and business reasons to make sure your content is accessible to all.

But what does that mean, and how do you do it?

What exactly is accessibility?

Accessibility is the design practice of making products and services usable by anyone, regardless of any disabilities they may have. It is about removing unnecessary barriers to enable all users to use your products and services if they want or need to.

For example, ensuring your content can be accessed by screen readers will help customers who are blind or visually impaired; adding captions to audio and video content will help customers who are deaf or hard of hearing; and making your website navigable using keyboard controls will help customers with difficulties using a mouse.

a young man in a wheelchair using a modified computer mouse

These are just a few examples. There are many other disabilities and conditions that need to be considered when talking about accessibility.

There are clear guidelines to follow, which can help you to avoid common pitfalls and ensure your content is as accessible as possible.

The Web Content Accessibility Guidelines (WCAG) 2.2

As far as online content is concerned, we primarily look at the Web Content Accessibility Guidelines (WCAG). The current version is 2.2. This defines exactly how to create accessible content across the web and other digital spaces.

So, what changes might need to be made to make a piece of content accessible?

Accessibility example 1: Colour contrast

Having high colour contrast is important because it allows people who have low vision (which is one of the biggest groups of people with disabilities) to better access documents.

The screenshot below shows a webpage with low colour contrast. There are grey letters on a grey background. This can be difficult to read even for people with perfect vision – and imagine a situational disability like being outside in bright sunlight on your phone.

a screenshot of a webpage with low colour contrast

The screenshot below shows the same webpage but with higher colour contrast. Now, there are black letters on a white background. This is easier for everybody to see and read. This is a simple change, but it makes a big difference.

a screenshot of a webpage with high colour contrast

Take a look at your website. Have you chosen colours that may look pretty at first glance, but are actually of low colour contrast and therefore difficult to read? These pages may be inaccessible to people who have visual disabilities. There are plenty of tools out there to help you check your colour contrast, such as this one from Accessible Web.

Accessibility example 2: Keyboard controls

The screenshot below shows the old NASA website. If you are able to use a mouse, you can hover it over the “About” menu, and the submenu options will appear in a dropdown, like this:

a screenshot of a webpage if the user can use a mouse

But what if you are unable to use a mouse? What if you are missing your arms, or do not have the strength or dexterity in your hands to use such a device? In the worst-case scenario, the webpage may be inaccessible, like this:

a screenshot of a webpage if the user cannot use a mouse

Instead, you need to make sure your webpages are navigable using keyboard controls. This refers to the user pressing keys such as tab, enter, space, escape, up, down, left or right to navigate around the webpage. This will not just improve the user experience; it is literally the only way to allow people who are unable to use a mouse to access your website and become a customer.

Accessibility example 3: Read order

Here is an example of what can happen if keyboard controls are not well-configured. The screenshot below shows a chat conversation and the arrows show the order that a screen reader could read out the content. Often, the order is all scrambled around. If you were using a screen reader in this scenario, you would be following the path of the arrows and it would be a mess!

a screenshot of a webpage with a messy read order

The content needs to be organised into a more natural way that would allow the screen reader to read the content in the most logical order without getting lost, like below:

a screenshot of a webpage with a logical read order

Accessibility example 4: Captions

Captions are obviously essential for people who are deaf or hard of hearing. But they can also be useful for everybody.

a screenshot of a video with captions

Non-native speakers of a language may find it useful to turn on captions to help them to follow along with what is being said in a video. Native speakers can benefit from captions in certain scenarios too and are quite popular, for example if the speaker is mumbling, or if the individual is in a noisy environment or in a situation where it may be rude to play the audio out loud, such as public transport.

Need help making your web content accessible?

Our comprehensive accessibility solutions ensure that any brand’s products and technologies are accessible to all, regardless of disabilities such as vision impairment, hearing disabilities, or other physical or cognitive conditions.

Our web accessibility solutions include:

  • Audits
  • Remediation and development
  • Certification
  • Compliance reports

We can also support with:

  • Documents, including alternative formats
  • Live events
  • Training
  • Consultation
  • And more – for our full list of services, click here!

Webcertain is part of the TransPerfect family of companies. If you are interested in any of our accessibility solutions, please feel free to contact us at accessibility@transperfect.com

You can also watch a recording of a webinar that I co-presented on this topic, here.

I wish you all the best on your accessibility journey!

Leave a reply

Your email address will not be published. Required fields are marked *

Share the post:

Recent blog posts

Elin Box

How international expansion can save your business

The impact of economic uncertainty on a business can be huge: reduced customer spending, supply chain disruptions, and ultimately, the reduced ability to do business and be profitable. However, mitigating

Sean McCurry

6 steps to get started with accessibility

Accessibility is not just a legal requirement – it is a commitment to inclusivity and a social responsibility that all businesses should take seriously. Being accessible means reaching a broader