Responsive preview card with CSS flex-box

Community feedback

• 

  P

  Fluffy Kas•7,715

  @FluffyKasPosted over 2 years ago

  Hey,

  You could either go with a simple div or an article element here. I wouldn't use a section, in fact I'd advise against overusing it. In regards of accessibility it usually doesn't do much more than a simple div.

  I'd probably just wrap the component in a <main> (so it has a landmark), then change the "card" to an article or div and then every other section you have inside to just a div.

  That's probably all there is to this challenge when it comes to semantic tags.

  Another note regarding alt texts: you're already using <img> elements so adding words like icon, photo, image, etc is not necessary.

  Marked as helpful

  1

  ---

  

  voqh•130

  @VoqhPosted over 2 years ago

  @FluffyKas thanks for the feedback, i made corrections based on your recommendations and the accessibility issues were solved. What do you recommend for the headings?

  0

  

  P

  Fluffy Kas•7,715

  @FluffyKasPosted over 2 years ago

  @Voqh There's only one heading in this component really: the one saying Equilibrium #3429. That could be an <h1>. The heading you named "banner" is probably not really a heading, that could just be a simple div for wrapping the <img> and <a>.

  0

  

  voqh•130

  @VoqhPosted over 2 years ago

  @FluffyKas Equilibrium being set as the <h1> results to an HTML issue since it is nested inside <div>, the suggestion given is that it should be considered a <h2> - <h6> element. I figured out may be <h1> should literally be a top-level header.

  0

  

  P

  Fluffy Kas•7,715

  @FluffyKasPosted over 2 years ago

  @Voqh Being nested inside a div won't cause that issue (I did that in my solution to this challenge and in a fair amount of other projects, as well. There's no rule that an <h1> cannot be wrapped in a div). The issue most probably comes from the fact that you're still using another <h1> for the "banner" and the component shouldn't have 2 <h1> headings, hence you get that suggestion.

  <h1> should definitely be THE top-level heading, but that doesn't necessarily mean it has to be the very first html element you use in your website.

  Marked as helpful

  0

  

  voqh•130

  @VoqhPosted over 2 years ago

  @FluffyKas thanks for the free lesson.

  0