How to make a page accessible

Short answer

Correct tags give most of the accessibility. Note: the image has alt, the field has a label, the button is a <button>:

<img src="/media/photo-200x200.jpg" alt="A pink rose in bloom" width="100">
<label>Email <input type="email"></label>
<button>Subscribe</button>

Such a page can be navigated with Tab, and a screen reader explains what is on it.

A short checklist

• Images: alt describes the meaning; decorative ones get an empty alt="".
• Forms: every field has a <label>, errors are described with text, not only with red color.
• Keyboard: everything works with Tab and Enter, and focus is visible (:focus-visible).
• Headings: one <h1>, then <h2>, <h3> in order, with no skipped levels for the sake of font size.
• Contrast: text reads well on its background, no gray on gray.
• Language: <html> has lang.

A label for an icon button

If an element has no visible text, it is labeled with the aria-label attribute:

<button aria-label="Close">✕</button>

How to check

Go through the page with the keyboard only, without a mouse. Then zoom to 200% — nothing should overlap or disappear. The Lighthouse audit built into the browser (F12) finds some of the remaining problems.

Common mistake

Instead of buttons and links, a <div> with a click handler is used, and then ARIA attributes are added to fix it. The rule is simple: if a suitable HTML tag exists, use it — <button>, <a>, <input> already work with the keyboard and screen readers.