Debug a Coding Journey Blog Page

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:[e-mail]">[e-mail]</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!

Comments

[Aryan Choudhary]

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.

[Richard Pascoe]

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!

[Aryan Choudhary]

Looking forward to it Richard! Let me know if I could be of any help as well!

[Richard Pascoe]

Thanks, Aryan - I really appreciate that. It’s something for the longer term, but I’ll make sure to keep you in the loop!

[Bhavin Sheth]

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.

[Richard Pascoe]

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.