HTML Accessibility Best Practices

Why Accessibility (a11y)?

Accessible HTML ensures everyone — including users with screen readers or keyboard-only navigation — can use your site. It's also a legal requirement in many countries and helps SEO.

1. Always Use alt Text

<img src="cat.jpg" alt="A ginger cat sleeping">
<img src="divider.png" alt="">  <!-- decorative: empty alt -->

2. Label Every Input

<label for="email">Email</label>
<input id="email" type="email">

3. Use Semantic Tags & Heading Order

Use <nav>, <main>, <button>, and keep headings in order (h1 → h2 → h3).

4. ARIA When Needed

<button aria-label="Close menu">✕</button>
<div role="alert">Form saved!</div>

5. Keyboard & Contrast

• All interactive elements reachable by Tab.
• Visible focus outlines.
• Text contrast ratio of at least 4.5:1.

FAQs

What is ARIA?

Accessible Rich Internet Applications — attributes that describe elements to assistive tech. Use native HTML first. More in our HTML guides.

How do I test accessibility?

Use Lighthouse, axe DevTools, or navigate with only your keyboard.