Before diving deep into web accessibility let’s understand what is accessibility. While coming across the word ‘accessibility’, the first thought that comes to our mind is to access anything with ease irrespective of any condition.
Wikipedia says, Accessibility is the design of products, devices, services, vehicles, or environments so as to be usable by people with disabilities.
What is WEB ACCESSIBILITY ?
Web Accessibility is the way that everyone can access the web and internet with ease. By ‘everyone’ it refers to all individuals including those who have cognitive or physical disabilities or limitations.
In simple words, we can say that Web accessibility means ‘People with any kind of disabilities or limitations can use the Web’.
Why is WEB ACCESSIBILITY important ?
1 out of 7 people has some disability that hinders their experience while browsing the web. That’s 1,300,000,000 people. This number is huge!
Therefore, it is very important to make websites accessible to everyone irrespective of any condition.
The web plays important role in many aspects of life like education, employment, health care, and business. It is crucial that website is accessible to everyone inorder to provide equal opportunities.
Web accessibility enhances the market reach and also improves the overall user experience. Therefore it can make a large impact on business and help in overall growth.
Web accessibility also makes it easier for search engines to index content.
Web Content Accessibility Guidelines (WCAG)
Web Content Accessibility Guidelines (WCAG) 2 is developed through the W3C process in cooperation with individuals and organizations around the world, to provide a single shared standard for web content accessibility that meets the needs of individuals, organizations, and governments internationally.
WCAG helps in understanding how to make the web more accessible to people with disabilities or limitations.
The WCAG technical documents are developed by the Accessibility Guidelines Working Group (AG WG) (formerly the Web Content Accessibility Guidelines Working Group), which is part of the World Wide Web Consortium (W3C) Web Accessibility Initiative (WAI).
Web Content Accessibility Guidelines operate under the POUR principles:
Perceivable
Operable
Understandable
Robust.
There are three levels of conformance to these guidelines:
Level A: It is the minimum level of conformance.
Level AA: Level AA includes all the requirements of both Level A and Level AA. Many organizations strive to meet Level AA.
Level AAA: Level AAA includes the requirements of all the levels - Level A, AA, and AAA.
How to make the Website Accessible
Making the website accessible for disabled people will make it accessible for everyone. Now let’s see 10 methods to make the website accessible for everyone.
1. Colors
Colorblind people interpret color in different ways. There are 3 major types of colorblindness.
- Protanopia (Blindness to Red): People have trouble differentiating between red color
- Deuteranopia (Blindness to Green): People have trouble differentiating between green color
- Tritanopia (Blindness to Blue): People have trouble differentiating between the blue color
Therefore it is very important that contrast ratio of colors against background should be in accordance with the WCAG2 standards.
2. Alternative Text for Images
Non-text content on websites like images, videos, and infographics should be also available in text format so that it can be accessed by people with disabilities. Alt tag or alternative (alt) HTML attribute can be used to describe an image. It is suggested to write a better description so that it can be understood by screen reader users.
<img src ="image-location" alt="image-description" />
3. Keyboard Navigation
People with disabilities depend on keyboard completely. They cannot use a mouse due to physical disabilities. In that case, they prefer to access the content using keyboard shortcuts or arrow keys. Therefore it is important that your content is keyboard-focused, which means all the content on the web should be accessible using the sole keyboard.
4. Closed Captions for Media
Audio / Video content should have a corresponding text transcript so that disabled people can access the content. It will be also helpful for people who want to consume the content in noisy or restricted areas. The text transcript will also make it easier for search engines to index the content.
5. Headings
Headings play a very important role to determine the context of the content. There should be a small but descriptive title that tells what the content is about. Headings are also been used by web browsers and plugins to facilitate in-page navigation. It is important to use the heading tag on basis of importance ie. the h1 tag as the most important and h6 as the least important.
6. Use Semantic HTML tags
Users with disabilities use screen readers to read the content. Semantic tags help in understanding the basic layout of the web page. Messing with HTML tags can confuse screen readers, so it is very important to use specific tags.
7. Accessible forms
Forms are used on a scale as a medium to collect information from the user. Therefore it is very important to have forms accessible for everyone including people with disabilities. Forms can be visually and cognitively challenging to use for disabled people
People using speech input can better understand the form using the labels via voice commands to activate controls and move the focus to the other fields that need to be completed.
People using screen readers can recognize and understand form controls more easily because they are associated with labels, text fields, and other structural elements
8. Disabling automatic media
Automatic media are not accessible. It can be annoying to the people who cannot access the media file and might find it difficult to turn off automatic media. If there is any media file on the web then it is important to disable the auto-play function and give the user the right to access the media.
9. Use the Aria Tag
Accessible Rich Internet Applications (ARIA) is a simple set of HTML attributes that can be added to any markup that defines ways to make Web content and Web applications more accessible to people with disabilities. The role attribute defines the specific role like an article, button, or alert. Aria properties also provides a description of objects and can also be used to specify an active or disabled state for objects like buttons.
<div id="percent-loaded" role="progress-bar" aria-valuenow="90"
aria-valuemin="0" aria-valuemax="100">
</div>
10. Use Tables Properly
Tables without proper structural markup make it difficult to differentiate between header and data cells which creates a barrier to accessibility. Also, make use of a caption tag to give a caption so that the screen reader can understand it properly rather than giving a header to the table. The scope element also helps screen readers to identify whether the cell is a header for a row, column, or group of rows or columns.
<table>
<caption>Important Events</caption>
<tr>
<th scope="col">Date</th>
<th scope="col">Event</th>
</tr>
<tr>
<td scope="row">21 June</td>
<td>My Birthday</td>
</tr>
<tr>
<td scope="row">25 December</td>
<td>Christmas</td>
</tr>
</table>
Web Accessibility Tools
Team Genesis has made an awesome tool that you can use to check and validate your website’s compliance to accessibility - WASP (Web Accessibility Starter Pack)
Apart from that, there are other online tools to check the accessibility of your website -
- Accessibility Checker by Intent Based
- WAVE by WebAIM
- TAW – Test de Accesibilidad Web by the CTIC Centro Tecnólogico
- A11y Complaince Platform by Bureau of Internet Accessibility
- DYNO Mapper by Indigo Design Company LLC
Conclusion
It is very important that everyone is accessed with the content across the web or internet. Understanding the problems of disabled people and then creating feasible solutions which are accessible to everyone will help in catering to the entire market with robust solutions which will be accessible to everyone.
And that’s it from my side. I tried my best to keep it as simple as possible 😀 . I hope this was helpful. If there is any suggestion to improve the blog, feel free to address them.
Feel free to reach out to me!