Importance of web accessibility.
We live in an era of technology where each and everything is available on the internet, whether it be the education sector, finance sector and even medical, all of them are connected to the internet. Hence it is important to note that everything that is available on the internet should be accessible to everyone.
Availability defines that he/she can go to the website whenever they want whereas accessibility defines how easy or how accessible the given website is to the user .
Census 2001 has revealed that over 21 million people in India is suffering from one or the other kind of disability.It may include visual impairments , neurological and other disorders.
So what exactly is disability ?
A physical or mental condition that limits a person’s movements, senses, or activities. Well, that’s the 'google’s' definition of disability, in simple terms any person who finds it tough to do day to day activities which are easily done by a normal person. It can be as simple as holding a pen, brushing your teeth or even accessing a website, this may be a permanent disability where people have some permanent disorders such as people who are blind or are deaf and it cannot be solved by any means. It could be a temporary disability which can be healed over time or a conditional disability which is caused due to some situation such as your internet isn’t working well.
In all the above cases, the disabilities are different but our aim is the same that everyone should be able to access our given website without any problems.
The power of the Web is in its universality.
Access by everyone regardless of disability is an essential aspect.
-Tim Berners-Lee
Now the million dollar question, how to make our website accessible?
Well, there are many ways that can help you improve the overall accessibility of your web pages such as tab index, access key, giving alternate text to images, using screen-readers and a lot more. Let’s discuss one by one in detail.
Tab index:
What tab index does is, it enables the user to navigate through the website using just the keyboard, the tab index attribute of any HTML tag can take values as 0,1,-1. A value of 0 states that the element will be presented in the default navigation format, a value of 1 or greater than 1 represents that the HTML tag will be visited first as compared to the element with the tab index as the value 0. A value of -1 is used whenever we want the HTML tag to receive focus but we do not want the user to navigate to it. For example, if we have a modal on our web page then when the modal is opened, it should then receive focus but the user should not navigate directly to it.
<div tabindex="1">Apple</div>
<div tabindex="3">Google</div>
<div tabindex="2">Microsoft</div>Here when the user hits the tab key, it will first go to the Apple div then to the Microsoft div and finally to Google’s div part of the website.
Accesskey:
This attribute of the HTML tag specifies what key the user needs to press to directly navigate to that HTML element, suppose that there is a <p> tag with access key as 'p' then when user hits Alt+p on their keyboard (for chrome) then they will be automatically redirected to that part of the webpage rather than scrolling or using mouse to go there.
<input type="submit" id="submitform" accesskey="s" value="Submit">The advantage is that we can navigate through the website very quickly and the disadvantage is that every browser has a different combination of key such as Alt+ctrl+ 'accesskey' or just ctrl+’accesskey’. So it is tough for the user to remember that also if there are hundreds of tags on your website then the user has to remember the access key to all that hundred tags in order to navigate through the website. In order to make sure the user knows the access keys we can do one of the following
- Underline the first letter:
Next Page, in this example, it indicates that the user should use the N access key to go to the next page, the advantage here is that it is easy to implement and it doesn’t interfere much with the CSS of the website, but some users may still find it confusing to use it
- Specifying the access key in ( ):
This is like exactly telling the user what to do such as Next page(Alt+N), the advantage is that it is easier to understand but it interferes with the CSS of the website and complete changes the overall look and feel of the web page that the user is viewing.
- Keeping the access key values in a separate page:
In this , we keep the entire set of commands in a different file and then link it with our website so that the users can view it and execute the commands accordingly , the advantage is that it won’t affect the look of the website but the users will have to go through the entire documentation again and again just to perform a simple operation on the website.
Alt property of img tag:
When displaying an image in your website, include the alt attribute along with the src attribute, because if the user has any visual impairments then when the user is navigating through the website using a screen reader then the screen reader will read out loud the alt attribute of the image. So we have to make sure that the alt tag correctly specifies the image. We should be as precise as possible because the user can partially see the image or in some cases cannot see the image at all
<img src=”img_chania.jpg” alt=”Flowers in Chania”>Screen readers:
Before we discuss this , let’s do an activity and do as I say.
Don’t imagine a pink elephant.
What you just did is that you imagined a pink elephant , well that’s how human brain works, sound drives our imagination . same is the case with users, they will imagine the web page in the way the screen reader is telling them to , screen reader just reads out loud whatever is present on the screen. So what you can do is keep your website simple so that neither the disabled person or the screen reader gets confused so as to which part to read. As said above if you have a image , write the description to it as if you are telling a blind person to imagine it. because ultimately that’s what the screen reader is going to read out loud.
Describe the above image as an ‘image of a red rose on a green background' and not as 'Picture of a flower'
Conclusion:
While designing your website you have to make sure it’s easy to navigate through and easy to use , every corner case should be considered and think from the perspective of a disabled person so as to get an idea of how tough it is for them to access the website and then design your website accordingly.
