After completing two theory lessons on freeCodeCamp yesterday covering Working with Accessible Tables and Forms, I moved on to the related workshop...
For further actions, you may consider blocking this person and/or reporting abuse
I really appreciate this beginner-friendly walkthrough.
Seeing a table as a structure to help screen readers make sense of it, rather than just a visual layout, really helps it click. It's been great to see the progress in this series, and I'm looking forward to the rest.
Keep coding Richard!
Thank you, Aryan! Coming from someone with the quality of your own writing, your comments are always a great motivation.
I have to say - once again - that I’m really enjoying this latest version of the curriculum over at freeCodeCamp!
Thank you for the continued appreciation Richard! It means more than I can put in words.
And once again looking forward to more great posts from you! (≧︶≦))(￣▽￣ )ゞ
Thanks again, Aryan. I’ll be publishing more posts soon, including what I’d describe as a sober, clear-eyed look at the Moltbook AI Social Network.
Nice walkthrough 👏
I like how you didn’t just build the table, but explained why things like
caption,scope, andcolspanmatter for accessibility. That’s something many beginners skip.Tables start to make much more sense when you see them as structure for screen readers, not just layout on the screen. Great progress in this series — keep going!
Thanks, Bhavin! I always find your kind comments so encouraging.
Indeed, as I'm currently working through the accessibility section at freeCodeCamp, I wanted to make sure I’m conveying why this is so important.
This one’s a solid “small workshop, big lesson” moment.
What I like about this post is you didn’t just dump the final HTML — you walked through why each piece exists. A lot of people treat tables like “old HTML,” but when you add
caption,thead/tbody, and especiallyscope, it stops being a grid and starts being structured information that assistive tech can actually navigate.Also that
colspan="3"for “Break” is such a clean example of accessibility lining up with visual clarity. It’s one of those changes that looks tiny, but it’s basically you telling both humans and screen readers: “this row is a shared state, not three separate cells.”If I’d add one extra thought (not as a correction, just an upgrade idea): once you’re comfortable with this, try styling it lightly and testing with a screen reader or Lighthouse. It’s honestly satisfying seeing your markup score higher because your structure is doing the heavy lifting.
Keep going — these workshops are sneaky: they look simple, but they’re training you to build pages that are readable by systems, not just browsers.
Thanks again, Peace, for such a lovely and verbose comments - very much appreciated, as always.
I've said before that I have noticed subtle but welcome changes in this latest version of the freeCodeCamp curriculum - theory and concepts are built on through workshops and labs, reinforcing learning.
In closing, thank you so very much for your test about using a screen reader or something like Lighthouse. I will certainly start doing that - cheers!
That really means a lot — thank you 🙏
I think I just tend to read posts the way people write them. If someone is reflective and methodical, I naturally slow down with them. If they’re hands-on and practical, I respond from that same place. It’s less about trying to add noise and more about staying in the same rhythm and then gently exploring the edges of it.
And yeah, freeCodeCamp has quietly done something right there™ there. That loop of theory → workshop → lab mirrors how things actually stick in real work, especially for concepts like accessibility that are easy to “know about” but harder to feel in practice.
Glad the screen reader / Lighthouse tip resonated. It’s one of those things that flips a switch once you try it — suddenly tables, forms, and semantics stop being abstract rules and start feeling like real UX decisions.
Really enjoyed the exchange. Looking forward to seeing how the next labs land for you — cheers
You're more than welcome, Peace.
Yea, that's a really good way of approaching content on sites like DEV - and I can see that it really works for you - something similar to what I try to do myself.
Yes, the heads-up about the screen reader or using something like Lighthouse was a truly great tip - new developers should be focused on accessibility.
Again, thank you!
Nice walkthrough, very clear and easy to follow!!
You don’t just show what to type, you explain why things like scope, caption, and colspan actually matter for accessibility...
One solid tip to add is to open the table in a screen reader or accessibility tree at least once, even briefly, it really clicks why proper headers and structure are not optional!
That moment usually turns tables from “markup” into “real UI” for people?
Glad you liked the post, Martijn - thank you so very much for the tip!