Web Accessibility (mediacurrent)
making the web accessible by everyone…
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 the 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 benefit 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.
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: slow internet connection.
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 the 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 the 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.
The use of Alt-tags
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.
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.
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
Messing up with them will confuse screen readers entirely because all screen readers follows 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:
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 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 progressbar. ARIA attributes can also be used to specify active or disabled state for objects(especially buttons).
You can checkout 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. So ensure each of your website’s pages has a descriptive but short title that tells visitors what the page is all about.
- 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.
Always have web accessibility at the back of your mind when building a website. That is ensure you are building for everyone that have 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