<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page Title — Site Name</title>
    <meta name="description" content="Page description for SEO">
</head>
<body>
    <header>
        <nav aria-label="Main navigation">
            <ul>
                <li><a href="/" aria-current="page">Home</a></li>
                <li><a href="/products">Products</a></li>
                <li><a href="/about">About</a></li>
            </ul>
        </nav>
    </header>
    
    <main>
        <article>
            <h1>Article Title</h1>
            <p>Content...</p>
            
            <section aria-labelledby="features-heading">
                <h2 id="features-heading">Features</h2>
                <p>Section content...</p>
            </section>
        </article>
        
        <aside aria-label="Related articles">
            <h2>Related</h2>
            <ul>...</ul>
        </aside>
    </main>
    
    <footer>
        <nav aria-label="Footer navigation">...</nav>
        <p>&copy; 2024 Company Name</p>
    </footer>
</body>
</html>

<!-- CORRECT: logical hierarchy -->
<h1>Page Title</h1>
    <h2>Section A</h2>
        <h3>Subsection A.1</h3>
        <h3>Subsection A.2</h3>
    <h2>Section B</h2>

<!-- WRONG: skipping levels -->
<h1>Title</h1>
<h3>Subsection</h3>  <!-- skipped h2! -->
<h5>Detail</h5>       <!-- skipped h3, h4! -->

<!-- Rule 1: Don't use ARIA if native HTML works -->
<!-- BAD -->
<div role="button" tabindex="0" onclick="submit()">Submit</div>
<!-- GOOD -->
<button type="submit">Submit</button>

<!-- Rule 2: Use ARIA for custom widgets -->
<div role="tablist">
    <button role="tab" aria-selected="true" aria-controls="panel-1">Tab 1</button>
    <button role="tab" aria-selected="false" aria-controls="panel-2">Tab 2</button>
</div>
<div role="tabpanel" id="panel-1">Content 1</div>
<div role="tabpanel" id="panel-2" hidden>Content 2</div>

<!-- Rule 3: Label everything interactive -->
<button aria-label="Close dialog">×</button>
<input type="search" aria-label="Search products">
<nav aria-label="Breadcrumb">...</nav>

<!-- Polite: announced when user is idle -->
<div aria-live="polite" aria-atomic="true">
    3 items in cart
</div>

<!-- Assertive: interrupts current speech -->
<div aria-live="assertive" role="alert">
    Error: Payment failed. Please try again.
</div>

<!-- Status: polite + role="status" -->
<div role="status">
    Showing 1-10 of 42 results
</div>

<form>
    <!-- Always associate labels with inputs -->
    <div>
        <label for="email">Email address</label>
        <input type="email" id="email" name="email" 
               required aria-describedby="email-help email-error">
        <p id="email-help">We'll never share your email.</p>
        <p id="email-error" role="alert" hidden>Please enter a valid email.</p>
    </div>
    
    <!-- Fieldset for grouped inputs -->
    <fieldset>
        <legend>Shipping method</legend>
        <label>
            <input type="radio" name="shipping" value="standard"> Standard (5-7 days)
        </label>
        <label>
            <input type="radio" name="shipping" value="express"> Express (1-2 days)
        </label>
    </fieldset>
    
    <!-- Accessible error summary -->
    <div role="alert" aria-labelledby="error-heading" hidden>
        <h2 id="error-heading">Please fix the following errors:</h2>
        <ul>
            <li><a href="#email">Email is required</a></li>
        </ul>
    </div>
    
    <button type="submit">Place Order</button>
</form>

<!-- Focus management for modals -->
<dialog id="modal" aria-labelledby="modal-title">
    <h2 id="modal-title">Confirm Action</h2>
    <p>Are you sure?</p>
    <button autofocus>Confirm</button>  <!-- auto-focus first action -->
    <button>Cancel</button>
</dialog>

<!-- Skip navigation link (first focusable element) -->
<a href="#main-content" class="skip-link">Skip to main content</a>

/* Visible focus indicators (NEVER remove without replacement) */
:focus-visible {
    outline: 3px solid #4A90D9;
    outline-offset: 2px;
}

/* Skip link — hidden until focused */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    z-index: 100;
}
.skip-link:focus {
    top: 0;
}

<!-- Informative image — describe the content -->
<img src="chart.png" alt="Sales increased 40% from Q1 to Q2 2024">

<!-- Decorative image — empty alt -->
<img src="divider.svg" alt="">

<!-- Complex image — longer description -->
<figure>
    <img src="architecture.png" alt="System architecture diagram" 
         aria-describedby="arch-desc">
    <figcaption id="arch-desc">
        Three microservices communicate via message queue...
    </figcaption>
</figure>

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