Mini lessons
Practice accessible HTML
Each lesson includes a short checklist and a copy-paste exercise you can use inside Inclusion Code. The goal is to help blind learners connect what screen readers and Braille show with the HTML structure that makes it accessible.
Lesson 1: Headings that make sense
Goal: Build a page structure that is easy to scan using heading navigation (H / 1–6).
Checklist
- Use one clear
<h1>for the page topic. - Use
<h2>for major sections,<h3>for subsections. - Do not skip levels (avoid jumping from H1 to H4).
- Headings should describe content, not just look big.
Exercise (copy & paste)
Try heading navigation with your screen reader after generating the page.
Accessible Headings Practice My Accessible Page
News
Short updates go here.
Resources
WCAG
WCAG helps define accessibility requirements.
Screen Readers
NVDA, JAWS, VoiceOver, TalkBack.
Contact
Email: example@example.com
Lesson 2: Links that work out of context
Goal: Make link text meaningful when a screen reader lists all links.
Checklist
- Avoid “click here” or “read more” by itself.
- Link text should describe the destination or action.
- Use consistent wording for repeated navigation items.
- If you must use “read more”, add hidden context (advanced) or rewrite the text.
Exercise (copy & paste)
After generating, use the screen reader “Links list”. Are the links understandable?
Accessible Links Practice Links that make sense
Good examples: Read the WCAG 2.2 specification and Open Inclusion Code resources.
Avoid vague links like: click here or read more.
Practice list
Lesson 3: Images and meaningful alt text
Goal: Use alt text properly: informative images get helpful alt; decorative images get empty alt.
Checklist
- If an image adds information, provide meaningful
alt. - If an image is purely decorative, use
alt="". - Avoid repeating nearby text in the alt unless necessary.
- Alt should reflect purpose, not every visual detail.
Exercise (copy & paste)
Use your screen reader to read through the page and compare the alt behaviors.
Alt Text Practice Alt text examples
Informative image
Decorative image
This decorative image should be ignored by screen readers.
Bad alt example
(Avoid non-informative alt text.)
Lesson 4: Forms with labels (and clear errors)
Goal: Ensure every input has a label and that instructions are understandable.
Checklist
- Every input must have a visible
<label>linked withfor. - Use clear instructions and examples.
- Use descriptive button text.
- Errors should be specific (what happened + how to fix it).
Exercise (copy & paste)
Navigate using Tab. Ensure each field reads its label correctly.
Accessible Forms Practice Contact form