HeadingsMap es una extensión gratuita para el navegador web. Es específica para mostrar la estructura de la página (encabezados).

Permite:

• Visualizar un listado de los encabezados de la página y su nivel.
• Muestra los anidamientos entre encabezados.
• Alerta de los casos en que no hay encabezados o se produce un salto incorrecto entre ellos.
• Resalta el encabezado seleccionado para poder localizarlo fácilmente en la página.

Instalar la extensión para el navegador web: Chrome / Firefox.

Una vez que instalada, se accede a ella a través de un botón de la zona de extensiones del navegador: 

Tras realizar la instalación, abre en el navegador la página a analizar y pincha en el botón correspondiente a HeadingsMap de la zona de extensiones del navegador. Se desplegará en la parte izquierda de la pantalla. 

Se mostrarán de manera automática todos los encabezados existentes en la página web, con una indicación numérica, del 1 al 6, para indicar el nivel de encabezado (<h1> a <h6>). Se visualizan, además, los anidamientos entre los diferentes encabezados y se pueden colapsar o mostrar los diferentes niveles pulsando sobre las flechas que existen al principio de cada encabezado. Si pinchas en un encabezado del listado de la parte izquierda, se resaltará en la página para localizarlo fácilmente. Si la página no tuviera encabezados o tuviera saltos incorrectos entre ellos, se mostrará un mensaje de error.

Para cerrar la herramienta pulsa de nuevo sobre el icono de HeadingsMap.

La herramienta HeadingsMap puede utilizarse como ayuda para revisar los siguientes criterios de conformidad:

• Criterio 1.3.1. Información y relaciones, para las comprobaciones:
  • Comprobación 1.3.1-A. Se deben usar los elementos de encabezado (<h1>-<h6>) para identificar los textos que actúan como encabezados de secciones de contenido.
  • Comprobación 1.3.1-B. No se deben emplear los elementos de encabezado (<h1>-<h6>) para marcar textos que no son encabezados de sección de contenido.
  • Comprobación 1.3.1-C. La estructura de encabezados (o el outline de la página si se emplean encabezados y secciones de HTML5) debe tener sentido y reflejar la estructura lógica del contenido de la página.
• Criterio 2.4.6. Encabezados y etiquetas, para la comprobación:
  • Comprobación 2.4.6-A. Los encabezados usados en la página deben identificar el contenido de la sección que encabezan.

En el bloque IV de este curso, se verá en detalle cómo utilizar esta herramienta como ayuda para revisar cada uno de estos criterios.