Accessibility (A11Y)

Optimizing for Screen Readers

Make your websites accessible to blind and visually impaired users. Learn how screen readers work and how to optimize your HTML for the best screen reader experience.

How Screen Readers Work

Screen readers convert text and page structure into speech or braille. They navigate through HTML semantics, ARIA attributes, and heading hierarchies.

Page Structure for Screen Readers

Landmarks for Navigation

HTML
<!-- Screen readers can jump between landmarks --&gt;
<header role="banner">
    <nav role="navigation" aria-label="Main navigation">
        <!-- Navigation --&gt;
    </nav>
</header>

<main role="main">
    <!-- Main content --&gt;
</main>

<aside role="complementary">
    <!-- Sidebar --&gt;
</aside>

<footer role="contentinfo">
    <!-- Footer --&gt;
</footer>

<!-- Users can: --&gt;
<!-- - List all landmarks --&gt;
<!-- - Jump directly to main content --&gt;
<!-- - Skip repetitive navigation --&gt;

Skip Links

HTML
<body>
    <!-- Skip link (usually hidden visually) --&gt;
    <a href="#main-content" class="skip-link">
        Skip to main content
    </a>
    
    <header>
        <nav><!-- Lots of navigation links --&gt;</nav>
    </header>
    
    <main id="main-content">
        <!-- Main content here --&gt;
    </main>
</body>

<style>
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: #000;
    color: white;
    padding: 8px;
    text-decoration: none;
    z-index: 100;
}

.skip-link:focus {
    top: 0; /* Show on keyboard focus */
}
</style>

Heading Hierarchy

Screen reader users often navigate by headings. Proper hierarchy is crucial.

âœ… Good Heading Structure
HTML
<h1>Page Title</h1>

<h2>Section 1</h2>
<p>Content...</p>

<h3>Subsection 1.1</h3>
<p>Content...</p>

<h3>Subsection 1.2</h3>
<p>Content...</p>

<h2>Section 2</h2>
<p>Content...</p>

<!-- Users can: --&gt;
<!-- - List all headings --&gt;
<!-- - Jump to any heading --&gt;
<!-- - Understand content structure --&gt;

âŒ Bad: Skipping Levels
HTML
<h1>Page Title</h1>
<h4>Subsection</h4>  <!-- âŒ Skipped h2 and h3 --&gt;
<h2>Section</h2>     <!-- âŒ Wrong order --&gt;

Links and Buttons

Descriptive Link Text

âŒ Bad: Vague Link Text
HTML
<a href="/report.pdf">Click here</a>
<a href="/more">Read more</a>
<a href="/learn">Learn more</a>

<!-- Out of context, these mean nothing! --&gt;
<!-- Screen readers can list all links --&gt;

âœ… Good: Descriptive Links
HTML
<a href="/report.pdf">Download 2024 Annual Report (PDF, 2MB)</a>
<a href="/features">Read more about our features</a>
<a href="/html-guide">Learn more about HTML basics</a>

<!-- Clear and meaningful out of context --&gt;

Button vs Link

<!-- Use links for navigation --&gt;
<a href="/page">Go to page</a>

<!-- Use buttons for actions --&gt;
<button onclick="saveData()">Save</button>
<button type="submit">Submit form</button>

<!-- Screen readers announce role differently:
   "Link: Go to page"
   "Button: Save" --&gt;

Images and Alt Text

Informative Images

<!-- Describe what's in the image --&gt;
<img src="chart.png" 
     alt="Bar chart showing 45% increase in sales from Q3 to Q4 2024">

<!-- Include text from image --&gt;
<img src="quote.png" 
     alt="Quote: The best way to predict the future is to invent it">

Decorative Images

<!-- Empty alt for decorative images --&gt;
<img src="decorative-line.png" alt="">

<!-- Or use aria-hidden --&gt;
<img src="decoration.png" aria-hidden="true" alt="">

<!-- Screen reader skips these --&gt;

Complex Images

<!-- Use longdesc or detailed description --&gt;
<img src="complex-diagram.png" 
     alt="Website architecture diagram"
     aria-describedby="diagram-desc">

<div id="diagram-desc">
    <p>The diagram shows three layers:</p>
    <ul>
        <li>Frontend: React application</li>
        <li>Backend: Node.js API server</li>
        <li>Database: PostgreSQL database</li>
    </ul>
</div>

Forms for Screen Readers

Labels and Instructions

HTML
<!-- Always use labels --&gt;
<label for="email">Email address:</label>
<input type="email" id="email" name="email" required>

<!-- Provide instructions --&gt;
<label for="password">
    Password:
    <span class="help-text">(Must be 8+ characters)</span>
</label>
<input type="password" 
       id="password" 
       aria-describedby="password-help">
<div id="password-help">
    Must contain at least one number and one uppercase letter
</div>

Error Messages

HTML
<label for="email">Email:</label>
<input type="email" 
       id="email" 
       aria-invalid="true"
       aria-describedby="email-error">
<div id="email-error" role="alert">
    Please enter a valid email address
</div>

<!-- role="alert" makes it announced immediately --&gt;

Grouping Related Fields

HTML
<fieldset>
    <legend>Contact Information</legend>
    
    <label for="name">Name:</label>
    <input type="text" id="name">
    
    <label for="email">Email:</label>
    <input type="email" id="email">
</fieldset>

<!-- Screen reader announces: --&gt;
<!-- "Contact Information, Name, edit text" --&gt;

Tables for Screen Readers

HTML
<table>
    <caption>Monthly Sales Report</caption>
    <thead>
        <tr>
            <th scope="col">Month</th>
            <th scope="col">Sales</th>
            <th scope="col">Growth</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">January</th>
            <td>$45,000</td>
            <td>+12%</td>
        </tr>
    </tbody>
</table>

<!-- Screen reader announces: --&gt;
<!-- "Table: Monthly Sales Report, 3 columns, 2 rows" --&gt;
<!-- "Month column header, January row header, $45,000" --&gt;

Dynamic Content

Live Regions

HTML
<!-- Status messages --&gt;
<div aria-live="polite" aria-atomic="true">
    <p id="status">Ready</p>
</div>

<script>
// Updates are announced
status.textContent = 'Saving...';
setTimeout(() => {
    status.textContent = 'Saved successfully!';
}, 2000);
</script>

<!-- aria-live values: --&gt;
<!-- polite: Wait for user to pause --&gt;
<!-- assertive: Interrupt immediately (use sparingly!) --&gt;
<!-- off: No announcements --&gt;

Loading States

HTML
<button aria-busy="false" id="submit-btn">
    Submit
</button>

<script>
button.onclick = async () => {
    button.setAttribute('aria-busy', 'true');
    button.textContent = 'Loading...';
    
    await submitForm();
    
    button.setAttribute('aria-busy', 'false');
    button.textContent = 'Submit';
};
</script>

Testing with Screen Readers

NVDA Basics (Windows)

Insert + Down Arrow - Read from cursor
Insert + T - Read title
H - Next heading
Shift + H - Previous heading
K - Next link
F - Next form field
T - Next table
D - Next landmark
Insert + F7 - List all elements

VoiceOver Basics (Mac)

Cmd + F5 - Toggle VoiceOver
VO + A - Start reading
VO + Right/Left Arrow - Navigate
VO + Cmd + H - Next heading
VO + Cmd + L - Next link
VO + U - Rotor (list elements)

VO = Control + Option

Common Pitfalls

âŒ Pitfall 1: CSS-Only Content

CSS
.icon::before {
    content: "Important: ";
}

<!-- Screen readers may not announce ::before content --&gt;

âŒ Pitfall 2: Placeholder as Label

HTML
<input type="text" placeholder="Enter name">
<!-- âŒ No label! Placeholder disappears on input --&gt;

âŒ Pitfall 3: Div/Span Buttons

HTML
<div onclick="submit()">Submit</div>
<!-- âŒ Not accessible, no keyboard support --&gt;

âŒ Pitfall 4: Auto-playing Content

HTML
<video autoplay>
<!-- âŒ Disrupts screen reader users --&gt;

Best Practices Checklist

â˜‘ Use semantic HTML elements
â˜‘ Maintain logical heading hierarchy
â˜‘ Provide skip links
â˜‘ Use descriptive link text
â˜‘ Add alt text to all images
â˜‘ Label all form inputs
â˜‘ Use fieldset for related fields
â˜‘ Announce dynamic changes with aria-live
â˜‘ Make all interactive elements keyboard accessible
â˜‘ Test with actual screen readers
â˜‘ Avoid CSS-only important content
â˜‘ Don't auto-play media

What's Next?

Learn about keyboard navigation and focus management for accessible web applications.

Next: Keyboard Navigation â†’