Web Development for Universal Accessibility: Best Practices

Table of Contents

Accessibility is becoming a term that’s omnipresent in our modern society and is growing to be a part of every inch of our lives, in all of its possible forms. And although when we say accessibility, the first thing that comes to our minds is a person in a wheelchair climbing up a ramp, or a visually impaired person reading Braille on the packaging of their medicine, it’s definitely not only that. In 2023, accessibility is widely applied to the digital world as well.

The number of digital accessibility lawsuits has risen from 2,314 in 2018, to an estimated 4,220 by the end of 2023. These numbers speak volumes about the importance of ensuring universal accessibility in the digital world, especially in web development.

So alongside repairing already existing websites, in terms of accessibility, it’s even more important that the ones that are created now follow all required web accessibility guidelines.

What is that you might ask? Web accessibility is the idea that technology must be equally accessible for people with and without disabilities and all obstacles to accessing the webpage must be removed.

Who are we helping with this? People with:

visual disabilities.
auditory disabilities.
cognitive and neurological disabilities.
physical/motor disabilities.
general problems such as slow internet connections/ busy environments.

How do you do that? Well, luckily there are standards and guidelines that need to be followed. And we’ve picked out the most important ones that need to be addressed first.

Web Development for Universal Accessibility: How to Develop Accessible Websites?

A hand is pointing at a computer screen that is showing a website.

Developing with accessibility in mind is not hard, it’s just not something a lot of developers think about when working since they themselves do not perceive the website in that manner. However, once you start implementing these practices and making it a habit of including all accessibility guidelines in the initial development process, it becomes much easier and more natural in the future.

1. Make Sure All Video and Audio Content are Subtitled and Captioned

According to the WHO, more than 20% of the world’s population live with hearing loss. That’s a lot of audience to miss out on. These people have the right to all digital public information just as any other, and you as a business or a service also have the right and the need to include these people in your digital world.

Luckily, with media production subtitling software like Happy Scribe has made this very manageable and doable. Using software for subtitling and captioning your audio and video content opens the door for everyone with a hearing disability. It’s becoming really easy to do this now with all the great platforms and programs that are being offered. So, there are really no excuses.

Subtitling is beneficial not only for crossing over language barriers and offering a helping hand to people with auditory disabilities but it’s also a great asset in busy and loud environments. Most people choose to watch a video with captions simply because they’re in an environment where they must keep quiet or wouldn’t want everybody overhearing their video.

2. Include Voice Generator

If you think about a visually disabled person using a website it becomes really frustrating to imagine the way in which they would be able to embrace and comprehend the content. However, if the website includes an AI voice generation option, everything becomes much clearer and easier to imagine.

Voice-over generation is now very accessible and easily produced, due to the endless options AI is offering in real-time. Once all written content on a website can be read by a voice generator like Amazon Polly, visually impaired people are going to be able to navigate through the site easily.

A man developing a website by sitting at a desk with two monitors in front of him.

3. Use ALT Tags for Images

Google is working on an image captioning system that will automatically caption all images with an accuracy of 94%. They’re doing a great job, and it’s pretty impressive. However, until it’s out there we need to provide text descriptions of images manually.

This is what is called an Alt tag, which is basically a piece of code that actually describes what the image is. When a visually disabled person goes over the image, the voice generator will read this description to them. If an alt text is not included in the code, sometimes the screen reader will read the file name or type, which is just the worst experience.

Special attention should be paid to how the images are described. You should always add more relevant information to the context or the story, rather than simply bluntly describing the elements in the picture such as ‘ a dog and a man’. Ahrefs provides a free online AI image alt text generator tool that can be quite handy anytime.

4. Enable Keyboard Navigation

Keyboard navigation can be essential for visually disabled people, people with poor muscle control, and motor disabilities.

A nice way of testing a website’s keyboard navigation is to try using it only with a keyboard. Here are aspects that need to be included in making the keyboard navigation fully accessible:

The order of the elements is crucial here. It has to be intuitive and logical.

Header, main buttons, and then footer, working left to right, top to bottom.

Use the “Tab” key to go through links and forms and “Enter” to select and enter.
Keep the menu short and concise so that’s easy to navigate and manage.
Focus on the focus states. They indicate that a link, form, or button is being selected, and make it really easier for people using the keyboard to know where they are on the page.

Keyboard navigation is actually also the first choice of many people who are not placed in any of the previously mentioned inclusivity groups. Simply because they find it easier and more manageable. So, if you want to keep everybody included and offer them the best experience on your website make sure you pay special attention to it.

5. Color Contrast, Patterns, and Labels

This is probably one of the first aspects to look at when developing a web page. It’s probably due to the fact that more than 2.2 billion people in this world have a near or distant visual impairment.

And it’s definitely an aspect that is very detailed in the W3C Accessibility Guidelines. According to them, the contrast ratio between text and background should be at least 4.5 to 1. This can change as the fonts change. It can get a little complicated, but luckily there are plenty of free color contrast checkers online that can help this process.

A woman is using a laptop and a mobile phone to develop a website.

And it’s only about the colors and their contrast that make a page more accessible to visually disabled people. There should be patterns, labels, and textures, especially with more complex visuals such as graphs and tables which are harder to read. Again, here you can use plenty of free software and tools to help you simulate color blindness and similar states. You can use Chrome Candy, the developer version of Google Chrome, which has an inbuilt simulator for this.

6. Use Labels on Forms

Avoid minimalistic forms that use placeholder texts, although they look simpler and take up less space. Placeholder text is grey and very illegible for all users, let alone visually disabled ones.

Instead put labels above the form field, in clear, contrasted font so that everybody who is using it can know what information they’re actually typing. Another reason for doing this is the fact that, when using the keyboard to navigate through the form any non-labelled fields might be skipped altogether if you’re using the Tab key.

Labeling fields doesn’t have to mean that you’re cluttering up your space. Each field can be neatly labeled, in a clear and helpful manner, keeping all users on track at all times.

7. Apply the Shift-left Principle

Lastly, once you know what you need to do in order to create an accessible website, make sure to apply the shift-left principle. The idea behind this practice is to make sure that all essential elements in software development such as testing, security best practices, performance evaluation, etc., are included early in the software development lifecycle. These are all the things to be included before building a website and making it live.

In this particular case, the same practices can be implemented in the early development process to ensure that all of the abovementioned accessibility principles are applied in the code. In this way, they are made mandatory, tested, and validated for the later phases of the process. It saves a lot of time, energy, and resources in the overall web development path.

And most importantly it ensures that whoever is maintaining and updating the website has to follow the integrated accessibility principles.

Let’s Start Developing for Accessibility

Although it may sound complicated, website accessibility can actually be very fun and rewarding once you get into it. We hope that the accessibility guidelines we’ve put together for you will save you a lot of research and get you thinking in this direction. We’ve put them plain and simple to make it easier to start applying them as soon as possible.

If you’re just starting a brand-new website, use the shift left principle to ensure all of them are in the code.

If you’re trying to improve and correct an already existing website, use helping tools such as the Accessibility Insights for Web Chrome extension to detect any incongruities and fix them.

Best of luck!

Iskra Stojanovska, the author of this article, in a black jacket, is smiling for the camera.

Author: Iskra Stojanovska

This article is written by Iskra Stojanovska. Iskra has been an English teacher for more than 13 years now. She is also a freelance translator, interpreter, and university professor for both. She’s currently looking for a career change and other ways in which she can make use of her knowledge of English. Content writing is a definite choice.