Accessibility

Code

<!-- Semantic + ARIA -->
<nav aria-label="Main navigation">
    <ul role="menubar">
        <li role="menuitem"><a href="/" aria-current="page">Home</a></li>
        <li role="menuitem"><a href="/about">About</a></li>
    </ul>
</nav>

<!-- Form accessibility -->
<form>
    <div>
        <label for="username">Username</label>
        <input type="text" id="username" name="username"
               aria-required="true"
               aria-describedby="username-help"
               aria-invalid="false">
        <span id="username-help" class="help-text">
            3-20 characters
        </span>
    </div>

    <div role="alert" id="error-msg" aria-live="assertive">
        <!-- Error message dynamically inserted -->
    </div>

    <button type="submit" aria-busy="false">
        <span aria-hidden="true">→</span>
        Submit
    </button>
</form>

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

<!-- Loading state -->
<div role="status" aria-live="polite" aria-busy="true">
    <span class="sr-only">Loading...</span>
</div>

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

<!-- Screen reader only -->
<span class="sr-only">Additional description text</span>

<style>
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.skip-link {
    position: absolute;
    top: -40px;
    transition: top 0.3s;
}
.skip-link:focus { top: 0; }
</style>

Explanation

ARIA attributes enhance accessibility; aria-label/aria-describedby provide descriptions; aria-live notifies dynamic updates.

More HTML Snippets