Chapter 5: Accessibility

Accessibility (often abbreviated as a11y) ensures that websites work for everyone, including people with disabilities. It's not just about compliance—it's about creating better experiences for all users.

Why Accessibility Matters

Consider these statistics:

• ~15% of the world's population has some form of disability
• Many more have temporary or situational impairments
• Accessible sites often have better SEO and usability for everyone

Remember: Accessibility is a spectrum, not a checkbox. Every improvement helps.

Semantic HTML

The foundation of accessibility is semantic HTML:

<!-- Bad: Divs for everything -->
<div class="header">
    <div class="nav">
        <div class="nav-item">Home</div>
    </div>
</div>

<!-- Good: Semantic elements -->
<header>
    <nav aria-label="Main navigation">
        <a href="/">Home</a>
    </nav>
</header>

Key Semantic Elements

Element	Purpose
<header>	Introductory content
<nav>	Navigation links
<main>	Primary content
<article>	Self-contained content
<section>	Thematic grouping
<aside>	Tangentially related content
<footer>	Footer content

ARIA: When HTML Isn't Enough

ARIA (Accessible Rich Internet Applications) enhances semantics:

<!-- Role: Define what an element is -->
<div role="dialog" aria-labelledby="dialog-title">
    <h2 id="dialog-title">Confirm Action</h2>
    <p>Are you sure you want to proceed?</p>
</div>

<!-- State: Communicate dynamic changes -->
<button aria-expanded="false" aria-controls="menu">
    Open Menu
</button>
<ul id="menu" hidden>...</ul>

<!-- Properties: Provide additional context -->
<input
    type="search"
    aria-label="Search products"
    aria-describedby="search-help"
>
<p id="search-help">Enter product name or SKU</p>

Common ARIA Patterns

<!-- Live regions: Announce dynamic content -->
<div aria-live="polite" aria-atomic="true">
    Item added to cart
</div>

<!-- Error messages -->
<input
    type="email"
    aria-invalid="true"
    aria-describedby="email-error"
>
<p id="email-error" role="alert">
    Please enter a valid email address
</p>

Keyboard Navigation

All functionality must be accessible via keyboard:

// Custom keyboard navigation
document.addEventListener('keydown', (event) => {
    const { key } = event;

    switch (key) {
        case 'Escape':
            closeModal();
            break;
        case 'ArrowDown':
            focusNextItem();
            event.preventDefault();
            break;
        case 'ArrowUp':
            focusPreviousItem();
            event.preventDefault();
            break;
    }
});

Focus Management

/* Never hide focus entirely */
:focus {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
}

/* Use :focus-visible for mouse users */
:focus:not(:focus-visible) {
    outline: none;
}

:focus-visible {
    outline: 2px solid var(--color-focus);
}

// Manage focus when content changes
function openModal() {
    modal.hidden = false;
    modal.querySelector('[autofocus]').focus();
}

function closeModal() {
    modal.hidden = true;
    triggerButton.focus(); // Return focus to trigger
}

Color and Contrast

Ensure sufficient color contrast:

Context	Minimum Ratio (WCAG AA)
Normal text	4.5:1
Large text (18px+ bold, 24px+)	3:1
UI components	3:1

/* Good contrast */
.text {
    color: #1a1a1a;
    background: #ffffff;
    /* Contrast ratio: 16.1:1 */
}

/* Don't rely on color alone */
.error {
    color: #dc2626;
    border-left: 4px solid #dc2626;
}

.error::before {
    content: "⚠ Error: ";
    font-weight: bold;
}

Images and Media

<!-- Informative images need alt text -->
<img src="chart.png" alt="Sales increased 25% in Q4 2024">

<!-- Decorative images should be hidden -->
<img src="decorative.svg" alt="" role="presentation">

<!-- Complex images need longer descriptions -->
<figure>
    <img src="diagram.png" alt="System architecture diagram" aria-describedby="diagram-desc">
    <figcaption id="diagram-desc">
        The system consists of three main components:
        the API gateway, the processing service, and the database layer...
    </figcaption>
</figure>

<!-- Video with captions -->
<video controls>
    <source src="tutorial.mp4" type="video/mp4">
    <track kind="captions" src="captions.vtt" srclang="en" label="English">
</video>

Forms

Accessible forms are crucial:

<form>
    <div class="field">
        <label for="name">Full Name *</label>
        <input
            type="text"
            id="name"
            name="name"
            required
            aria-required="true"
            autocomplete="name"
        >
    </div>

    <fieldset>
        <legend>Notification Preferences</legend>

        <div>
            <input type="checkbox" id="email-notify" name="notify" value="email">
            <label for="email-notify">Email notifications</label>
        </div>

        <div>
            <input type="checkbox" id="sms-notify" name="notify" value="sms">
            <label for="sms-notify">SMS notifications</label>
        </div>
    </fieldset>

    <button type="submit">Subscribe</button>
</form>

Testing for Accessibility

Automated Testing

// Example with axe-core
import { axe } from 'axe-core';

async function runAccessibilityTests() {
    const results = await axe.run();
    console.log('Violations:', results.violations);
}

Manual Testing Checklist

• Navigate the entire page using only keyboard
• Test with a screen reader (VoiceOver, NVDA)
• Zoom to 200% and verify layout
• Check with Windows High Contrast mode
• Verify all images have appropriate alt text
• Confirm form errors are announced

Summary

Building accessible websites requires:

• Semantic HTML as the foundation
• ARIA for enhanced semantics where needed
• Full keyboard navigation support
• Sufficient color contrast
• Alternative text for images
• Accessible forms with proper labeling
• Regular testing with assistive technologies

Final Thought: Accessibility benefits everyone. Curb cuts help wheelchair users, but also parents with strollers, travelers with luggage, and delivery workers with carts. Digital accessibility works the same way.

---

Conclusion

Congratulations on completing "The Art of Web Development"! You've learned:

1. The foundational triad of HTML, CSS, and JavaScript
2. Modern CSS layout techniques with Flexbox and Grid
3. JavaScript essentials for interactive applications
4. Performance optimization strategies
5. Accessibility best practices for inclusive design

The web is constantly evolving, but these fundamentals remain constant. Master them, and you'll be prepared for whatever comes next.

Happy coding!