I never really understood the importance of accessibility in programming until during a front-end mentoring program organized by She Code Africa. My mentor at the program reiterated the importance of making websites that could cater to everyone despite their limitations.

If you think about it, there are over 8 billion people in the world today with the World Health Organization estimating that 1.3 billion out of this population experience a significant disability. This number represents 16% of the world's population. While not all disabilities will impact people from viewing a standard non-accessible website, it is safe to estimate that at least 10% will be handicapped by our decisions.

What is Accessibility?

Accessibility is the design of devices, products, environments or services that can be used by people with a wide range of disabilities without any barriers or hindrances. In relation to technology and website, accessibility is the designing of sites, applications and software to make it easier for people with disabilities.

Non-accessible website code affects people with the following disabilities:

• Deafness

• Blindness

• Color-blindness

• Motor impairments

• Cognitive impairments

How you can make sites accessible

To create an accessible website, developers must think of not only their own ideas when making the site. It is easy to get so into your own creative process without remembering that at the end of the day, you are not the end product of the site, the users are. Websites should be compatible with assistive technologies such as screen readers; provide captions and audio descriptions for videos.

Below are the key aspects to consider for accessibility when it comes to websites.

Semantic HTML Elements

A major step in making a website accessible is to use semantic HTML elements. HTML 5 contains several semantic elements which could help a visually impaired person using a screen reader. When the screen reader sans the web page, it gets information about the HTML structure of the page.

So elements like <div> or <span> have no meaning semantically and should not be used to wrap any content that users need to know. Rather such elements should be used for page layouts. Your HTML page should contain elements like <header>, <nav>, <main>, <article>, <aside> and <footer>.

All these elements are semantically meaningful and define various parts of a web page. Moreover, they will make it easier for persons using screen readers or any other assistive technology.

Example 
<h2> Best League of Legends Champion</h2>
    <div> Jinx is the best champion in League of Legends </div> <!-- Wrong practice for accesibility -->
<h2> Best League of Legends Champions</h2>
<p> Miss Fortune is the best champion in League of Legends </p> <!--correct practice for accesibility-->

<div> Play audio</div> <!--wrong practice-->
<button>Play audio</button> <!--correct practice-->

Using semantically meaningful HTML elements allows screen readers to jump to different sections of a page.

Colour

When making an app or a website, it is important to select colours to think about the eyesight of millions of people. A good website contains colours that enhance the browsing experience and conform to certain criteria issued by the World Wide Web Consortium.

When you use colours in a website design, it's really important to make sure that the background colour and the primary colour are different enough from each other. If they are too similar, people might have a hard time reading or understanding the text or images on the page.

To make things easier for everyone, there are guidelines that suggest that there should be at least 4.5 times more contrast between the primary and background colours. This means that the primary colour should be significantly darker or lighter than the background colour so that the text or images stand out and are easy to read. You can also use contrast checker sites to see if your colours meet acceptable standards.

Images

If your site has an image on it, it is essential that the alt attribute has a description of the image in it. A description of the image in the alt attribute will allow persons using screen readers to have an idea of what the image is and relate more to the overall content.

<img src = "Garen-League-of-legends-champions.jpg" alt="Garen,the Might of Demacia">

Language

Setting the language attribute at the beginning of an HTML document allows screen readers to know how to read the content out loud.

<!DOCTYPE html>
<html lang ="en"> <!--This sets the language of the document to English>

NOTE: Setting lang to "fr" or 'es will set document's language to Fench or Spanish respectively.

Forms

Almost all websites these days contain forms, providing user interactions on websites and apps. Whether you're making a form for login, commenting or purchasing you need to ensure that these forms are accessible by all.

Labels are very important when creating a form and they should connect with the input. Labels are important for visually, cognitively and motor impaired users. You can use the< label> tag to provide a descriptive label for a group of elements, including <input> and <textarea>.

The Web Content Accessibility Guidelines and legal repercussions of non-accessible websites

In 1999 the World Wide Web Consortium created the Web Content Accessibility Guidelines (WCAG) with the goal of making web content more accessible to people with disabilities. Since then, there have been several updated versions of the Guidelines with a working draft of WCAG 3.0 published on 7th December 2021. The new draft contains new colour contrast guides and more guidelines to make web content and apps more accessible.

Website accessibility is also a legal matter in some countries to ensure further compliance. In the U.S.A., Title III of the Americans with Disabilities Act (ADA) states that all public areas must accommodate people with disabilities.

This provision in the ADA has been interpreted by the U.S. courts to include the public domain of the internet making web accessibility a must for all sites created in the country. The European Union also mandates that public and private sector websites and apps be compatible with WCAG 2.0.

Additionally, several other countries including Australia, Canada, China, France, and Japan have implemented laws mandating adherence to the Web Content Accessibility Guidelines.