Accessibility Basics

Accessibility (often written a11y) means making your site usable by everyone, including people who use screen readers, keyboards or zoom. Good HTML gets you most of the way there.

Checklist

• Set the page language: <html lang="en">.
• Give every image a meaningful alt.
• Use headings in order, starting with one <h1>.
• Use real <button> and <a> elements, not clickable <div>s.
• Connect every input to a <label>.
• Write link text that makes sense alone.
• Use semantic tags: <header>, <nav>, <main>, <footer>.
• Make sure everything works with the Tab key alone.

<!-- inaccessible -->
<div onclick="save()">Save</div>

<!-- accessible -->
<button type="button" onclick="save()">Save</button>