Accessible HTML

Introduction

Some visitors cannot see the screen, so a screen reader reads the page aloud. Some cannot use a mouse, so they use only the keyboard. Some have poor eyesight, are colour blind, or are using a phone in bright sun. Accessibility means building pages that work for all of them. Good HTML does most of the work for you.

The simple explanation

Accessible HTML uses the right element for the job, so browsers and assistive tools know what everything is.

A real button can be reached with the Tab key, activated with Enter or Space, and is announced as "button". A div that merely looks like a button gets none of that for free.

Use native elements first

Reach for the element that already does the job:

• button for actions, a for links to somewhere.
• label for every form control.
• Headings in order, and landmarks such as header, nav, main and footer.
• ul and ol for lists, table with th for data.

This is the first rule of ARIA: if a native HTML element can do it, use that instead of adding ARIA.

Labels and alt text

• Every img needs alt. Use alt="" for decoration.
• Every form control needs a label.
• A link or button needs text that makes sense out of context. "Read more" repeated ten times is confusing.

aria-label gives an element an accessible name when its visible content is not enough, such as an icon-only button.

Keyboard and focus

Press Tab in the result below. Each focusable element gets a visible outline. Never remove that outline unless you replace it with something just as clear.

Two rules:

• Do not use a positive tabindex (like tabindex="3"). It breaks the natural order.
• tabindex="0" makes a non-interactive element focusable. Use it rarely.

Colour and contrast

Text needs enough contrast against its background. The common WCAG AA target is a contrast ratio of at least 4.5 to 1 for normal text. Never use colour as the only way to show something, for example "required fields are red".

Live updates

When something changes on the page without a reload, such as a status message, screen readers may not notice. An element with aria-live="polite" tells them to announce changes politely.

Try it yourself

This page has three problems for assistive technology. Fix them: give the image alt text, connect the label to the input, and change the clickable div into a real button.

Summary

• Accessible HTML starts with the right native element.
• Label controls, write good alt text and link text, and keep keyboard focus visible.
• Aim for enough colour contrast, and never rely on colour alone.
• Add ARIA only when native HTML cannot do the job.