Success Criterion 4.1.2: Name, Role, Value

<!-- Button: Role is "button" automatically -->
<button type="submit">Submit Order</button>

<!-- Link: Role is "link" automatically -->
<a href="/products">View Products</a>

<!-- Checkbox: Role, name, and checked state built-in -->
<label>
    <input type="checkbox" name="newsletter">
    Subscribe to newsletter
</label>

<!-- Select: Role and value built-in -->
<label for="country">Country</label>
<select id="country" name="country">
    <option value="us">United States</option>
    <option value="ca">Canada</option>
</select>

<!-- Custom toggle with all required information -->
<div role="button"
     tabindex="0"
     aria-pressed="false"
     aria-label="Dark mode"
     onclick="toggleDarkMode()"
     onkeydown="handleKeyPress(event)">
    <span class="toggle-icon"></span>
</div>

<script>
function toggleDarkMode() {
    const btn = document.querySelector('[aria-label="Dark mode"]');
    const isPressed = btn.getAttribute('aria-pressed') === 'true';
    btn.setAttribute('aria-pressed', !isPressed);
    // Update visual state...
}
</script>

<!-- Accordion header as button -->
<h3>
    <button aria-expanded="false" 
            aria-controls="section1-content"
            id="section1-header">
        Section 1: Getting Started
    </button>
</h3>
<div id="section1-content"
     role="region"
     aria-labelledby="section1-header"
     hidden>
    <p>Content goes here...</p>
</div>

<!-- Bad: Div acting as button with no role or name -->
<div onclick="submit()" class="btn">
    <i class="icon-check"></i>
</div>

<!-- Bad: Link without href (missing role) -->
<a onclick="navigate()">Products</a>

<!-- Bad: Custom checkbox without state -->
<div class="checkbox" onclick="toggle()">
    <span class="checkmark"></span>
    Accept terms
</div>

<!-- Bad: Icon button without accessible name -->
<button><i class="fa-trash"></i></button>

<!-- Bad: State change not communicated -->
<div class="dropdown open">...</div>