Module 8: Accessibility · Lesson 7 of 7
Accessibility Checklist for Beginners: Fix a Web Page
All lessons in Module 8
- Good Alt Text
- Heading Order
- Landmarks
- Connecting Labels
- Keyboard and Focus
- ARIA Basics
- Project: Accessibility Rescue
Goal: Audit a broken page and fix every accessibility problem you find.
Learn
Real accessibility work often starts with a page somebody else built. Auditors run through a quick checklist, much like a short version of our HTML accessibility checklist:
- Header, main and footer replace the anonymous divs.
- There is one h1 and no heading level is skipped.
- Images have meaningful alt text, or
alt=""if they are decoration. - Link text makes sense on its own. "Click here" read out in a list of links means nothing.
- Every form field has a connected label.
- Everything clickable is a real link or button.
Open the Outline tab to see headings and landmarks, then press Tab through the preview. Anything that confuses you will confuse someone who can't see it even more.
The short version
- Six quick checks (landmarks, headings, images, links, labels, keyboard) catch many of the most common accessibility problems.
- Link text has to make sense on its own, without the sentence around it.
- The right HTML element often fixes several problems in one go: focus, keyboard support and the spoken role.
- Automated checkers find only some of the issues. Finish every audit with the keyboard and your own judgment.
Example
<header>
<h1>Event Name</h1>
</header>
<main>
<h2>Section</h2>
<p>See our <a href="tickets.html">ticket prices</a>.</p>
<label for="email">Email</label>
<input type="email" id="email">
<button type="submit">Subscribe</button>
</main>
<footer>
<p>© 2026</p>
</footer>Your task
The Harbor Food Festival page fails nearly every check on the list. Rescue it:
- Replace the three outer divs with
<header>,<main>and<footer>. - Fix the headings: the two sections should be
<h2>, with no h3-h6 left. - Give the pancake photo descriptive alt text.
- Replace the "click here" link text with words that describe the destination, mentioning tickets or prices.
- Give the email field a connected label (use
id="email"). - Turn the clickable Get updates div into a real
<button>.
Ctrl+Enter checks your code. Try Visual edit to change the page directly, DOM tree to see how the browser reads it, and Outline to hear it like a screen reader.
Quick quiz
Common mistakes
Wrong
<h2>Get Tickets</h2>
<p>Prices for adults and kids. <a href="tickets.html">Read more</a></p>
<h2>Getting There</h2>
<p>Bus and parking info. <a href="travel.html">Read more</a></p>Right
<h2>Get Tickets</h2>
<p>Prices for adults and kids. <a href="tickets.html">Read more about tickets</a></p>
<h2>Getting There</h2>
<p>Bus and parking info. <a href="travel.html">Read more about travel</a></p>Two identical "Read more" links in a screen reader's link list give no clue where either one goes.
Wrong
<p>Fields in <span style="color: red">red</span> are required.</p>
<label for="email" style="color: red">Email</label>
<input type="email" id="email">Right
<label for="email">Email (required)</label>
<input type="email" id="email" required>Red text means nothing to screen reader users or to people who can't see red, so say it in words and add the required attribute.
Go deeper
More and more often, accessibility is the law. The European Accessibility Act (opens in a new tab) has applied since June 2025 to many websites and apps that sell products and services in the EU. Courts in the United States regularly treat inaccessible websites as discrimination under the ADA. Both point to WCAG level AA as the benchmark.
Automated tools make a good first pass. They can only test what a computer can measure, though. A checker sees that an image has alt text, but it has no idea whether alt="image123" helps anyone. It sees a heading and can't judge whether the heading describes its section. Every audit needs a human pass too.
As you audit, write each problem down: where it is, who it affects, how to fix it. Fix the structure first (landmarks, headings, real buttons), since one structural fix often clears several issues.
Next time, build accessibility in from the first line of HTML. Rescuing a finished page, as you did here, always takes longer than getting it right the first time.
Frequently asked questions
How do I check if my website is accessible?
Use three kinds of check. Start with an automated tool such as Lighthouse in Chrome DevTools, axe DevTools or WAVE, which catches missing alt text, missing labels and contrast problems. Next, work through every page and task with the keyboard alone. Last, listen to your main pages with a screen reader such as NVDA or VoiceOver. Each pass turns up problems the other two miss.
What is WCAG?
WCAG (Web Content Accessibility Guidelines) is the W3C standard for web accessibility. The current version, WCAG 2.2 (opens in a new tab), has testable success criteria at three levels: A (the minimum), AA and AAA. Most laws and company policies around the world ask for level AA. That covers text alternatives, keyboard access, visible focus, color contrast, form labels and more.
What are the most common accessibility errors on websites?
Year after year, WebAIM's scan of the top million home pages finds the same leaders: low-contrast text, images without alt text, form fields without labels, empty links, empty buttons and a missing page language. You can fix nearly all of them with HTML you already know: alt, label, real link text, button text and lang on the <html> element, which WCAG lists as Language of Page (opens in a new tab).
