Why Web Accessibility Is Important and How You Can Accomplish It
Why Web Accessibility Is Important and How You Can Accomplish It
making the web accessible by everyone…
What is Web Accessibility?
Before we dive into what web accessibility is, we should first understand what the word ‘Accessibility’ entails.
From my knowledge, “Accessibility means the ability of everyone regardless of their condition to have access to something (e.g internet, transport system).”
Wikipedia says, “ Accessibility refers to the design of products, devices, services, or environments for people who experience disabilities.”
So we could eventually say the Web Accessibility is a way to make everyone including the disabled to have access to the web and internet in whole.
To put it differently, we could also say:
Web accessibility means that people with disabilities can use Web.
At the end of the day, we can conclude that people with disabilities can perceive, understand, navigate, and interact with the Web and that they can contribute to the Web. Web accessibility also benefits those with temporary or conditional disabilities which in some cases maybe aging, slow internet connection, broken arm, e.t.c.
To better understand this we need to elaborate on types of disabilities.
What is Disability And Types
Disability simply means a situation or condition that hinders you from doing something you could easily do if you are not in that condition.
According to CDC,
A disability is any condition of the body or mind (impairment) that makes it more difficult for the person with the condition to do certain activities (activity limitation) and interact with the world around them (participation restrictions).
There are three Modes of Disability:
- Permanent Disability: This is when you are completely disabled. Example: blind, deaf and so.
- Temporary Disability: This is simply a physical or mental disability which hinders your discharging of responsibilities for a short period of time.
- Conditional or Situation Disability: This is simply when you are not able to do things due to the situation you find yourself in. Example: a slow internet connection.
Why Web Accessibility is Important
The Web and Internet in whole is an increasingly important resource in many aspects of our life which includes: education, employment, government, commerce, health care, recreation, and more. It is important that the Web be accessible to everyone in order to provide equal access and equal opportunity to people with disabilities. An accessible Web can help people with disabilities participate more actively in society.
Also, an accessible website is often one of the easiest ways to do business with many people with disabilities, for instance, people who cannot read print material, people who have difficulty going to a physical store or mall, and others. Furthermore, what you do for accessibility overlaps with other best practices such as mobile Web design, usability, and search engine optimization (SEO)
An accessible website gives access to information and interaction for many people with disabilities. That is, the accessibility barriers to print, audio, and visual media can be much more easily overcome through Web technologies.
I suggest reading “Social Factors in Developing a Web Accessibility Business Case for Your Organization” which shows how the Web impacts the lives of people with disabilities and Web accessibility as an aspect of corporate social responsibility.
Another important consideration for organizations is that Web accessibility is required by laws and policies in some cases. WAI Web Accessibility Policy Resources links to resources for addressing legal and policy factors within organizations, including a list of relevant laws and policies around the world.
How to Make Web Accessible
Making the web accessible depends on the developers building for the web. Making your website accessible to people with disabilities, will end up making it accessible to everyone.
The use of Alt-tags
The alt-tag or alternative (alt) HTML attribute is basically used to describe an image. In HTML, it looks the same thing like this:
<img src ="image-location" alt="this is where your image description goes">
Even if you are using a visual tool that hides your HTML code to build a website, you will always have a chance to enter an image description.
Of course, the (alt="") can be empty but it would be better to give each a helpful description for screen readers. Assuming you were blind, what would you need to know about the image? “Woman” isn’t much help, but maybe “Woman drawing design flow chart including accessibility, usability, branding, and design” with the use of screen readers would be better
Use Better Tables
You should add captions to your tables using the caption tag in order to make them easier to understand by screen readers rather than just making the title of a table in bold text.
<table>
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
<th scope="col">Month</th>
<th scope="col">Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
You should also add the “scope” element and neatly label new rows and columns in your table as seen above so that screen readers don’t simply rattle off a series of table cells without giving any context.
Keyboard Navigation
By default, anything you put on your website should be something that could be conceivably carried out using a keyboard only. Which means you shouldn’t mess with your navigation buttons. For instance, don’t animate navigation buttons as dropdown buttons if you can’t use them with a screen reader.
Use Default HTML Tags
Please for web accessibility, don’t mess with the default HTML tags. Use buttons for buttons not anchors for buttons. To make anchors work the same way as buttons you need to add additional javascript event which is a very dumb approach when you could easily use the normal naked button. Use buttons for buttons, anchors for links, “table, tbody, td, th” for tables, “h1, h2, h3, …” for titles and so on.
Messing up with them will confuse screen readers entirely because all screen readers follow a particular way to read the elements on a web page.
Closed Captions for Media
The videos or audio elements on your website should have captions. Closed captions are very useful not only for accessibility (permanently and temporarily disabled users) but also for users who may be using your website somewhere where they can’t play audio, such as in an office or in a noisy location.
Consider providing a text transcript for podcasts or other audio elements. The text transcript will not only make it easier for Google and other search engines to index the content and help your Google ranking, but also useful for people who can’t listen to the audio.
Having captions on your media files will make it accessible to disabled users which will eventually be accessible by everyone.
You can check out the full list on how to make the web accessible here and here
Use the ARIA Tag
According to MDN:
Accessible Rich Internet Applications (ARIA) is a simple set of HTML attributes that define ways to make Web content and Web applications (especially those developed with Ajax, JavaScript and more recent web technologies like Bootstrap) more accessible to people with disabilities. For instance, ARIA enables accessible navigation landmarks, JavaScript widgets, form hints and error messages, live content updates, and more.
ARIA has a set of special accessibility HTML attributes which can be added to any markup but is especially suited to HTML. The role attribute defines a specific role for the type of object (such as an article, alert, slider or a button). Additional ARIA attributes provide other useful properties, such as a description for a form or the current width of a progress bar. ARIA attributes can also be used to specify an active or disabled state for objects(especially buttons).
You can check out this site to know how to use ARIA
Always Use the Title Tag
Browsers don’t always display the HTML title tag in the webpage body, but it is helpful for screen readers and tabs title. Ensure each of your website’s pages has a descriptive but short title that tells visitors what the page is all about.
Web Accessibility Tools
Here are some online website accessibility checking tools that you can use to check and validate your website’s compliance with accessibility:
- A11Y Compliance Platform by Bureau of Internet Accessibility
- Accessibility Checklist by Elsevier
- Accessibility Developer Tools by Google Accessibility
- ColorTester by Alfasado Inc.
- Contrast-Finder by Tanaguru
- DYNO Mapper by Indigo Design Company LLC
- WAVE by WebAIM
Checkout this github repo and w3c page for more list of web accessibility tools.
Conclusion
Always have web accessibility at the back of your mind when building a website. That ensures you are building for everyone that has access to the web. To conclude this article, I’d really suggest that you see this site: http://motherfuckingwebsite.com/.
Clap if you love and enjoyed this article