Continuing with the accessibility theme, I tackled a lab from freeCodeCamp where I debugged a Donation Form. Like all labs in the curriculum, this one is guided by user stories - five in total this time - which you follow to hopefully meet all the checks and complete the exercise.
Below is the initial code provided at the start of the lab, complete with all of the accessibility issues. Can you spot any of them?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Donation Form</title>
</head>
<body>
<h1>Donation Form</h1>
<form>
Full Name:
<input type="text" name="name"></input>
Email Address:
<input type="text" name="email">
Donation Amount ($):
<input type="number" name="amount"></input>
<input type="checkbox" name="newsletter"></input>
Subscribe
<input type="submit" value="Send"></input>
</form>
</body>
</html>
The user stories themselves provide plenty of hints about the errors - for example, reminding you that input elements are void elements and therefore shouldn't have closing tags. That's when I noticed that several input elements were missing label elements where appropriate, as confirmed by the second user story.
Moving on to the third user story, I noticed the email input type was incorrect - if you hadn't spotted that already. Once that was fixed, the next task was ensuring each label element was correctly linked to its corresponding input element, as outlined in the fourth user story.
The final user story asked you to add the required attribute where appropriate, and once that was done, all the checks passed. Below is the completed lab after making all the changes:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Donation Form</title>
</head>
<body>
<h1>Donation Form</h1>
<form>
<label for="full-name">
Full Name:
<input type="text" id="full-name" name="name" required>
</label>
<label for="email-address">
Email Address:
<input type="email" id="email-address" name="email" required>
</label>
<label for="donation-amount">
Donation Amount ($):
<input type="number" id="donation-amount" name="amount" required>
</label>
<label for="subscribe">
Subscribe
<input type="checkbox" id="subscribe" name="newsletter">
</label>
<input type="submit" value="Submit">
</form>
</body>
</html>
Next up in the freeCodeCamp Responsive Web Design certification are a series of theory lessons on ARIA, followed by a workshop where you'll build an Accessible Audio Controller. I'll dive into those in the next update!
Top comments (2)
This is a great walkthrough, especially because it shows how small HTML details quietly make or break accessibility.
I like that you framed it through the user stories instead of just listing fixes. Stuff like input elements being void, or labels not being properly associated, are easy to gloss over when you’re focused on “making it work” — but screen readers and form validation absolutely care. The email input type is another classic one: visually invisible bug, but huge UX and a11y impact.
Wrapping inputs inside labels is also a nice touch here. It’s one of those patterns that feels slightly verbose at first, but once you internalize why it helps (click targets, assistive tech, clarity), it becomes second nature.
What I appreciate most is that this reinforces a bigger lesson: accessibility isn’t some advanced, separate skill — it’s mostly about respecting the semantics the platform already gives you. No ARIA heroics needed, just correct HTML.
Looking forward to your notes on the ARIA section. That’s usually where people overcorrect and start adding roles they don’t actually need 😄
Once again, Peace, thanks for your thoughtful comment - glad the piece resonated with you.
You're absolutely right: accessibility is crucial. Working on the accessibility section at freeCodeCamp has really hammered that home for me. If I ever get my solo TTRPG review blog off the ground, these lessons will definitely stay with me!