Solucion QR code component

Community feedback

• 

  Brayan Miza•560

  @bramizdevPosted over 1 year ago

  Gran trabajo

  Tienes algunos reportes de accesibilidad pero nada que no se pueda corregir.

  Etiqueta main

  Este reporte es por no usar la etiqueta main. La etiqueta main es un elemento semántico de HTML5 que se utiliza para definir el contenido principal de una página web. Su uso es importante porque ayuda a mejorar la accesibilidad y el SEO de una página web. Los lectores de pantalla y otras tecnologías de asistencia utilizan la etiqueta main para identificar el contenido principal de la página, lo que facilita la navegación y la comprensión de la página por parte de los usuarios con discapacidades.

  Etiqueta h1 Este reporte es por que tu solucion no tiene h1. En estos retos es un poco dificil saber cual es tu h1, pero es necesario usar uno. La etiqueta h1 es una etiqueta de encabezado en HTML que se utiliza para definir el encabezado principal de una página web. Su uso es importante porque ayuda a proporcionar una estructura clara y jerárquica al contenido de la página. Además, los motores de búsqueda utilizan la etiqueta h1 para entender el tema principal de la página y su contenido, lo que puede mejorar la optimización de motores de búsqueda (SEO) de la página.

  Uso del alt En este caso a pesar de no ser una imagen que se pueda describir toda imagen deberia de llevar un alt puedes usar un alt vacio alt="" o agregarle una descripcion como alt="QR code to visit Frontend Mentor website" asi un lector de voz podra leer esa descripcion para personas que utilicen tecnologia de accesibilidad.

  Excelente inicio, mucha suerte en tu aventura como Frontend developer.

  Marked as helpful

  1

  ---

  

  Cristian•190

  @CristianBarrios983Posted over 1 year ago

  @bramizdev Muchas gracias, tomare en cuenta sus recomendaciones

  0
• 

  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.

  HTML 🏷️:

  • Your solution generates accessibility error reports due to non-semantic markup

  ---

  • So fix it by replacing the <div class="card container"> with semantic element <main> to improve accessibility and organization of your page.

  ---

  • Since this component involves scanning the QR code, the image is not a decoration, so it must have values in alt attribute. The alt attribute should explain its purpose. e.g. alt="QR code to frontendmentor.io"

  ---

  I hope you find it useful! 😄 Above all, the solution you submitted is great!

  Happy coding!

  Marked as helpful

  0

  ---

  

  Cristian•190

  @CristianBarrios983Posted over 1 year ago

  @0xAbdulKhalid Thank you so much for your recommendations. Greetings

  0