🧭 Introduction to Web Accessibility (a11y) – where to start?

Aleksandra Rataj — Mon, 26 May 2025 20:51:25 +0000

Accessibility, often abbreviated as a11y, ensures digital content and functionality are usable by people with disabilities — including visual, auditory, motor, and cognitive impairments. It’s not an optional feature or a stretch goal. In many regions, it’s a legal requirement. Everywhere, it’s a core quality standard.

One in five people experience disability. If your app doesn’t support screen readers, keyboard navigation, or high contrast modes — it’s broken for millions.

🌍 What is Web Accessibility?

Web accessibility refers to the design and development of websites, tools, and technologies so that people with disabilities can perceive, navigate, interact with, and contribute to the web.

Accessibility supports a broad range of user contexts:

Visual: blind, low vision, color blindness,
Auditory: deaf or hard of hearing,
Motor: limited fine motor control, paralysis,
Cognitive/Neurological: dyslexia, ADHD, memory impairments,
Temporary: broken arm, noisy environments, bright sunlight,
Aging-related: declining vision, hearing, dexterity.

🔐 Legal Requirements

But it’s not just about ethics — it's also about law and business.

WCAG 2.1 AA is the prevailing global standard (WCAG 2.2 is the latest version, but not yet widely required).
European Accessibility Act (EAA): Enforces accessibility compliance in the EU from June 2025 for e-commerce, banking, telecom, and other digital services.
Americans with Disabilities Act (ADA) and Section 508 (US) also apply to many websites, including private sector entities.

📚 Understanding WCAG

The Web Content Accessibility Guidelines (WCAG) are published by the W3C (World Wide Web Consortium). They define measurable success criteria to evaluate and improve web accessibility.

WCAG is based on four principles, abbreviated POUR:

Perceivable – users must be able to perceive content (e.g., alt text for images, text captions for video).
Operable – all interface elements must be usable via keyboard and other input methods.
Understandable – content and interaction must be predictable and consistent.
Robust – content must be compatible with current and future assistive technologies.

Each guideline is testable at Level A, AA, or AAA. Most regulations require Level AA compliance.

🚀 Where to start - 5 essential first steps

1. Use Semantic HTML 🧱

Semantic elements give meaning and structure to content. They allow assistive technologies (like screen readers) to understand your UI without relying on custom ARIA roles.

<!-- ✅ Good: semantic button -->
<button type="submit">Submit</button>

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

<!-- ❌ Bad: generic div with click handler -->
<div onclick="submitForm()">Submit</div>

Use instead of div/span:

Purpose	Use
Page landmarks	`<header>`, `<main>`, `<nav>`, `<footer>`
Text structure	`<h1>`–`<h6>`, `<p>`, `<ul>`, `<li>`
Forms and inputs	`<form>`, `<label>`, `<input>`, `<fieldset>`
Interactions	`<button>`, `<a href>`, `<details>`

Bonus: Semantic HTML improves SEO, maintainability, and reduces code complexity.

2. Ensure full keyboard accessibility ⌨️

Users must be able to navigate and operate your app without a mouse.

Requirements:

All interactive elements must be focusable (<button>, <a>, <input>, custom components with tabindex="0").
Ensure a visible focus outline is present (:focus-visible or outline).
Maintain a logical tab order (e.g., DOM order should match visual layout).
Prevent focus traps (e.g., in modals or side panels).
Allow exiting with Escape, especially for dialogs and overlays.

Test:

Open your app.
Put the mouse away.
Use Tab, Shift+Tab, Enter, Space, Esc, and Arrow keys to operate all features.
Fix what breaks.

Keyboard shortcuts:

*Source: a11y-guidelines.orange.com

3. Write accurate alternative text and labels 💬

Images: use the alt attribute to describe the function or meaning of an image.

<!-- Informative -->
<img src="earrings.jpg" alt="Handmade resin earrings with dried flowers" />

<!-- Decorative (no meaning) -->
<img src="divider.svg" alt="" role="presentation" />

Icons & custom buttons: for elements with no visible text, add accessible labels using aria-label or aria-labelledby.

<!-- SVG icon button -->
<button aria-label="Close dialog">
  <svg aria-hidden="true" focusable="false">...</svg>
</button>

Avoid redundant or unhelpful labels like "image", "icon", "button" unless needed for clarity.

4. Manage focus and dialogs properly 🎯

Modals, popovers, and menus need explicit accessibility handling.
Requirements for a dialog:

Use role="dialog" or role="alertdialog".
Set aria-modal="true".
Include aria-labelledby or aria-label.
Trap focus inside the dialog.
Restore focus to the triggering element on close.
Dismiss via Escape key.

<div
  role="dialog"
  aria-modal="true"
  aria-labelledby="dialog-title"
  tabindex="-1"
>
  <h2 id="dialog-title">Confirm Purchase</h2>
  <p>Are you sure you want to proceed?</p>
  <button>Yes</button>
  <button>No</button>
</div>

Use libraries like @headlessui/react, react-aria, or Radix UI for robust focus management.

5. Use automated and manual testing tools 🛠️

Automation helps catch obvious issues. Manual testing catches the rest.

✅ Automated tools:

axe DevTools (browser extension)
Lighthouse (Chrome DevTools → Accessibility tab)
jest-axe (for unit tests)
Testing Library (use getByRole, getByLabelText, etc.)

✅ Screen reader testing:

NVDA (Windows)
VoiceOver (macOS)
JAWS (Enterprise)
Test actual user flows (forms, dialogs, menus) with screen reader on.

✅ Manual checks:

Can you tab through the interface logically?
Does every element have a visible focus style?
Are ARIA roles used only when necessary?
Is color contrast sufficient? (Use tools like WebAIM Contrast Checker)

🧩 Accessibility is a team responsibility

Accessibility is not a checklist. It’s a product quality discipline that must be integrated into:

🧱 Design: use color responsibly, follow accessible patterns,
💻 Code: write semantic markup, test keyboard and screen reader behavior,
🧪 QA: include a11y in test cases and regression testing,
🧑‍🔧 Product: define accessibility as part of “done”.

📌 Final Recommendations

Do the basics right: semantic HTML, visible focus, correct labels.
Use the right tools: automate, but never skip manual testing.
Test with real assistive tech: NVDA, VoiceOver, keyboard only.
Make a11y a process: part of design reviews, code reviews, and CI.

💬 TL;DR

If your web app isn’t accessible, it’s not production-ready. Accessibility is about engineering for inclusion, compliance, and quality. Start now. Make it a habit. Make it part of your workflow.

DEV Community: Aleksandra Rataj