heading-order
Los niveles de encabezado no deben saltarse un nivel
Comprueba que los niveles de encabezado aumenten como máximo de uno en uno según el orden del documento.
Ámbito de aplicación. Se aplica siempre que la página contenga dos o más elementos de encabezado (<h1>-<h6> nativos, o role="heading" explícito con aria-level; nivel 2 por defecto según la especificación de ARIA cuando aria-level está ausente o no es válido). Un <hx> nativo con un aria-level válido (un entero positivo) toma ese nivel, como lo exponen los navegadores; si no, toma el nivel de su etiqueta. 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) cuenta como role="heading", en el nivel que le dan su atributo aria-level o el ariaLevel de sus internals.
Resultado esperado. En el orden en que la tecnología de asistencia lee la página, el nivel de cada encabezado no es más de uno superior al del encabezado anterior expuesto a la tecnología de asistencia. Saltar más de un nivel de profundidad (por ejemplo, un <h1> seguido directamente de un <h3>, saltándose <h2>) rompe el esquema del documento en el que se apoyan los usuarios de tecnología de asistencia al navegar por encabezados. Volver a un nivel más superficial en cualquier momento siempre es válido.
Qué informa un hallazgo.
fromLevel: el nivel del encabezado expuesto anterior (3 para un <h3>).toLevel: el nivel de este encabezado, más de un nivel por debajo defromLevel.
Estos campos de data.details ayudan a leer y reproducir un hallazgo. Salvo reasonCode y los pocos campos que Esquema de salida indica como estables, no son un contrato estable: un campo puede cambiar de nombre o desaparecer en una versión menor, así que no construyas sobre ellos.
Ejemplos
<h1>Title</h1><h2>Section</h2><h3>Subsection</h3>
Cada nivel de encabezado aumenta como máximo de uno en uno.
<h1>Title</h1><h3>Subsection</h3>
El nivel de encabezado salta de 1 a 3, saltándose el nivel 2.
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.
HEADING_ORDER_SKIPPED_LEVEL
- Localizar el encabezado que indica el informe y anotar su nivel y el nivel del encabezado anterior (del informe o del panel Accesibilidad).
- Enumerar los encabezados de la página en orden, con la lista de encabezados de un lector de pantalla o inspeccionándolos, y observar la sección donde está el salto.
- Decidir si el encabezado corresponde a un nivel por debajo del encabezado anterior, o si falta un nivel.
Se cumple. Cada encabezado está como mucho un nivel más profundo que el anterior, así que el esquema no tiene huecos.
No se cumple. El encabezado salta más de un nivel por debajo del anterior (un h2 seguido de un h4), lo que deja un hueco en el esquema, un incumplimiento de buena práctica (G141).