Introduction to Web Accessibility - What, Why and How

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.

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.

Navigable and Interactable ContentLink to this heading

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.

1. As a Moral DutyLink to this heading

According to WHO, 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.

3. To Comply With Legal RulesLink to this heading

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.

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, CMS, 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: