3-column preview card component

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 lack of <h1> so it can cause severe accessibility errors due to absence of level-one headings <h1>

  ---

  • Every site must want only one h1 element identifying and describing the main content of the page.

  ---

  • An h1 heading provides an important navigation point for users of assistive technologies, allowing them to easily find the main content of the page.

  ---

  • In this solution there's three <h2> elements, like this <h2>SEDANS</h2>. But there's no <h1>, Remember <h1> provides an important navigation point for users of assistive technologies so we want to use it wisely

  ---

  • So we want to add a level-one heading to improve accessibility by reading aloud the heading by screen readers, you can achieve this by adding a sr-only class to hide it from visual users (it will be useful for visually impaired users)

  ---

  • Example: <h1 class="sr-only">3-column preview card component</h1>

  ---

  • 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!

  1

  ---

  

  jamespask•60

  @jamespaskPosted over 1 year ago

  @0xAbdulKhalid So I tried sr-only but it seems that is a bootstrap class? I did some googling and found a helpful aria-invisible class: .aria-invisible { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }

  This seemed to work

  0

  

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqPosted over 1 year ago

  You're right @jamespask!

  • sr-only class is a bootstrap class, but it's not only name as that in bootstrap it's on tailwind other css frameworks too.

  ---

  • Then name sr-only is a general term that used from screen-reader only, peoples are tend to use the keyword sr-only for pointing that out.

  ---

  • I'm not using bootstrap or tailwind like frameworks for my projects but still use the sr-only class as a good accessibility practice

  ---

  • PS: You can name anything as you want, but as a general conviction the name sr-only is easily identified by fellow developers. That's why the name is not changed on any frameworks regardless of it's type.

  0
• 

  jamespask•60

  @jamespaskPosted over 1 year ago

  I have a question, where should the H1 go on an element like this? There are 3 equally important titles but the Accessibility report suggests the need for an H1

  0