The Beginner's Guide on Web Accessibility

Introduction

In today’s digital world, everything is majorly happening through Web Apps, Mobile Apps and Web Tools. Even people with disabilities can use these with the help of various accessible tools and apps. However, currently many sites and tools developed are completely taking care of of accessibility measures, which acts as a barrier making it impossible or difficult for some people to use them.

A web accessible site or tool can not only benefit the disabled or impaired person but also to the individuals, businesses and society. And there are standards on how to maintain the accessibility.

We will learn more about it in detail in this article. So please stay tuned.

What is Web Accessibility?

Web Accessibility means that the websites, tools or technologies designed or developed can be used by the people with disabilities. That is, people can perceive, understand, navigate and interact with the web, and also contribute to the web themselves through accessibility features.

Disabilities or Impairments covered under Web Accessibility

Web Accessibility covers all the disabilities that affect access to the Web such as:

• Auditory - related to the sense of hearing

• Visual - related to sight

• Cognitive - related to cognition, that is processes involved in reading

• Neurological - related to the nervous system

• Physical or Motor - related to ability to move, function, or have stamina

• Speech - related to ability to speak

Web Accessibility also benefits people without disabilities such as:

• People using different devices such as Mobile Phones, Smart Watches, Smart TV, and other small screen devices

• Elder people with changing abilities due to an ageing factor

• People with Temporary disabilities such as fracture, or lost glasses

• People with situational limitations such as under bright sunlight or noisy environment

• People with a slow internet connectivity or limited bandwidth

• People living in the rural areas

• People with less educational facilities

• People in developing countries

• Illiterate people

• Patients in the Hospital

In short, web accessibility is helpful to all the the people accessing the web, and also improves SEO benefitting the business.

How to enforce accessibility in the web?

Well, we have something called the Web Content Accessibility Guidelines (WCAG), which are an international set of guidelines developed by the World Wide Web Consortium (W3C), in cooperation with individuals and organizations. These guidelines provide the recommendations for building the web accessible sites or tools.

The goal behind it is to provide a single shared standard for digital accessibility that meets the needs of all the individuals, organizations and governments worldwide.

WCAG is based on the four main principles:

1. Perceivable: Make your website’s content and components presented in a way that the users can perceive it, irrespective of any kind of disabilities

2. Operable: Make your website’s components presented in a way that it’s easily navigable and operable by all kind of users

3. Understandable: The website’s content and layout must be understandable to an average user

4. Robust: The website’s content should be compatible with various User Agents or Browsers, including assistive technologies

Building a digital product with Web accessibility also requires:

• Expert knowledge on various accessibility standards

• Knowledge on fundamentals of accessible designs and code

• Understanding the importance of using multiple testing techniques and tools to check the accessibility

Other W3C standards are:

• Authoring Tool Accessibility Guidelines (ATAG)

• User Agent Accessibility Guidelines (UAAG)

WCAG Guidelines

Over the period from 1999 to till date, the WCAG has evolved a lot and has come up with newer versions with many more guidelines.

The WCAG guidelines have 3 levels of success criteria:

• A (minimum) - Addresses the most basic web accessibility features, but does not generally achieve broad accessibility

• AA (mid-range) - Addresses most common barriers for disabled users and aligns to the Revised 508 Standards

• AAA (highest) - Addresses the highest level of web accessibility, but is not recommended as a general policy, because it is not possible to satisfy all criteria for some content

Many countries or continent have their own strict regulations or acts about web accessibility, with substantial penalties in case of violations. Few of them are:

• Americans with Disabilities Act (USA)

• Equality Act (UK)

• Web Accessibility Directive (European Union)

• Disability Discrimination Act (Australia)

• Référentiel général d’amélioration del’accessibilité (RGAA, France)

Web Accessibility Services

It can be very challenging to spot accessibility flaws on your own and correct them. However, there are lot of tools or services which can help you build accessible websites or tools. These tools scan your website to detect any accessibility flaws and then provide recommendations to fix them.

Below are few Web accessibility service tools available:

• Google Lighthouse

• ColorBlindly

• NV Access

• A11y Color Contrast Checker

• tota11y

• SortSite Desktop

Accessibility Testing Checklist

The following list provides a checklist to ensure that the recommended accessibility testing has been carried out:

• Make sure that website’s HTML is semantically correct. Make sure to use sematic HTML elements

• Make sure that with CSS turned off also, the web content makes sense

• Make sure the website is navigable through keyboard

• Make sure that the non-text content or elements has text alternatives

• Make sure that the color contrast of website is acceptable

• Make sure that the hidden content or element is visible by the screen readers

• Make sure that, whenever possible, the functionality is usable without JavaScript

• Use ARIA appropriately to improve accessibility

• Run your site through an auditing tool

• Test your site with a screen reader

• Include an accessibility policy or statement somewhere findable on your site to say what has been done or not

What is ARIA?

ARIA (Accessible Rich Internet Applications) are a set of attributes developed in 2008 by the Web Accessibility Initiative (WAI) group - a subset of the World Wide Web Consortium (W3C).

These attributes can be added to the HTML to increase their accessibility. They use accessibility APIs found in modern browsers to communicate role, state and property to assistive technologies through the accessibility tree.

“WAI-ARIA*, the Accessible Rich Internet Applications Suite, defines a way to make web content and web applications more accessible to people with disabilities. It especially helps with dynamic content and advanced user interface controls developed with HTML, JavaScript, and related technologies." - The WAI group*

Main Features of ARIA

The three main features of ARIA are:

• Roles - defines what an element is or does on the page or app
  <div role="button"> Info </div>

• Properties - expresses characteristics or relationships to an object
  <div role="button" aria-describedby="more-info"> Info </div>
<div id="more-info"> This is an additional information about the page. </div>

• States/Values - defines the current conditions or data values associated with an element
  <div role="button" aria-describedby="more-info" aria-pressed="false"> Info </div>
<div id="more-info"> This is an additional information about the page. </div>

Rules for using ARIA

• Don’t use ARIA unless required - Adding ARIA to an element does not inherently make it more accessible. ARIA is required when an HTML element doesn't have accessibility support.

• Don’t add unnecessary ARIA to HTML - Mostly, HTML elements work well as-is and don’t need additional ARIA. Only add them when required.

• Always support Keyboard Navigation - All interactive ARIA controls must be accessible through the keyboard navigation.

• Don’t hide focusable elements - Don't add role= "presentation" or aria-hidden= "true" to elements that need to have focus—including elements with a tabindex= "0", as this sends the message that elements are not important and to skip over them.

• Use accessible names for interactive elements - The intention or purpose of an interactive element must be conveyed to the user before their actual interaction.

Best Practices of Web Accessibility

Let’s take a look at some of the best practices that we must incorporate to handle accessibility in our web or app.

Use HTML or ARIA Landmarks

When sectioning off large regions of web content, we can either use ARIA landmark or the semantic elements (HTML landmarks) to add structural context to our page. It ensures that content is in navigable regions. It’s recommended to include at least one landmark per page. Sometimes we need to combine both ARIA and HTML landmarks to provide better accessibility coverage.

Example:

<header>
    <nav>...</nav>
</header>
<main>
    <section aria-label="Introduction to Accessibility">
        <p>This is an article on Accessibility for web apps</p>
    </section>
</main>
<footer>
    <p>© 2025 - Artcle on Accessibility</p>
</footer>

Use Headings in Sequence or Order

Using correct HTML heading levels, the succinct outline of an overall page content can be formed.
There are six levels of heading from highest level of importance <h1> to lowest level <h6> which we can use.

The sequence of the headings is very important. Ideally, we shouldn’t skip heading levels.

Use HTML Lists

With the help of HTML lists, we can semantically group the related items, giving them an inherent meaning. There are 3 types of HTML lists:

• ordered <ol>

• unordered <ul>

• description <dl>

The list item <li> element is used to represent an item in an ordered or unordered list, while the description term <dt> and description definition <dd> elements can be used in the description list.

These elements can inform the disabled users about the visible structure of the list.

Use HTML Tables

The HTML tables are used to organize data or page layout. Depending on the purpose, different semantic structural elements can be used inside a table. There were older times, when tables were used to layout a page in a semantical way. Complex data can be shown in the table in a more semantic and simple way.

Use Page Title

The HTML <title> element defines the content of the page or screen which a user is about to experience. For Single-page App (SPA), the page title is handled through the value of the document.title property manually or by a helper package. Descriptive titles are better for both the users and search engine optimization (SEO).

Use Default Page Language

The page language attribute lang, used in <html lang=”en”> element, sets the default language for the entire web page. It’s recommended to use two-character ISO language codes for greater accessibility coverage.

Use iFrames for embedding the third-party content

The iFrame element <iframe> is used to host another HTML page or third-party’s content within the current web page. Make sure to follow below for better accessibility with the iframes:

• Each <iframe> element must have a title element with distinct content inside the parent tag or a title attribute in itself

• Set the scrolling to “auto“ or “yes“ in the <iframe> tag settings

<iframe title="Google"
  src="https://www.google.com/"
  scrolling="auto">
</iframe>

Use Keyboard Navigation or Focus Order

The elements that a keyboard user can navigate to are called focusable elements. Focus order, also called Tab or Navigation order, is the order in which the elements will receive focus. Use below for better accessibility:

• Tabindex to maintain order of navigation for elements or remove an element from navigation sequence

• Skip Links to jump over redundant or un-useful or repeating group of links to focus on the main content

<header>
  <a href="#content" class="visually-hidden">Skip to main content</a>
  <nav>
    <ul>
      <li><a href="#">Menu item 1</a></li>
      <li><a href="#">Menu item 2</a></li>
      <li><a href="#">Menu item 3</a></li>
      <li><a href="#">Menu item 4</a></li>
      <li><a href="#">Menu item 5</a></li>
    </ul>
  </nav>
</header>
<main id="content">
  <h1>Hello world!</h1>
  <div>Cupcake ipsum dolor sit amet soufflé gingerbread. Tart cake biscuit cotton candy cake donut cake marshmallow jelly beans. Oat cake shortbread pudding soufflé cookie dragée icing. Danish <a href="#">gummi bears</a> donut cake lollipop jelly-o. Candy toffee croissant fruitcake soufflé sesame snaps bonbon bear claw. Jelly toffee bear claw sweet dragée marshmallow bonbon cookie jelly. Cupcake gingerbread brownie tiramisu. Pastry danish fruitcake sugar plum candy jelly beans jelly-o.</div>
</main>

Use Focus Indicators

Along with the order of focus or navigation, it’s very important how to style the focus effect. Make sure not to remove browser default styling, instead you can modify the styling to achieve better accessibility.

a:focus {
  outline: auto 5px Highlight; /* for non-webkit browsers */
  outline: auto 5px -webkit-focus-ring-color; /* for webkit browsers */
}

We can also have our own custom style to highlight or focus an element.

Use Trigger Events properly on Semantic and Non-Semantic elements

Semantic elements such as <button> or <a> naturally include mouse and keyboard trigger events. However, keyboard functionality is not automatically applied on a non-semantic element such as a <div>.

If a non-semantic element is used for a trigger event, a keydown/keyup event must be added to detect the enter or space key press. Adding trigger events to non-semantic elements is often forgotten which results in only mouse accessibility.

Use ARIA States

Depending on your page content and what information your users need, there are many ARIA states to consider when relaying information about a component to the user.

For example, you may use an aria-expanded attribute to tell the user whether a drop-down menu or list is expanded or collapsed. Or you might use aria-pressed to indicate that a button has been pressed.

Use ARIA Live

When transitioning between pages (or routing), we must decide where the focus goes when the page loads. There are multiple techniques to achieve this:

• Place focus on the main container with an aria-live announcement

• Put the focus back to a link to skip to the main content

• Move the focus to the top-level heading of the new page

Use Accessible Images

Making images accessible is not that simple as it seems. It’s important to understand the purpose and context of using an image. Let’s see what all things can be done to make an image accessible for an assistive technology (AT) user.

• Decorative Images - A visual element that doesn’t add any additional context or information. The decorative images must be programmatically hidden from the ATs.
  - using aria-hidden=”true” (be cautious as it may hide elements that you don’t want to hide)
  - setting role to “presentation“ or “none“
  - Empty or null alt attribute value

• Informative Images - An image that conveys an idea, concept or emotion. It includes images of real-world objects, essential icons, images of text, etc.
  - use alt attribute value as a descriptive message about the visual aspects
  - setting role to “img“

• Functional Images - These are connected to an action. For example, a logo of a website is linked to the home page.
  - use alt attribute value as a descriptive message about the action

• Complex Images - It requires more information than any of the above kind of images. It requires both a short and a long alternative description to convey the full message.
  - adding additional explanation by linking an image to a resource
  - provide a jump link to an another explanation later on the same page using aria-describedby attribute

<div class="grid">
  <div class="grid-item">
    <img src="..." aria-describedby="description">
    <p id="description">This is the description.</p>
  </div>
</div>

Use Perceivable Color and Contrast

When we talk about digital accessibility, we use color in terms of Hue, Saturation & Lightness (HSL). It was created to more closely align with the human perceivable color.

Use color contrast as per the color contrast formula created by WAI group.

Use Color-focused media queries such as @prefers-color-theme and @prefers-contrast to handle the color and contrast on different devices to support people with color deficiencies and contrast sensitivity.

Animation and Motion

When building animation or motion, take care of below things:

• Smooth color flickering from dark to light and vice-versa

• Flashes should not be more than three times in any one second

• Add a toggle to pause, stop or hide motions or movements on the web page

• Use media queries @prefers-reduced-motion to reduced the pace of quick motions

Typography

Disabled users may struggle due to the type of font family used. SO, make sure of below points to allow them with ease reading:

• Easy, readable and simple Typeface like Serif or Sans serif

• Use correct font size based on the target device

• Keep paragraph, sentence and word spacing such that it retains focus

• Avoid using Justified Content alignment as it results in uneven spacing

• Use elements like headings, subheadings, lists, numbers, quote blocks, and other visual groupings

Video and Audio

We will see the basics of accessibility requirements for media.

• Must include Alternative Media Types

• Use Captions for Media in two forms: Closed Captions (Text on top of the video) and Open Captions (Text burned into the video)

• Use Transcripts with different language options

• Use audio descriptions

• Use Sign language interpretation

Forms

Forms are considered one of the most difficult elements to get right from an accessibility perspective, as they require knowledge of all the elements we have already covered, as well as additional rules specific just to forms. Let’s dive into the recommendations for Forms to ensure accessibility.

• Use <form> element for forms

<form id="my-form">
  <!-- form content -->
</form>

• Use Autocomplete attribute

<form id="my-form">
  <p>Name: <input type="name" autocomplete="name"></p>
  <p>Telephone: <input type="tel" autocomplete="tel"></p>
  <p>Email address: <input type="email" autocomplete="email"></p>
</form>

• Use Labels for form fields

<form id="my-form">
  <p><label>Name (required): <input type="name" autocomplete="name" required></label></p>
  <p><label>Telephone (required): <input type="tel" autocomplete="tel" required></label></p>
  <p><label>Email address: <input type="email" autocomplete="email"></label></p>
</form>

• Use descriptions with the help of aria-describedby attribute

• Handle form validations and show proper error messages by using aria-required and aria-live

• Use Keyboard navigation with proper sequence or order using tabindex

Maximize compatibility with the User Agents

The website must be compatible with the different User Agents, including people navigating via ATs.

Summary

Now, let’s summarize the whole article. We started with understanding the basics of Web Accessibility, it’s importance, it’s benefits as well as risks in case of violations. We learned about WCAG and ARIA, and the best practices to follow when designing and developing a website or an app.

I hope you got the basic insight about the web accessibility from this article. there is lot more to know on this topic, so make sure to keep learning.

Thank you for reading it till the end, and make sure to provide your feedback on this article.