HTML Accessibility

HTML Accessibility: Inclusive Markup for Every Visitor

Web accessibility (often shortened to a11y) ensures people with visual, motor, auditory, or cognitive disabilities can read, navigate, and interact with your website effortlessly. Most accessibility wins start directly in clean HTML before you write a single line of ARIA or JavaScript.

Five Practical HTML Accessibility Rules

1. Use Native Interactive Controls: Use button for actions and a href for navigation so keyboard Tab, Enter, and Space keys work automatically.
2. Label Every Form Input: Pair every input, select, and textarea with an explicit label for="..." element.
3. Write Meaningful Image Alt Text: Describe essential visuals concisely in alt, and set alt="" on purely decorative icons.
4. Keep Logical Heading Order: Use a single h1 followed sequentially by h2 and h3 headings without skipping levels.
5. Declare Document Language: Include lang="en" (or your page's language code) on the root html tag so screen readers choose the right pronunciation engine.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Accessible Form & Navigation</title>
    <style>
        .skip-link { position: absolute; left: -9999px; }
        .skip-link:focus { position: static; background: #1e293b; color: #fff; padding: 8px 12px; display: inline-block; }
        button:focus-visible, a:focus-visible { outline: 3px solid #2563eb; outline-offset: 2px; }
    </style>
</head>
<body>
    <a href="#main-content" class="skip-link">Skip to main content</a>
    <main id="main-content">
        <h1>Account Settings</h1>
        <form>
            <label for="display-name">Display Name</label>
            <input id="display-name" name="display_name" type="text" required aria-describedby="name-hint">
            <p id="name-hint">Shown publicly on your profile card.</p>
            <button type="submit">Save Changes</button>
        </form>
    </main>
</body>
</html>

Using ARIA Responsibly

ARIA attributes like aria-label, aria-expanded, and aria-live="polite" enhance custom widgets such as modal dialogs or accordions. However, the first rule of ARIA is never to use ARIA when a native HTML element already does the job natively.

Common Mistakes to Avoid

• Writing outline: none in CSS without a replacement focus style: Removing the focus ring leaves keyboard-only users unable to see which button is selected. Use :focus-visible instead.
• Using color alone to signal errors: Pair red input borders with an error icon and clear text explanation for color-blind visitors.
• Putting icon-only buttons without aria-label: A close button containing only an SVG X needs aria-label="Close dialog" so screen readers announce its purpose.

Frequently Asked Questions

What is a skip-to-content link?

It is a link placed at the top of body that becomes visible on keyboard Tab focus, letting users bypass long navigation bars straight to main.

How can I quickly test my page's HTML accessibility?

Unplug your mouse and navigate your entire page using only Tab, Shift+Tab, Enter, and Space, then run Lighthouse Accessibility in browser DevTools.