3 column preview card component with CSS Flexbox

Community feedback

• 

  Danilo Blas•6,300

  @Sdann26Posted over 2 years ago

  Hola Luca!

  A pesar de que el informe de frontend mentor no lo avise, es penalizado por el SEO de la página usar más de un <h1> ya que esta etiqueta solo sirve para englobar el titulo de tú página actual.

  Entonces lo que deberías hacer es cambiar todos los h1 por h2, pero eso te dará el problema de que no estas utilizando ningún h1. Para lo cual puedes agregar un h1 dentro del main y colocarle la clase sr-only. La finalidad de esta clase es que no aparezca en el flujo visual de tu proyecto pero se mantenga y pueda ser leído por el lector de pantalla. Los atributos que tiene esta clase son los siguiente.

    .sr-only {
      position: absolute ;
      left: -10000px;
      width: 1px;
      height: 1px;
      top: auto;
      overflow: hidden;
    }
  

  Con lo cual lo que hace si te das cuenta como que lo saca de donde esta posicionado y no se ve pero sigue estando ahí el elemento presente.

  Esto te ayudará en este y otro proyecto que no tengan titulo o algún <h1>, aunque su principal uso son para temas de accesibilidad que te invito a investigar.

  Espero que mis comentarios sean de ayuda, buena suerte.

  0