🏷️ Module 9 · Semantic HTML5🟡 IntermediateLESSON 38 · MODULE FINAL

Accessibility Basics

⏱️ 14 min read

📖 Theory + Code

🧩 5 Quiz Questions

🏗️ 1 Challenge

Course progress11%

🎯 What you'll learn: What web accessibility means, the WCAG conformance levels, writing useful alt text, correct heading order, and colour contrast basics.

Section 1

What Is Accessibility?

Web accessibility means building sites that people with disabilities — visual, auditory, motor, or cognitive — can actually use. This includes screen reader users, people navigating by keyboard only, and people with low vision or color blindness. Most of it starts with writing good HTML.

Section 2

WCAG Levels

The Web Content Accessibility Guidelines (WCAG) define three conformance levels. Most legal and organizational standards target AA.

Level	Meaning
A	Minimum — basic accessibility barriers removed
AA	Standard target for most websites and legal requirements
AAA	Highest — often not achievable for all content types

Section 3

Writing Useful alt Text

Good alt text describes the image's purpose, not just its literal contents. Decorative images that add nothing should use an empty alt="" so screen readers skip them entirely.

alt-text.html

HTML

<!-- Vague -->
<img src="chart.png" alt="image">

<!-- Useful -->
<img src="chart.png" alt="Revenue grew 40% from Q1 to Q4 2025">

<!-- Purely decorative -->
<img src="divider-swirl.png" alt="">

Section 4

Heading Order & Colour Contrast

Headings should nest in order — never skip from <h2> straight to <h4> just because it "looks" smaller. Screen reader users navigate by heading level, and skipped levels break that outline. Text must also have enough contrast against its background — WCAG AA requires at least 4.5:1 for normal body text.

⚠️

Don't pick headings by visual size

If an h3 looks too big, style it smaller with CSS — don't use a lower heading level just to get a smaller font. Heading level is structural, not visual.

🧩 Knowledge Check — Lesson 38

5 questions to test your understanding.

1. What WCAG level do most legal and organizational standards target?

2. What alt text should a purely decorative image have?

3. Should you skip heading levels (e.g. h2 straight to h4) for visual size?

4. What's the minimum contrast ratio WCAG AA requires for normal body text?

5. Good alt text should describe:

💪

Coding Challenge — Lesson 38

Apply what you learned · Intermediate Level

Challenge: Fix an Inaccessible Snippet

Given an image with alt="img" and a heading structure that jumps from h2 to h4, rewrite both: give the image meaningful alt text describing what it shows, and fix the heading to use h3.

💡 Show hints if you're stuck

Describe purpose, not pixels — "team photo at the 2025 conference," not "photo.jpg".

✅

Module 9 Complete!

You've finished Semantic HTML5 — why it matters, the core tags, and accessibility basics. Next up: HTML Entities & Symbols.

Finished this lesson?

Mark it complete to track your progress.

Lesson 38 of 62Final Lesson — Module 9

Accessibility Basics

What Is Accessibility?

WCAG Levels

Writing Useful alt Text

Heading Order & Colour Contrast

Lesson 38 Complete — Module 9 Finished!