Accessibility & ARIA

<header role="banner"> <!-- Equivalent to <header> at root --&gt;
<nav role="navigation"> <!-- Equivalent to <nav> --&gt;
<main role="main">      <!-- Equivalent to <main> --&gt;
<aside role="complementary"> <!-- Equivalent to <aside> --&gt;
<footer role="contentinfo">  <!-- Equivalent to <footer> at root --&gt;

<!-- A Tab Interface Blueprint --&gt;
<div role="tablist" aria-label="Project Sections">
    <button role="tab" 
            aria-selected="true" 
            aria-controls="panel-1" 
            id="tab-1">
        Overview
    </button>
    <button role="tab" 
            aria-selected="false" 
            aria-controls="panel-2" 
            id="tab-2" 
            tabindex="-1">
        Specifications
    </button>
</div>

<div id="panel-1" role="tabpanel" aria-labelledby="tab-1">
    <p>Section 1 Content...</p>
</div>
<div id="panel-2" role="tabpanel" aria-labelledby="tab-2" hidden>
    <p>Section 2 Content...</p>
</div>

<!-- Icon-only button --&gt;
<button aria-label="Close dialog">
    <svg>...</svg>
</button>

<!-- Search form --&gt;
<form role="search">
    <input type="search" aria-label="Search the website">
    <button aria-label="Submit search">🔍</button>
</form>

<h2 id="dialog-title">Confirm Delete</h2>
<div role="dialog" aria-labelledby="dialog-title">
    <p>Are you sure you want to delete this item?</p>
    <button>Cancel</button>
    <button>Delete</button>
</div>

<!-- Multiple labels --&gt;
<div id="billing-title">Billing Address</div>
<div id="name-label">Full Name</div>
<input type="text" aria-labelledby="billing-title name-label">

<label for="password">Password:</label>
<input type="password" 
       id="password" 
       aria-describedby="password-requirements">
<div id="password-requirements">
    Must be at least 8 characters with uppercase, lowercase, and number
</div>

<!-- Decorative icon --&gt;
<button>
    <svg aria-hidden="true">...</svg>
    Save
</button>

<!-- Font icon --&gt;
<button>
    <i class="fa fa-save" aria-hidden="true"></i>
    Save
</button>

<button aria-expanded="false" aria-controls="menu">
    Menu
</button>
<ul id="menu" hidden>
    <li><a href="/home">Home</a></li>
    <li><a href="/about">About</a></li>
</ul>

<script>
const button = document.querySelector('button');
const menu = document.getElementById('menu');

button.addEventListener('click', () => {
    const expanded = button.getAttribute('aria-expanded') === 'true';
    button.setAttribute('aria-expanded', !expanded);
    menu.hidden = expanded;
});
</script>

<!-- Polite: wait for screen reader to finish --&gt;
<div aria-live="polite" aria-atomic="true">
    <p{"&gt;"} 3 items in cart</p>
</div>

<!-- Assertive: interrupt immediately --&gt;
<div aria-live="assertive" role="alert">
    <p>Error: Payment failed</p>
</div>

<!-- Off: no announcement (default) --&gt;
<div aria-live="off">
    Regular content
</div>

<!-- These are keyboard-accessible by default: --&gt;
<a href="/page">Link</a>                    <!-- Tab, Enter --&gt;
<button>Button</button>                     <!-- Tab, Enter/Space --&gt;
<input type="text">                         <!-- Tab, typing --&gt;
<textarea></textarea>                       <!-- Tab, typing --&gt;
<select><option>...</option></select>       <!-- Tab, Arrow keys --&gt;

<div role="button" 
     tabindex="0" 
     onclick="handleClick(event)"
     onkeydown="handleKeyPress(event)">
    Custom Button
</div>

<script>
function handleClick(e) {
    console.log('Clicked!');
}

function handleKeyPress(e) {
    // Handle Enter and Space keys
    if (e.key === 'Enter' || e.key === ' ') {
        e.preventDefault();
        handleClick(e);
    }
}
</script>

<style>
[role="button"]:focus {
    outline: 2px solid #007bff;
    outline-offset: 2px;
}
</style>

<!-- tabindex="0": Include in natural tab order --&gt;
<div tabindex="0" role="button">Focusable</div>

<!-- tabindex="-1": Focusable by JavaScript, not Tab key --&gt;
<div tabindex="-1" id="skip-target">Skip link target</div>

<!-- tabindex="1+": AVOID! Disrupts natural tab order --&gt;
<input tabindex="1">  <!-- DON'T DO THIS --&gt;

<!-- Modal dialog focus management --&gt;
<button onclick="openDialog()">Open Dialog</button>

<div role="dialog" 
     aria-modal="true" 
     aria-labelledby="dialog-title" 
     hidden>
    <h2 id="dialog-title">Dialog Title</h2>
    <p>Dialog content</p>
    <button onclick="closeDialog()">Close</button>
</div>

<script>
let previousFocus;

function openDialog() {
    const dialog = document.querySelector('[role="dialog"]');
    const closeButton = dialog.querySelector('button');
    
    // Save current focus
    previousFocus = document.activeElement;
    
    // Show dialog
    dialog.hidden = false;
    
    // Move focus to dialog
    closeButton.focus();
    
    // Trap focus inside dialog
    dialog.addEventListener('keydown', trapFocus);
}

function closeDialog() {
    const dialog = document.querySelector('[role="dialog"]');
    
    // Hide dialog
    dialog.hidden = true;
    
    // Restore focus
    previousFocus.focus();
}

function trapFocus(e) {
    const dialog = e.currentTarget;
    const focusableElements = dialog.querySelectorAll(
        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
    );
    const firstElement = focusableElements[0];
    const lastElement = focusableElements[focusableElements.length - 1];
    
    if (e.key === 'Tab') {
        if (e.shiftKey && document.activeElement === firstElement) {
            e.preventDefault();
            lastElement.focus();
        } else if (!e.shiftKey && document.activeElement === lastElement) {
            e.preventDefault();
            firstElement.focus();
        }
    }
    
    if (e.key === 'Escape') {
        closeDialog();
    }
}
</script>

<body>
    <a href="#main-content" class="skip-link">Skip to main content</a>
    
    <header>
        <nav>
            <!-- Long navigation menu --&gt;
        </nav>
    </header>
    
    <main id="main-content" tabindex="-1">
        <!-- Main content --&gt;
    </main>
</body>

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

.skip-link:focus {
    top: 0;
}
</style>

<div class="accordion">
    <h3>
        <button aria-expanded="false" 
                aria-controls="panel1" 
                id="accordion1">
            Section 1
        </button>
    </h3>
    <div id="panel1" 
         role="region" 
         aria-labelledby="accordion1" 
         hidden>
        <p>Panel content...</p>
    </div>
    
    <!-- More sections... --&gt;
</div>

<script>
document.querySelectorAll('.accordion button').forEach(button => {
    button.addEventListener('click', () => {
        const expanded = button.getAttribute('aria-expanded') === 'true';
        const panel = document.getElementById(button.getAttribute('aria-controls'));
        
        button.setAttribute('aria-expanded', !expanded);
        panel.hidden = expanded;
    });
});
</script>

<button aria-describedby="tooltip">
    Help
</button>
<div id="tooltip" role="tooltip" hidden>
    This is helpful information
</div>

<script>
const button = document.querySelector('button');
const tooltip = document.getElementById('tooltip');

button.addEventListener('mouseenter', () => tooltip.hidden = false);
button.addEventListener('mouseleave', () => tooltip.hidden = true);
button.addEventListener('focus', () => tooltip.hidden = false);
button.addEventListener('blur', () => tooltip.hidden = true);
</script>

<div role="alert" aria-live="assertive" class="alert" hidden>
    <p>Your changes have been saved!</p>
    <button aria-label="Close notification">×</button>
</div>

<script>
function showAlert(message) {
    const alert = document.querySelector('[role="alert"]');
    alert.querySelector('p').textContent = message;
    alert.hidden = false;
    
    // Auto-dismiss after 5 seconds
    setTimeout(() => {
        alert.hidden = true;
    }, 5000);
}
</script>

<span style="color: red;">Required</span>
<span style="color: green;">Available</span>

<span style="color: red;">* Required</span>
<span style="color: green;">✓ Available</span>