Skip to content
Submitted almost 2 years ago

3-Column Preview Card Component

Adrian•40
@adrianlica20
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...3-column preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Hello, everyone!

This is my solution for the above mentioned project.

Even though 3 h1s seem weird to me, the accessibility report doesn't have a problem with it. I initially used a hidden h1, but I still got the same notification from the report.

In a video on SEO by a Google employee I stumbled across, he said that you can use as many h1s as you'd like, because it doesn't really matter.

What would you think is the best way to define the headings in this case, where there is no clear h1?

Thanks and happy coding!

Community feedback

  • Vanza Setia•27,775
    @vanzasetiaPosted almost 2 years ago

    Hi, Adrian! 👋

    Having multiple <h1> elements can create confusion and make it difficult for screen readers and other assistive technologies to properly navigate the content. Many <h1> mean many titles which can confuse the users, especially the screen reader users. So, I recommend replacing all the <h1> with <h2>.

    In this case, it is only a component, not a full website. So, it is okay to not have <h1>.

    Learn more — How-to: Accessible heading structure - The A11Y Project

    I hope this helps. Happy coding!

    Marked as helpful
    2

Please log in to post a comment

Log in with GitHub

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