El warning completo es: Section lacks heading. Consider using h2-h6 elements to add identifying headings to all sections.
Si estás intentando que tu sitio WordPress cumpla con los estándares HTML5 de W3C, y si estás leyendo este post es porque te ha saltado el warning Section lacks heading.
Un par de cosas antes
Para resolverlo tenemos que tener presente un par de cosas antes:
- Es un warning, por lo que podemos fácilmente obviarlo y no pasaría nada.
- La descripción del warning dice: Consider, es decir, no te está diciendo must o have to, lo que significa que más es un consejo que te dan y no una obligatoriedad.
Si pese a ello, quieres seguir resolviendo dicho warning de Section lacks heading. Consider using h2-h6 elements to add identifying headings to all sections lo que tendrás que hacer es investigar el código de tu sitio web para ver las posibles opciones.
Section lacks heading. Solución general.
De manera general, la solución pasa por:
- Añadir un h2-h6, es decir, una etiqueta desde <h2> a <h6> dentro de la <section>
- Cambiar la etiqueta <section> por una etiqueta <div>
Aquí tenéis un artículo de stackoverflow que habla del warning de Section lacks heading. Consider using h2-h6 elements to add identifying headings to all sections.
Como he dicho, eso son las soluciones generales. Ahora habría que profundizar más en el código para decidir cuál sería la correcta.
Section lacks heading. Soluciones particulares o workarounds.
Como ejemplos, aquí os puedo dejar dos posibles opciones:
- Si tenemos una etiqueta de párrafo <p> dentro de nuestra <section>, podemos cambiarla por una etiqueta h2-h6 de manera que si tiene una clase css asociada, mantendrá el mismo estilo y a la misma vez resolveremos nuestro problema de tener un heading.
- Esta solución me gusta menos, pero si no tenemos otra opción, podemos incluir un h2-h6 dentro de nuestro <section> con algún texto que por ejemplo puede ser el título del post, etc… algo que realmente luego no se va a mostrar en pantalla porque nos vamos a encargar de asignarle una clase a dicha etiqueta h2-h6 para luego por css hacerle un display:none. De esta manera evitamos el Section lacks heading, pero no alteramos el resultado final de nuestro sitio web.
Aquí te dejo más información sobre el tema. Es un artículo que explica the section element.
¿Y tú? ¿Cómo resuelves tus Section lacks heading?
Gracias! Helped me alot!
Un placer Leonardo!