HTML Accessibility: Best Practices, Attributes, and Examples

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Accessible HTML Architecture</title>
    <style>
        /* Visible Keyboard Focus Outline (WCAG 2.4.7) */
        a:focus-visible, button:focus-visible { outline: 3px solid #2563eb; outline-offset: 2px; }
        .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
    </style>
</head>
<body>
    <!-- 1. Accessible Skip Link -->
    <a href="#mainContent" class="visually-hidden" style="position: static; width: auto; height: auto;">Skip to content</a>

    <!-- 2. Accessible Icon Button with aria-label -->
    <button type="button" aria-label="Search website content" style="background: none; border: 1px solid #cbd5e1; padding: 8px 12px; border-radius: 6px; cursor: pointer;">
        <span aria-hidden="true">&#128269;</span>
    </button>

    <!-- 3. Accessible Dropdown Accordion with aria-expanded -->
    <div>
        <button type="button" id="faqBtn" aria-expanded="false" aria-controls="faqAnswer">
            What is Web Accessibility?
        </button>
        <div id="faqAnswer" hidden style="padding: 10px; background: #f8fafc;">
            Accessibility ensures everyone can use your website seamlessly.
        </div>
    </div>

    <!-- 4. Dynamic Live Region for Asynchronous Alerts -->
    <div aria-live="polite" id="statusMessage" style="margin-top: 15px; color: #16a34a; font-weight: bold;"></div>

    <script>
        const btn = document.getElementById('faqBtn');
        const ans = document.getElementById('faqAnswer');
        btn.addEventListener('click', () => {
            const isExpanded = btn.getAttribute('aria-expanded') === 'true';
            btn.setAttribute('aria-expanded', !isExpanded);
            ans.hidden = isExpanded;
        });
    </script>
</body>
</html>