HTML Accessibility

HTML Accessibility: Building Inclusive Web Experiences for All Users

HTML accessibility (a11y) is the practice of designing and coding web pages so that people with visual, auditory, motor, or cognitive disabilities can perceive, navigate, and interact with web applications effectively.

Accessibility Foundations and WAI-ARIA

Accessible HTML relies on semantic HTML tags, proper keyboard focus management, alt text for images, and ARIA attributes when custom UI controls are built:

<!-- Accessible image with descriptive alt text -->
<img src="chart.webp" alt="Bar chart showing Q3 revenue growth up by 25%">

<!-- Accessible button with ARIA attributes for screen readers -->
<button aria-expanded="false" aria-label="Toggle Navigation Menu">
    <span class="icon"></span>
</button>

Core accessibility pillars:

1. Semantic HTML First: Built-in HTML tags (<button>, <a href>, <input>) have native keyboard focus and screen reader support.
2. Text Alternatives: Provide alt text for images and visual media so visually impaired screen reader users hear descriptions.
3. Keyboard Navigation: Ensure all interactive elements can be operated using Tab and Enter/Space keys.
4. WAI-ARIA Attributes: Add aria-label, aria-expanded, or role attributes to clarify dynamic states on non-standard UI components.

Accessibility Tree Flow

flowchart TD
    A["HTML Code"] --> B["DOM Tree"]
    B --> C["Browser Accessibility Tree"]
    C --> D["Screen Reader / Assistive Audio Devices"]

Practical Code Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML Accessibility Demonstration</title>
</head>
<body style="font-family: system-ui, sans-serif; background-color: #0f172a; color: #f8fafc; padding: 2rem;">

    <h2>Accessible Form Control</h2>

    <form style="background-color: #1e293b; padding: 1.5rem; border-radius: 8px; max-width: 450px;">
        <!-- Accessible label linked to input -->
        <label for="user-name" style="display: block; margin-bottom: 0.5rem; font-weight: bold;">
            Full Name <span style="color: #ef4444;" aria-hidden="true">*</span>
        </label>
        
        <input 
            type="text" 
            id="user-name" 
            name="username" 
            required 
            aria-required="true"
            aria-describedby="name-hint"
            style="width: 100%; padding: 10px; border-radius: 4px; border: 1px solid #334155; margin-bottom: 0.5rem;">
            
        <p id="name-hint" style="color: #94a3b8; font-size: 0.85rem; margin: 0;">Enter your first and last legal name.</p>
    </form>

</body>
</html>

Best Practices

• Never remove focus outlines without adding custom focus styles: Ensure active interactive controls show a clear visual outline (:focus-visible) when navigated via keyboard.
• Maintain a 4.5:1 color contrast ratio: Verify that foreground text colors contrast sufficiently against surface background colors (WCAG 2.1 AA level).
• Use <button> for clickable actions and <a href> for navigation: Never attach JS click handlers to static <div> tags without keyboard focus handling.

Self-Check Challenge

Create a <button> element that includes aria-label="Close dialog modal" and aria-expanded="true"!