Despite its importance, web accessibility is one of the most overlooked aspects of building a website.

Just imagine, what if you were unable to:

• Identify the colours on screen
• read the text on a website
• hear a video
• or worse, unable to move the mouse

Sounds frustrating, right!

Unfortunately, navigating the web is a dilemma for many people with visual, hearing, motor, or cognitive impairment. And since, according to WHO, over 15% of the world’s population is living with some form of disability, websites that aren’t accessible are depriving many of receiving the best digital experience possible.

Why make your website accessible?

One of the biggest reasons for making an accessible site is giving an equal experience to all. It also gives you the ability to reach a broader set of audiences and, in return – grow your site’s traffic, revenue, and conversion rate.

In addition, there are several legal reasons to keep accessibility in mind when designing your website. For example, Americans with Disabilities Act (ADA) penalizes sites up to $55,000 for not being accessible. The number of Federal Website Accessibility Lawsuits have also tripled – according to Seyfarth Shaw’s report of 2018.

Australia too saw a notable lawsuit when a visually impaired user was unable to access scores and medal tallies on the official website of Sydney 2000 Summer Olympic Games. As a result, he was awarded $20,000 in damages.

How to make your website more accessible?

Laura Kalabag, author of Accessibility for Everyone, said, ‘If you work on the web in any capacity, accessibility is your job.’

Truthfully, most companies never have the intention of making their website inaccessible. It is usually the lack of knowledge combined with the misconception that an accessible website potentially affects the site’s aesthetic, which prevents them from making a design choice inclusive to all.

However, with the internet – a staple in our everyday lives, accessibility should be considered during every stage of the web designing process. Here are some that can make your website more accessible.

1 Choose an accessible content management system

There is a wide selection of content management systems available for websites. Common examples include WordPress, Drupal, and Joomla that are easy to use with several customizable options to make the site open to all.

Once you have selected your CMS, choose themes, plugins, widgets, and modules that support accessibility. Check their technical documentation to ensure they support accessibility. Other elements, such as editing toolbars, comments section, and video players, should be accessible.

2 Properly structure your headings

Many of us neglect headings. However, simple heading tags can do wonders for those who are visually impaired.

As you know, visually challenged individuals use screen readers to read the content. The heading tags make it easy for the readers to jump to the sections they are interested in.

• Use headings from <h1> — <h2> — <h3> in a preceding manner and avoid skipping levels.
• Use maximum headings to organize your content structure.
• Opt for a CSS (Cascading Style Sheets) to style your text.

3 Ensure the implication of Alt Text

To please Google, most (if not all) of us have a habit of adding an Alt Text to describe the media files (images, videos, Infographic) on our website.

But when it comes to the visually impaired users, the screen readers read the Alt Text aloud to tell them what is in the media file. The text also replaces the media if the content is not loading for any reason.

4 Use contextual links

When including links to your content, make sure to add texts that describe these links. For example, a ‘click here’ to go to a company’s page may confuse the internet user reading through the eyes of the screen reader. Instead, alter your text, and write “to learn more about our company, read the About Us page.”

This will ensure that the screen readers don’t skip the links within the context of the page and adequately explain the meaning to the user.

5 Add subtitles

WHO estimates that around 2.2 billion people have a visual impairment, while over 5% of the global population has hearing loss.

By adding subtitles, we can make it easy for them to comprehend the audio/video of your website through screen readers. And although the text may not be able to replace the experience of audio and video content – the protocol would help them consume the vital information you are trying to convey.

6 Be mindful of the colour palette

Colours help to depict your business in a fun way. There are millions of people around the world who are unable to distinguish between colours and their shades. In this regard, the US Standards Website recommends keeping a ratio of at least 4.5:1 between interactive text elements. This ensures that people who are unable to see the full-colour spectrum can read texts precisely.

It is also a good practice to add visual indicators, such as asterisks and question marks, to help them distinguish between blocks of content.

7 Ensure full keyboard access

Using a mouse and pointing it accurately at the screen is a challenge for many users. They can only make use of the tab or arrow keys on the keyboard to manoeuvre around a web page. When arranging content on your webpage, make sure it matches the tab orders so the users with any form of disability can view pages easily.

• Add anchor links to distribute long-form content.
• Add a ‘Skip to main content’ link to the top of each page for navigation ease.
• Don’t configure the menu so that it can be activated through mouse clicks only – but keep it accessible for keyboard users.

8 Avoid tables

Tables help organize the content of your website. However, when it comes to those with reading disabilities, the tables are a strict no-no. This is because when a screen reader comes across a table, it simply reads out the number of columns and rows present – instead of the main content.

However, if tables are a necessity, add headers to each row and column – to explain the information in each cell.

9 Label forms for accessibility

Users utilizing the screen readers are often confused regarding the type of content they should fill in the web forms.

Label the forms appropriately – such as Full Name, First Name, etc.

Group similar fields together. For example, personal details can be combined in a separate ‘Personal Information’ tab. This would help the screen readers keep track of their progress and ensure they don’t miss any detail.

Moreover, required fields are often marked with an asterisk for sighted users. But when it comes to the visually impaired, make sure to indicate that the field is required to a screen reader by adding a ‘true’ to the necessary area and ‘false’ for the optional.

10 Don’t forget to test drive your pages

One of the easiest ways to make sure your website is accessible for all is to turn off the CSS and JavaScript. You can also enlist users with disabilities to try out your site and share their experiences. Various tools on the internet are also available to determine how assistive protocols operate within the interface of a website.

Build the bridges

About the universal impact of the web, Tim Berners-Lee:

“Access by everyone, regardless of disability, is an essential aspect.”

The internet knows no boundaries. Keep the above tips in mind to ensure that every piece of digital content on your site is accessible and interactive by even the most diverse group.