← All lessons

Lesson 9 · HTML

Accessibility & SEO

~20 min

1. Accessibility in 5 checks

  • alt on every <img> — describe the image, not "image"
  • label for every input — <label for="email">
  • Headings in order — h1 → h2 → h3, no skipping
  • Contrast + keyboard — test with Tab key
  • aria only when needed — prefer semantic tags first
<img src="team.jpg" alt="Three students collaborating on a laptop">
<label for="search">Search</label>
<input id="search" type="search" aria-label="Search site">

2. SEO basics

  • <title> — unique per page, 50-60 chars
  • <meta name="description"> — 120-160 chars summary
  • lang="en" on <html>
  • Validate at validator.w3.org — zero errors

Run Lighthouse in Chrome DevTools — aim for 90+ accessibility.

Interactive Practice

Practice: Accessibility & SEO

Try the examples in your editor and check off when done.

0% complete
Check when done
Quiz

Test Your Understanding

1. What should alt describe?

2. How to test keyboard access?