3-column preview card component using BEM, Flexbox, sass

Community feedback

• 

  Danilo Blas•6,300

  @Sdann26Posted over 2 years ago

  Hola Isaias! Nos vemos de nuevos por estos retos jeje!

  En este caso el problema te sale por no haber puesto un h1 y es normal a simple vista seria raro usar los h2 que has usado como 3 h1 cuando debe haber uno por proyecto. Por lo menos para que no te salga error en este reto por dentro del <main>...</main> una etiqueta h1 con el titulo que desees y con la clase sr-only (Significa si no me equivoco solo lector de pantalla en español).

  La clase sr-only es para que al usar un lector de pantalla esta lea el texto al elemento que le has aplicado esta clase. Es para temas de accesibilidad para personas que digamos que son invidentes. Pero en este caso la usarás para que el navegador detecte el h1 pero que no aparezca en tu diseño.

  La clase sr-only le pondrás los siguientes atributos.

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

  Ya con esto puedes actualizar el reporte y debe salirte 0 errores.

  Por cierto te recomiendo descargar la herramienta AxeDev Tools, es una extensión para le navegador que te permite ver problemas de accesibilidad en tu página, yo la uso bastante para evitar los problemas de accesibilidad antes de subir cualquier reto para que no halla errores.

  Bueno sin nada más que decir mucha suerte!

  Marked as helpful

  1

  ---

  

  P

  isaias•260

  @IsaiasVillegasPosted over 2 years ago

  @Sdann26 Muchas gracias por comentar y por tu sugerencia. Como menciona no quería usar 3 h1, porque sé que solo debería tener uno en el proyecto, muchas gracias por la sugerencia de usar la clase sr-only nunca se me habría ocurrido a mí jeje 😂. Creo que será de mucha ayuda para mis próximos proyectos 👍😄.

  1