empty-heading
Los encabezados no deben estar vacíos
Comprueba que los elementos de encabezado (<h1>-<h6> o role="heading") tengan un nombre accesible no vacío.
Ámbito de aplicación. Se aplica a los elementos con rol de encabezado: <h1>-<h6> nativos, o cualquier elemento cuyo atributo role se resuelve en heading (el primer token que nombra un rol conocido, sin distinguir mayúsculas de minúsculas, por lo que role="foo heading" cuenta). Un encabezado nativo conserva su rol cuando ningún token es un rol conocido, y lo pierde ante cualquier otro rol resuelto. Un <hx> nativo marcado con role="none" o "presentation" sigue siendo un encabezado cuando puede recibir el foco o lleva un atributo ARIA global, ya que la resolución de conflictos de los roles presentacionales de WAI-ARIA hace que los navegadores ignoren ese rol en ese caso. Un elemento personalizado cuyos ElementInternals le dan el rol heading (this.attachInternals().role), sin un atributo role que nombre otro, cuenta como lo hace un elemento nativo con ese rol.
Resultado esperado. El encabezado tiene un nombre accesible no vacío: aria-label, aria-labelledby, contenido de texto visible no oculto a la tecnología de asistencia, o (como último recurso) un atributo title. Un encabezado vacío se anuncia como "encabezado, nivel N" sin nada más, lo cual resulta confuso al navegar por encabezados. Se informa como fail aunque no se reivindique ningún criterio WCAG: un encabezado vacío es en sí mismo la barrera, como lo trata la regla ACT ffd0e9. Por un encabezado cuyo nombre puede venir de contenido que ningún script puede leer (un shadow root cerrado, contenido anidado a demasiada profundidad, un elemento personalizado que se nombra a sí mismo mediante ElementInternals) se pregunta en su lugar, como hacen las reglas *-name-present.
Ejemplos
<h2>Section title</h2>
El encabezado tiene contenido de texto visible.
<h2></h2>
El encabezado no tiene ningún nombre accesible: no hay nada que un lector de pantalla pueda anunciar.
Cómo comprobarlo
Cuando esta regla no puede decidir, informa cantTell y deja la pregunta a una persona. Cada pregunta que puede plantear aparece aquí bajo su código de motivo, con los pasos para responderla. Un hallazgo lleva los mismos pasos en howToCheck, en el idioma del análisis. Consulta Esquema de salida.
name_closedContent
- Localizar el encabezado que indica el informe y anotar el texto o el icono que muestra en pantalla.
- Abrir el panel Accesibilidad de las herramientas para desarrolladores del navegador y leer el nombre accesible del elemento, que el navegador obtiene de un contenido que ningún script puede leer.
- Con un lector de pantalla, desplazarse hasta el elemento y escuchar el nombre que se anuncia.
Se cumple. El árbol de accesibilidad muestra un nombre para el encabezado, tomado de su contenido, y el lector de pantalla lo anuncia.
No se cumple. El encabezado no tiene nombre en el árbol de accesibilidad, porque su contenido no le da ninguno, lo que va contra la buena práctica de que los encabezados tengan contenido (ACT ffd0e9).
name_contentTooDeep
- Localizar el encabezado que indica el informe y anotar el texto que muestra en pantalla.
- Abrir el panel Accesibilidad de las herramientas para desarrolladores del navegador y leer el nombre accesible del elemento, que el navegador obtiene de todo su contenido anidado.
- Con un lector de pantalla, desplazarse hasta el elemento y escuchar el nombre que se anuncia.
Se cumple. El árbol de accesibilidad muestra un nombre para el encabezado, tomado de su contenido anidado, y el lector de pantalla lo anuncia.
No se cumple. El encabezado no tiene nombre en el árbol de accesibilidad, porque su contenido no le da ninguno, lo que va contra la buena práctica de que los encabezados tengan contenido (ACT ffd0e9).
name_internals
- Inspeccionar el encabezado que indica el informe, un elemento personalizado, y anotar su rol.
- Abrir el panel Accesibilidad de las herramientas para desarrolladores del navegador y leer el nombre accesible del elemento.
- Con un lector de pantalla, desplazarse hasta el elemento y escuchar el nombre que se anuncia.
Se cumple. El árbol de accesibilidad muestra un nombre para el encabezado, establecido mediante sus internals o de otro modo, y el lector de pantalla lo anuncia.
No se cumple. El encabezado no tiene nombre en el árbol de accesibilidad y el lector de pantalla solo anuncia su rol, lo que va contra la buena práctica de que los encabezados tengan contenido (ACT ffd0e9).