Why Accessibility Starts in HTML
Accessibility (a11y) means building pages that work for everyone, including people using screen readers, keyboard-only navigation, or other assistive technology. The good news: most of the semantic tags you've already learned — <header>, <nav>, <main>, <th> — are already doing accessibility work for you.
- ✓Screen readers announce content differently based on which tag it's wrapped in.
- ✓Good HTML structure is the foundation accessibility is built on — CSS and JavaScript can't fix broken markup.
- ✓Most accessibility wins are small, specific habits, not a separate skill to learn from scratch.
Meaningful alt Text on Images
You've used alt since Day 05, but its purpose deserves a closer look: it's the text a screen reader speaks instead of the image, and what displays if the image fails to load.
<!-- Bad: describes nothing --> <img src="chart.png" alt="image"> <!-- Good: describes the actual content --> <img src="chart.png" alt="Bar chart showing 40% growth in Q2">
Purely decorative images — like a background flourish with no informational value — should use an empty alt="" so screen readers skip over them entirely.
Helping People Navigate
Beyond images, a few more habits make a page far easier to navigate without a mouse or with a screen reader.
Connects form text to its input, so screen readers announce what each field is for.
Set on <html>, tells screen readers which language to use for pronunciation.
Semantic tags like <nav> and <main> let screen reader users jump straight to a section.
A hidden "Skip to content" link that lets keyboard users bypass repeated navigation.
<label for="email">Email Address</label> <input type="email" id="email" name="email">
The label's for attribute must match the input's id exactly — that pairing is what makes them work as a unit for assistive tech.
Never Skip a Heading Level
Screen reader users often jump between headings the way sighted users skim a page. Skipping levels — going from an <h2> straight to an <h4> because it "looks right" — breaks that outline.
Use heading levels to reflect structure, not appearance. If a smaller heading is what you want visually, use CSS to style an <h3> smaller — don't reach for an <h4> just because it happens to look right.
Breaking Down What You Just Learned
Descriptive alt textConveys the actual content of an image, not a placeholder like "image" or "photo."
<label for>Links a form label to its input by matching id, so screen readers announce field names.
lang attributeSet on <html> to guide correct pronunciation by screen readers.
LandmarksSemantic tags act as navigation shortcuts for assistive technology users.
Sequential headingsNever skip heading levels — they form the outline screen reader users navigate by.
Try It Yourself
Go back to any page you've built and rewrite every alt attribute so it actually describes what's in the image, instead of a generic placeholder.
Audit and Fix a Page for Accessibility
Applying an accessibility checklist to real markup
Create a new file called day13.html inside your course folder and build a small accessible contact section.
- Start with the full DOCTYPE, html, head, and body structure, with lang="en" on <html>.
- Add an <img> with genuinely descriptive alt text — not a placeholder word.
- Build a small form with a <label for> correctly paired to each <input id>.
- Use headings in strict order — one <h1>, then <h2> for each subsection, no skipped levels.
- Wrap the whole thing in <main>, with a <nav> above it containing at least two links.
- Re-read the page and confirm every label, alt, and heading actually describes its content.
Recap
Describes an image's actual content for screen readers.
Connects a form label to its input via matching id.
Tells screen readers which language to pronounce text in.
Never skip levels — headings form a navigable outline.
Key Takeaways
- Accessibility starts with the semantic HTML you've already been learning.
- Write alt text that describes content, not filenames or placeholders.
- Pair every form label to its input using matching for and id values.
- Set lang="en" (or the appropriate language) on the <html> tag.
- Keep heading levels sequential — they're a navigation tool, not just a style choice.