loader

HTML Accessibility (a11y)

Why Accessibility Matters

Web accessibility ensures that people with disabilities can perceive, understand, navigate, and interact with websites. It's not just a nice-to-have feature—it's essential for inclusive web design.

Semantic HTML

Using semantic HTML elements helps screen readers understand your content structure.

❌ Bad Practice:

<div class="header">
    <div class="navigation">
        <div class="nav-item">Home</div>
    </div>
</div>

✅ Good Practice:

<header>
    <nav>
        <ul>
            <li><a href="/">Home</a></li>
        </ul>
    </nav>
</header>

ARIA Labels and Roles

ARIA attributes provide additional information to assistive technologies.

<button aria-label="Close dialog" aria-pressed="false">×</button>

<div role="alert" aria-live="polite">
    Form submitted successfully!
</div>

Accessible Forms

Forms should be easy to understand and navigate for all users.

<form>
    <label for="name">Name:</label>
    <input 
        id="name" 
        type="text" 
        aria-required="true"
        aria-describedby="name-help"
    >
    <span id="name-help">Please enter your full name</span>
</form>

Color and Contrast

Ensure sufficient color contrast and don't rely solely on color to convey information.

← Notice the icon and text combination

Keyboard Navigation

All interactive elements should be accessible via keyboard.

<div tabindex="0" role="button" 
    onkeypress="(e) => e.key === 'Enter' && handleClick()">
    Interactive Element
</div>

Accessibility Testing Tools

  • WAVE Web Accessibility Evaluation Tool
  • aXe by Deque
  • Chrome Lighthouse
  • NVDA or VoiceOver screen readers