Web accessibility and ARIA attributes

What is Web Accessibility?

Web Accessibility (a11y) means designing websites so that all people, including those with disabilities, can perceive, navigate, and interact with the content. It is both an ethical responsibility and often a legal requirement.

Why Accessibility Matters

~15% of the world's population has some form of disability
Improves SEO (search engines read semantic HTML)
Better usability for everyone (keyboard users, slow networks)
Legal compliance (ADA, WCAG, Section 508)

Core Principles (WCAG)

Principle	Description
Perceivable	Content must be presentable in ways users can perceive (alt text, captions)
Operable	Interface must be operable via keyboard, no time traps
Understandable	Content and UI must be understandable
Robust	Content works across assistive technologies

Semantic HTML First

Using the correct HTML elements is the most important accessibility practice:

html

<!-- ❌ Bad — div with click handler -->
<div onclick="navigate()">Go to Dashboard</div>

<!-- ✅ Good — proper link -->
<a href="/dashboard">Go to Dashboard</a>

<!-- ❌ Bad — div styled as button -->
<div class="btn" onclick="submit()">Submit</div>

<!-- ✅ Good — real button -->
<button type="submit">Submit</button>

What is ARIA?

ARIA (Accessible Rich Internet Applications) is a set of HTML attributes that provide additional semantics for assistive technologies (screen readers).

Key ARIA Attributes

Attribute	Description	Example
`role`	Defines element's purpose	`role="navigation"`, `role="dialog"`
`aria-label`	Text label for element	`aria-label="Close menu"`
`aria-labelledby`	References another element as label	`aria-labelledby="heading-id"`
`aria-describedby`	References element with description	`aria-describedby="help-text"`
`aria-hidden`	Hides element from screen readers	`aria-hidden="true"`
`aria-expanded`	Indicates expandable state	`aria-expanded="false"`
`aria-required`	Marks field as required	`aria-required="true"`
`aria-live`	Announces dynamic content changes	`aria-live="polite"`
`aria-disabled`	Indicates disabled state	`aria-disabled="true"`

ARIA Example

html

<button 
  aria-expanded="false" 
  aria-controls="dropdown-menu"
  aria-label="Open navigation menu"
>
  ☰ Menu
</button>

<nav id="dropdown-menu" aria-hidden="true" role="navigation">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
  </ul>
</nav>

Essential Accessibility Practices

1. Alt Text for Images

html

<!-- Informative image -->
<img src="chart.png" alt="Sales grew 40% in Q3 2024">

<!-- Decorative image — empty alt -->
<img src="decoration.svg" alt="">

css

/* Never remove focus outlines without replacement */
:focus { outline: 2px solid #007bff; }

/* Custom focus style */
:focus-visible { 
  outline: 2px solid #007bff;
  outline-offset: 2px;
}

3. Color Contrast

Minimum contrast ratio: 4.5:1 for normal text
Minimum contrast ratio: 3:1 for large text
Don't rely on color alone to convey information

4. Form Labels

html

<!-- ✅ Associated label -->
<label for="email">Email:</label>
<input type="email" id="email" name="email">

<!-- ❌ No label association -->
<input type="email" placeholder="Email">

Important:

The first rule of ARIA: don't use ARIA if you can use a native HTML element that already has the semantics you need. A <button> is always better than <div role="button">. Use ARIA only to fill gaps that HTML cannot cover.

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.

Finished reading?

Practice Problems