3-column preview card component with Flexbox

Community feedback

• 

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqPosted over 1 year ago

  Hello there 👋. Congratulations on successfully completing the challenge! 🎉

  • I have other recommendations regarding your code that I believe will be of great interest to you.

  ---

  HEADINGS ⚠️:

  • This solution consists incorrect usage of <h1> so it can cause severe accessibility errors due to lack of level-one headings <h1>

  ---

  • You have added a h1 but unfortunately you have added display: none inline style to that.

  ---

  • By adding display: none the h1 is completely hidden for both visual & visually impaired users. So the screen readers can't able to identify the h1.

  ---

  • Eventhough you added it, but it's potential is not been used instead of adding display: none you want to add sr-only class which are set of style rules that made for screen reader only contents

  ---

  • Here's the style rules for sr-only class

  .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border-width: 0;
  }
  

  ---

  • And another thing is that we want to convey what page they are visiting so here the text Choose Your Vehicle can't define component itself, So you can better use Example: 3-column preview card component

  ---

  • If you have any questions or need further clarification, you can always check out my submission for this challenge where i used this technique and feel free to reach out to me.

  ---

  .

  I hope you find this helpful 😄 Above all, the solution you submitted is great !

  Happy coding!

  Marked as helpful

  0

  ---

  

  Kevin H.•150

  @kevinx9000Posted over 1 year ago

  @0xAbdulKhalid Thank you for your feedback! I had forgotten to come back to that h1 issue. The reasoning behind it was that I felt the car categories of Sedans, SUVS, and Luxury should be headings, but that it didn't make sense to make them all h1 since there should only be one of those on a page. So I felt the need to make them each h2, but then there wouldn't be an h1 on the page to lead from and I felt I would get an HTML issue/notification for that in my code. So in the end, it probably wasn't the smartest decision. But for the sake of building a component instead of an actual page (even though it's built and submitted as a full web page), I should probably simply remove the h1 code entirely and keep the h2 tags as is, since it is just a component and not a functional web page anyway. Thank you again for taking a look and for your feedback!

  0