WEB ACCESSIBILITY FOR BEGINNERS - Part 3 of Frontend Development Series

What is Accessibility?

As the name implies, it is the quality of something being accessible. It is the quality of something being easily understood and also used.

Web Accessibility?

Websites are not made for only specific people. Once a website is launched globally, everyone has access to it. It would then be your responsibility as a developer to ensure that those 'everyone' would be able to maximally make use of the website regardless of disabilities.

Web Accessibility simply refers to making the web easy to use by everyone. It ensures easy navigations, creation of data, usage of data, modification of data and other operations that can be carried out on the web with disabled users in view.

Disabled Users such as:

  • Users using small screens such as mobile phones.
  • Users with a poor internet connection.
  • Users with limitations such as the inability to hear or read.
  • Users who depend on screen readers.
  • and so on.

The importance of accessibility cannot be overemphasized. How can you expect a user to interact with a website that is not accessible by him/her?

As a developer, while creating websites, you should ensure to meet the needs of the whole public in working with your website else the limitation of traffic.

It is important to guarantee accessibility from the beginning of the web design to follow it thoroughly throughout the design.

Making Your Website Accessible

There are numerous ways of making the web accessible which includes Web Technologies, User agents, Authoring Tools, and even websites.

Some websites are designed to check and suggest accessibility ideas on other websites.

Few Tips on Making Your Website Accessible

1. Using alt text for images

Images should also be provided with 'alt' (alternative) texts. These texts add meaning to the image. The text may contain the name of the image or description of the image.

These texts are necessary because in their absence the image is not easily accessible. Consider users who depend on screen readers, there'd be nothing to be read and as a result, the purpose of the image has been defeated. Another user who may need this could be one with a poor internet connection where the image may not happen load. This will come in handy in keeping the user updated. The syntax for usage in HTML is

...
<img src='../path/to/img/blue_ball.jpeg' alt='A blue ball' />
...

If for any reason the image does not load, the alt text would be displayed instead. As a result, we are not entirely lost.

2. Transcripts for audio

Just as images may not be accessible for the visually impaired, audio too may not be accessible for users with hearing disabilities which brings about the use of transcripts. They enable the user to follow along whatever is being said.

Setting up transcripts is not so difficult. There are transcription services that provide transcripts in HTML format.

3. Web Responsiveness

As a developer, you cannot conclude on the device your users would make use of. Some may go for personal computers and others may just settle for mobile phones. A huge percentage of users use mobile phones for accessing the internet.

You must ensure that all screen size users get the feel of your website. Easy navigations should be provided together with easy access to all parts of your website. As interesting as the desktop view may be, the mobile view should not be so much different.

Lack of responsiveness results in boredom in website usage. Thus, users migrate to other websites to get the information they are looking for.

4. And so on.

Authoring tools such as the Google Chrome Lighthouse (Read Usage here) is a helpful tool in examining your website. It also provides details of accessibility and how you can improve the accessibility of your website.

I believe I have been able to point out the importance as well as some how-tos to ensure web accessibility. Now, go and make responsible websites 🚀

Helpful Articles

Thanks for reading 😍

You could also check out past articles I've written on Frontend Development Series

No Comments Yet