Responsive Accessibility — Complete Guide

<header role="banner">
    <nav aria-label="Main navigation" role="navigation">
        <button
            class="nav-toggle"
            aria-expanded="false"
            aria-controls="nav-menu"
            aria-label="Open menu"
        >
            <span class="hamburger-icon" aria-hidden="true">&#9776;</span>
        </button>
        <ul id="nav-menu" class="nav-menu" role="list" hidden>
            <li role="listitem"><a href="/">Home</a></li>
            <li role="listitem"><a href="/about">About</a></li>
            <li role="listitem"><a href="/services">Services</a></li>
            <li role="listitem"><a href="/contact">Contact</a></li>
        </ul>
    </nav>
</header>

<style>
/* Responsive navigation */
.nav-toggle {
    display: block;
    min-width: 44px;
    min-height: 44px;
}

.nav-menu {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.nav-menu a {
    display: block;
    padding: 0.75rem 1rem;
    min-height: 44px;
    display: flex;
    align-items: center;
}

@media (min-width: 768px) {
    .nav-toggle {
        display: none;
    }
    .nav-menu {
        flex-direction: row;
        gap: 1rem;
    }
    .nav-menu[hidden] {
        display: flex;  /* Override hidden on desktop */
    }
    .nav-menu a {
        padding: 0.5rem 1rem;
    }
}

/* Focus indicators */
:focus-visible {
    outline: 3px solid #0066CC;
    outline-offset: 2px;
}

/* Remove focus outline for mouse users only */
:focus:not(:focus-visible) {
    outline: none;
}
</style>

<script>
const toggle = document.querySelector('.nav-toggle');
const menu = document.getElementById('nav-menu');

toggle.addEventListener('click', () => {
    const expanded = toggle.getAttribute('aria-expanded') === 'true' ? false : true;
    toggle.setAttribute('aria-expanded', expanded);
    toggle.setAttribute('aria-label', expanded ? 'Close menu' : 'Open menu');
    menu.hidden = !expanded;

    if (expanded) {
        // Focus first link when menu opens
        const firstLink = menu.querySelector('a');
        if (firstLink) firstLink.focus();
    } else {
        // Return focus to toggle when menu closes
        toggle.focus();
    }
});

// Close menu on Escape
menu.addEventListener('keydown', (e) => {
    if (e.key === 'Escape' && !menu.hidden) {
        toggle.click();
    }
});

// Close menu on click outside
document.addEventListener('click', (e) => {
    if (!menu.hidden && !e.target.closest('nav')) {
        toggle.click();
    }
});
</script>

/* Zoom-safe responsive design */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

meta[name="viewport"] {
    content: "width=device-width, initial-scale=1";
}
/* Do NOT use user-scalable=no or maximum-scale=1 */

/* Fluid layouts accommodate zoom */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem;
}

/* Avoid fixed heights that clip content */
.card {
    min-height: auto;      /* Let content grow */
    overflow: visible;      /* Don't clip zoomed content */
}

/* Text should reflow when zoomed */
p {
    max-width: 65ch;       /* Optimal line length at default zoom */
    /* At 200% zoom, text reflows to fit the viewport */
}

/* Buttons should not overflow on zoom */
button, a {
    word-break: normal;
    overflow-wrap: normal;
    white-space: normal;    /* Allow buttons to wrap text */
    min-height: 44px;
}

/* Prevent horizontal scroll on zoom */
img, video, iframe {
    max-width: 100%;
    height: auto;
}

/* Forms must stay usable at 200% zoom */
input, select, textarea {
    max-width: 100%;
    font-size: 1rem;
}

/* Respect user motion preferences */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    /* Still allow essential animations (loading spinners) */
    .essential-animation {
        animation-duration: 2s !important;
    }

    /* Off-canvas: instant instead of sliding */
    .offcanvas-nav {
        transition: none;
    }

    /* Parallax: disable movement */
    .parallax-section {
        transform: none !important;
    }
}

/* Smooth scroll only when user allows */
@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}