♿ Web Accessibility

<!-- ✅ Good: Semantic and accessible -->
<button>Click Me</button>
<nav>
    <ul>
        <li><a href="/">Home</a></li>
    </ul>
</nav>

<!-- ❌ Bad: Not accessible -->
<div onclick="handleClick()">Click Me</div>
<div class="nav">
    <span><a href="/">Home</a></span>
</div>

<!-- Descriptive alt text -->
<img src="dog.jpg" alt="Golden retriever playing with a ball">

<!-- Decorative image (empty alt) -->
<img src="decoration.jpg" alt="">

<!-- Complex image with description -->
<img src="chart.jpg" alt="Sales chart showing 50% growth">
<p>Detailed description of the chart data...</p>

<!-- Logo -->
<img src="logo.png" alt="Company Name - Home">

<!-- ARIA labels -->
<button aria-label="Close dialog">×</button>
<div aria-label="Main navigation">...</div>

<!-- ARIA roles -->
<div role="alert">Error: Please fill all fields</div>
<div role="navigation">...</div>
<div role="search">
    <input type="text" aria-label="Search">
</div>

<!-- ARIA states -->
<button aria-expanded="false">Menu</button>
<div aria-hidden="true">Hidden content</div>
<input aria-required="true">
<div aria-live="polite">Dynamic content</div>

<!-- Associate labels with inputs -->
<form>
    <label for="name">Name:</label>
    <input type="text" id="name" required>
    
    <label for="email">Email:</label>
    <input type="email" id="email" 
           aria-required="true"
           aria-describedby="email-help">
    <span id="email-help">We'll never share your email</span>
    
    <!-- Fieldset for radio groups -->
    <fieldset>
        <legend>Choose size:</legend>
        <input type="radio" id="small" name="size" value="small">
        <label for="small">Small</label>
        
        <input type="radio" id="large" name="size" value="large">
        <label for="large">Large</label>
    </fieldset>
    
    <button type="submit">Submit Form</button>
</form>

<!-- Keyboard accessible elements -->
<button tabindex="0">Focusable Button</button>

<!-- Skip navigation link -->
<a href="#main-content" class="skip-link">
    Skip to main content
</a>

<main id="main-content">
    <!-- Main content -->
</main>

<!-- Focus management -->
<div tabindex="-1">Not in tab order</div>
<button tabindex="1">Focus order (avoid!)</button>