Accessibility Basics: alt, Labels, Heading Order, ARIA

Building for Everyone

Web accessibility (often abbreviated a11y) means making your pages usable by people with disabilities — those who use screen readers, navigate by keyboard only, or have visual impairments. Good HTML is the foundation of an accessible page.

Core Accessibility Practices

• Alt text on images — Every <img> needs a descriptive alt attribute, or an empty alt="" if decorative.
• Labels on inputs — Every form control must have an associated <label>. Never rely on placeholder text alone.
• Logical heading order — Start with <h1>, then <h2>, and so on. Do not skip levels.
• Keyboard navigation — Interactive elements (<a>, <button>, <input>) are focusable by default. Do not remove the focus ring with CSS unless you replace it.
• Sufficient colour contrast — WCAG 2.1 requires at least 4.5:1 contrast for normal text (this is a CSS concern, but know the rule).
• Link text is descriptive — Avoid "click here" or "read more". Use text that describes the destination.

<!-- ARIA landmark roles (often redundant with semantic elements) -->
<nav aria-label="Main navigation">
  <ul>
    <li><a href="/">Home</a></li>
  </ul>
</nav>

<!-- ARIA label for an icon-only button -->
<button aria-label="Close dialog">
  <svg aria-hidden="true"><!-- X icon --></svg>
</button>

<!-- Live region announces dynamic changes to screen readers -->
<div role="alert" aria-live="polite">
  Your message has been sent.
</div>

<!-- Skip navigation link (hidden until focused) -->
<a href="#main-content" class="skip-link">Skip to main content</a>
<main id="main-content">
  <!-- page content -->
</main>

You can test basic accessibility without any tools: unplug your mouse and try navigating your page with only the Tab and Enter keys. If you get stuck, screen-reader users will too.