Submitted over 2 years ago

Responsive 3-column preview card component

Joshua• 130

@dyntbn

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

3-column preview card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

Hey everyone, 👋

Would appreciate some insight on finding the right middle ground between the accessibility/semantic-html feedback and design challenges.

My current layout has a section as the parent, and article as the child elements. I used section because it groups content, and article because it contains self-contained content.

<section> # cards wrapper
  <article> # card
    <h2>
    ...
  <article>
    <h2>
    ...
  <article>
    <h2>
    ...

Feedback suggests that page should have an a level one heading (h1), but the design doesn't call for one. Going away from design, I could add a h1 to completely fix it, but is that the right call?

Or is there a better way of approaching this, maybe restructuring the html? I looked around in some recent solutions, but couldn't find a clear answer.

I feel like it is an issue that I'm going to face a lot, and maybe you have before. Any help is greatly appreciated, thanks for reading!

Community feedback

Tiago BW• 210

@tiagobw

Posted over 2 years ago

Hi dyntbn,

I had this question myself.

So I came across this article: https://css-tricks.com/how-to-section-your-html/

You can find the answer in Part 9: Don’t swap <div> for <section>.

I hope that can help you as well.

And congratulations on completing the challenge. :)

Marked as helpful

Joshua• 130

@dyntbn

Posted over 2 years ago

@tiagobw

😄Glad that I wasn't the only one!

I was losing some sleep, so I decided to just post what I had and ask that night. Super happy that I did.

And wow, this article is great. I read way more than what I came for, and it is the answer I was looking for. I was having a hard time in my earlier challenges with this kind of thinking too. I really appreciate you sharing this!

I'm going to use <div> instead of <section> and use <h1>'s under each of the <article>s. I'll start working on updating the code on the GitHub repo.

It was definitely a harder one, both in terms of semantics and responsiveness, appreciate the congratulations. Thanks Tiago, the article did help lots, you're a life saver. 😄

iago• 400

@iagohenrique2009

Posted over 2 years ago

Hi...

My OPINION and most of the overall people (i think) is because the h1 serves like an title for article. So its always nice having one, on these you could 3 without problems because each card have different content.

OBS: You can it to anyway of what you want(or creating a div or changing the h1) in css

And remenbering the project is yours so change only if you feel ok, because anyway thats don'sent affect the code base

Marked as helpful

Joshua• 130

@dyntbn

Posted over 2 years ago

@iagohenrique2009

You're right I'm sweating the small stuff, but I can't help and think about that kind of stuff. 😅

🤔 I was thinking of that approach too with swapping out to <div> elements with other hacky approaches to get around the accessibility errors. I ended up deciding not to, as it would be just avoiding the real problem.

And your approach makes sense to just add a <h1>, since an <article> is a "self-contained" that is "independently distributable or reusable" (quoting MDN docs here).

I think this is the middle ground I was looking for, and I definitely keep that in mind to not roadblock myself. Thanks so much for your help Iago. 👍

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord