QUALITY

HTML Accessibility Basics

Create pages that work with keyboards, screen readers and different visual needs.

After this lessonApply labels, alt text, landmarks and logical focus order.

How it works

Accessibility starts with correct native HTML. Buttons should be buttons, links should navigate, form controls should have labels and images should have meaningful alternatives.

Keyboard users need a visible focus state and a logical order. Do not remove focus outlines unless you replace them with an equally clear indicator.

REAL WORK

An internal app can have the same accessibility needs as a public site, especially when many people use it every day.

SYNTAX

The pattern

<button type="button">Run comparison</button>
<label for="file">Choose file</label>

Example

<nav aria-label="Main navigation">
  <a href="/tools/">Tools</a>
</nav>

TRY IT

Edit and preview

Change the HTML on the left. The sandboxed preview updates on the right.

<nav aria-label="Main navigation">
  <a href="/tools/">Tools</a>
</nav>

QUICK CHECK

What should trigger an action but not navigate?

Progress is stored only in this browser. No account required.