Introduction to Web Accessibility - What, Why and How

Last Updated: August 27, 2022

IntroductionLink to this heading

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.

What is Web Accessibility?Link to this heading

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.

Perceivable ContentLink to this heading

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.

example of perceivable content: image in twitter post has alt text

Understandable ContentLink to this heading

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.

example of understandable content: image in twitter post shows focus ring around share icon

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.

Why Web Accessibility Matters?Link to this heading

Here are 5 primary reasons why web accessibility is important and we should make our website/web applications accessible.

1. As a Moral DutyLink to this heading

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.

2. For Business BenefitLink to this heading

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

4. To Enhance Brand ImageLink to this heading

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.

5. To Increase InnovationsLink to this heading

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.

How to implement web accessibility?Link to this heading

To guide how to implement web accessibility, has defined web accessibility standards guidelines in three groups:

1. Web Content Accessibility Guidelines (WCAG)Link to this heading

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.

2. Authoring Tool Accessibility Guidelines (ATAG)Link to this heading

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.

3. User Agent Accessibility Guidelines (UAAG)Link to this heading

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.

Conformance LevelsLink to this heading

All three guidelines WCAG, ATAG and UAAG are further divided in three conformance levels:

Level A

These are list of guidelines, which if not followed, makes the website extremely difficult to use for people with disabilities.

Level AA

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.

Level AAA

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.

ConclusionLink to this heading

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

Explore More:

Subscription Image
Subscribe & Learn

As a full-time content creator, my goal is to create a lot of quality content, which can be helpful to you in advancing in your web development career ✨

Subscribe to my newsletter to get notified about:

  • 🗒 Thorough articles, tutorials and quick tips
  • 🗞 Latest web development news
  • 📙 My upcoming front-end courses
  • 💵 Subscriber exclusive discounts

No spam guaranteed, unsubscribe at any time.

Loading Subscription Form...