You may have heard "Web Accessibility" term multiple times while learning web development and you may be wondering what is web accessibility, why it is important and how to make our websites/web applications accessible.
Let's get answers to those questions in this article.
Web accessibility means making web content, tools and technologies "usable" to the people with disabilities.
Here usable means, people with disabilities
- should be able to perceive, understand, navigate and interact with the web content/tools
- should be able to create content/tools for the web
Let's understand this by taking an example of a twitter card.
Content should be perceivable means, web content should be discoverable by any sense of a human. It should not be hidden from all the senses.
People with vision disabilities cannot see but they can listen to the web content using tools such as screen readers to understand it.
It works fine for text content but what about images?
To make image accessible to people with vision disabilities, image should contain
alt text. Screen readers can speak content of
alt text of the image.
Twitter allows us to add
alt text for each image to keep it perceivable to all.
People with different disabilities understand the content in different ways and we should make content understandable to all of them.
For example, for people with visual disabilities, the web page should set correct
lang attribute so that the screen reader can correctly pronounce the content of the web page.
For people with physical(motor) disabilities, the web page should show which element is currently active by showing focus ring around the element.
As you can see that twitter is showing focus ring around active element to make users understand where they are currently on the web page.
People with different disabilities navigate to elements of web pages differently.
For example, people with visual disabilities navigate to different elements using screen reader and keyboard. Screen reader can list out all the headings, form-controls, landmarks etc. of the page and user can directly jump to those elements using keyboard.
Many people with physical(motor) disabilities navigate to different elements using special keyboards and do not use mouse.
That means web page should be completely keyboard navigable and interactable without using mouse.
As you can see that twitter post is both navigable and interactable using just keyboard.
Here are 5 primary reasons why web accessibility is important and we should make our website/web applications accessible.
According to , over 1 billion people live with some kind of disability and number of people with disabilities are increasing dramatically.
So, as web developers, it is our moral duty to make web content easily accessible to people with disabilities as well and make their lives relatively easy.
Around 15% of the world population has some kind of disabilities.
In U.S. alone, people with disabilities control an estimated $544 billion in an annual disposable income. This estimate was back in 2016. Imagine what would be the annual disposable income of people with disabilities in today's time.
By not making website accessible, businesses are losing a lot of potential customers and income.
Many countries have implemented laws that require that websites in public, banking, ECommerce etc. sector are accessible.
Failing to do that can attract legal risks and penalties.
Here is an up-to-date list of accessibility laws implemented in various countries
Making websites and applications accessible helps in:
- enhancing brand image of businesses
- gaining an edge over other competitors
These can indirectly help in bringing more customers, which brings more profit to the businesses.
Trying to make website and web applications accessible also help in inventing new ways to use the it.
For example, features such as auto-complete, auto-captioning, voice control, etc. were initially invented to be used for people with disabilities, which are now helping to all the people.
To guide how to implement web accessibility, has defined web accessibility standards guidelines in three groups:
These guidelines are mainly for content of the website/web application such as text, image, video, audio, markup, presentation etc.
If you are a web developer, then follow guidelines mentioned in WCAG 2.1 document to make your website/web applications accessible.
These guidelines are for tools/services which help people create web content.
Examples: HTML editors, , social media websites etc.
If you are allowing users to create web content in any way, then follow guidelines mentioned in ATAG 2.0 document to make it accessible.
These guidelines are for user agents such as browsers, browser extensions, screen readers, media players and other applications that render web content.
If you are developer of any such user agent, follow guidelines mentioned in UAAG 2.0 document to make it accessible.
All three guidelines WCAG, ATAG and UAAG are further divided in three conformance levels:
These are list of guidelines, which if not followed, makes the website extremely difficult to use for people with disabilities.
These are list of guidelines, which when followed, makes website usable to the people with disabilities.
In most rules and regulations, usually websites are needed to conform to Level AA guidelines.
These are list of guidelines, which makes website or web applications very easy to use for most of the people with disabilities.
It is the highest level of web accessibility that can be implemented.
Web accessibility is basically making websites/web applications/web tools usable to the people with disabilities.
It is very important to implement web accessibility because it makes our website/web application accessible to over 1 billion people with disabilities and it also helps in business growth directly or in-directly.
To make our website/web applications/web tools accessible, we should at least follow Level-AA conformance guidelines mentioned in WCAG, ATAG and UAAG documents.
Do you have any question related to this post? Just Ask Me on Twitter