Today's post is about the next workshop at freeCodeCamp, specifically in the Accessibility section of the Responsive Web Design certification. This workshop comes after a series of theory lessons on accessibility that I completed yesterday, and I'm hoping what I have learned will help the workshop go smoothly.
The workshop begins by showing you a blog page and warning that there are accessibility issues with it. From the HTML code below, the first steps involve addressing problems with the heading elements:
<div>
<h1 id="post1">My Journey Learning to Code</h1>
<p>I started learning to code a few months ago and it's been a wild ride!</p>
<h4>Early Challenges</h4>
<p>At first, syntax was really confusing.</p>
<h4>Breakthroughs</h4>
<p>Eventually things started to click.</p>
</div>
<div>
<h1 id="post2">Accessibility Matters</h1>
<p>Today I learned that not everyone uses the web the same way I do.</p>
<h5>Screen Readers</h5>
<p>These tools help visually impaired users browse websites.</p>
</div>
<div>
<h1 id="post3">What's Next?</h1>
<p>I'm excited to dive into JavaScript and build interactive features!</p>
<h3>Coming soon: My first JavaScript project!</h3>
<p>Stay tuned for some exciting interactive blog features.</p>
</div>
Once those issues are resolved, the fourth exercise asks you to wrap the navigation section in a nav element, as shown below:
<nav>
<h2>Navigation</h2>
<ul>
<li><a href="#post1">My Journey</a></li>
<li><a href="#post2">Accessibility</a></li>
<li><a href="#post3">Next Steps</a></li>
</ul>
</nav>
Next, the lesson guides you to replace generic div elements with the semantic article element. Once that is done, you're asked to insert the missing main element into the code. See below for these changes:
<main>
<article>
<h2 id="post1">My Journey Learning to Code</h2>
<p>I started learning to code a few months ago and it's been a wild ride!</p>
<h3>Early Challenges</h3>
<p>At first, syntax was really confusing.</p>
<h3>Breakthroughs</h3>
<p>Eventually things started to click.</p>
</article>
<article>
<h2 id="post2">Accessibility Matters</h2>
<p>Today I learned that not everyone uses the web the same way I do.</p>
<h3>Screen Readers</h3>
<p>These tools help visually impaired users browse websites.</p>
</article>
<article>
<h2 id="post3">What's Next?</h2>
<p>I'm excited to dive into JavaScript and build interactive features!</p>
<h3>Coming soon: My first JavaScript project!</h3>
<p>Stay tuned for some exciting interactive blog features.</p>
</article>
</main>
What's still missing? The final exercises guide you to add the footer, tweak another heading, and insert a mailto link, with an example below showing what a mailto link looks like:
<p>Email me at <a href="mailto:janedoe@email.com">janedoe@email.com</a></p>
With all nine steps successfully completed, I feel that the workshop provided a solid insight into potential accessibility issues when coding a webpage. Definitely some important things for me to watch out for in the future!
Tomorrow, I'll be working through a couple of theory lessons on Working with Accessible Tables and Forms before moving on to the next workshop. Until then, keep coding!
Top comments (8)
I must say, it's great to witness you tackling the complexities of accessibility in web design Richard. The challenge of balancing semantic HTML with aesthetics seems to be a common hurdle in many projects.
This is exactly what helps make the web a more inclusive space.
Indeed, Aryan. I’ll always be a Pythonista at heart, but if I ever dive into reviewing solo TTRPGs on a blog (yet another future project…), I want it to be fully accessible!
Looking forward to it Richard! Let me know if I could be of any help as well!
Thanks, Aryan - I really appreciate that. It’s something for the longer term, but I’ll make sure to keep you in the loop!
Nice walkthrough 👏
I like how you highlighted the small changes (headings,
nav,main,article) that make a big difference for accessibility. It’s a good reminder that writing “working HTML” is not the same as writing “accessible HTML.” Really helpful for beginners and a good refresher for the rest of us.Thanks, once again, Bhavin.
Yes, I really did enjoy this workshop. Nice to have that pivot from working HTML to accessible HTML - as you've said.
This is a really good checkpoint in the journey, and I like how you framed it as “debugging” rather than just “fixing HTML.”
What stands out to me is how small each change looks in isolation — heading levels, nav, main, article — but how much they change the shape of the page when you put them together. Nothing visually explodes, yet the page suddenly makes sense to a screen reader, a keyboard user, and even future-you reading the markup later.
The heading hierarchy part is especially sneaky. It’s one of those things that’s easy to gloss over early on, but once you see how it affects document structure, you can’t unsee it. Same with replacing generic divs — it feels cosmetic until you realize you’re actually teaching the browser what the content is, not just how it should look.
I also like that the workshop doesn’t jump straight to ARIA or complex rules. It reinforces that a lot of accessibility comes from using the right elements in the right order, not from memorizing special attributes.
This feels like one of those lessons that quietly rewires how you think about HTML going forward. Curious to see how this mindset carries over when you hit tables and forms — that’s where semantics really start to pull their weight.
Nice progress. Keep documenting the journey — these reflections are just as valuable as the code itself.
Appreciate the verbose and supportive reply, Peace. Thank you!