HTML Accessibility

HTML Accessibility

Accessibility (a11y) means making your website usable by EVERYONE, including people with disabilities. It's kindness you can code!

What is a11y?

"a11y" is a nickname: the letter a, 11 letters, the letter y. A-C-C-E-S-S-I-B-I-L-I-T-Y!

It's about building sites that work with screen readers, keyboards, and other assistive tools.

Why it matters

• 1 in 6 people has a disability.
• It's the law in many places.
• Accessible sites are better for everyone (clearer, faster, easier).
• Search engines like it too!

Tip 1: Use semantic HTML

Semantic tags tell assistive tools what things are:

<!-- Good: the browser knows this is a heading -->
<h1>My Title</h1>
<nav>...</nav>
<main>...</main>

Don't use <div> for everything!

Tip 2: Always use alt text

<img src="dog.jpg" alt="A happy dog running">

If the image is just decoration, use alt="" so screen readers skip it.

Tip 3: Use labels with inputs

<label for="name">Your name</label>
<input type="text" id="name" name="name">

Tip 4: Use headings in order

Don't skip from <h1> straight to <h4>. Keep a logical order.

Tip 5: Make links say where they go

<!-- Good -->
<a href="report.html">Read the annual report</a>

<!-- Bad -->
<a href="report.html">click here</a>

Tip 6: Use ARIA when needed

ARIA (Accessible Rich Internet Applications) adds extra info for assistive tools:

<button aria-label="Close the dialog">X</button>
<div role="alert">Something went wrong!</div>

• aria-label: a name for things with no text.
• role: what an element's job is.

But remember: semantic HTML first, ARIA only when needed!

Tip 7: Make it keyboard friendly

Everything interactive should work with the Tab key. Avoid trapping keyboard users.

Tip 8: Good contrast

Make sure text color and background color contrast well, so everyone can read it.

TL;DR

• Accessibility = usable by everyone.
• Use semantic HTML (<nav>, <main>, <h1>...).
• Always add alt to images and label to inputs.
• Keep headings in order; describe links clearly.
• Use ARIA (aria-label, role) when HTML isn't enough.
• Good contrast and keyboard support matter!