HTML Accessibility (a11y)

Learn how to create websites that everyone can use — including people with disabilities.

What is HTML Accessibility?

HTML Accessibility (a11y) means building websites that people with disabilities can perceive, understand, navigate, and interact with.

  • Visual: Blindness, low vision, color blindness
  • Hearing: Deaf or hard of hearing
  • Motor: Limited mouse or touch usage
  • Cognitive: Learning or memory challenges

Real-Life Example: Just like ramps help wheelchair users, accessibility helps users navigate websites.

Semantic HTML: The Foundation of Accessibility

  • <header> – Header section
  • <nav> – Navigation links
  • <main> – Main content
  • <section> – Content grouping
  • <article> – Independent content
  • <footer> – Footer

Semantic vs Non-Semantic HTML

Example: Semantic vs Non-Semantic Markup


<!-- ❌ Non-semantic -->
<div class="header">My Website</div>
<div class="nav">Home | About</div>

<!-- ✅ Semantic -->
<header>My Website</header>
<nav>
    <a href="#">Home</a>
    <a href="#">About</a>
</nav>

Alt Text for Images

Example: Accessible Image


<img src="logo.png" alt="CrackEase company logo">

Rule: Decorative images should use alt=""

ARIA (Accessible Rich Internet Applications)

Example: ARIA Attributes


<button aria-label="Close menu">✖</button>

<div role="alert">
    Form submitted successfully!
</div>
  • aria-label – Accessible name
  • role – Element purpose
  • Use ARIA only when semantic HTML is insufficient

Keyboard Accessibility

  • All controls must be focusable
  • Logical tab order
  • No keyboard traps

Best Practices

  • Use semantic HTML
  • Always provide alt text
  • Ensure keyboard navigation
  • Label form inputs
  • Follow WCAG guidelines

Pro Tip: Accessibility improves SEO, UX, and legal compliance.