heading
Marca un elemento como encabezado. Utilice primero <h1>–<h6>, ya que proporcionan la semántica correcta y el nivel adecuado de forma nativa. Recurra a role="heading" solo cuando sea imprescindible actualizar semánticamente un elemento que no puede ser un <h*>.
Cuándo utilizarlo
Recurra siempre primero a los elementos <h1> hasta <h6>. El elemento de encabezado nativo le proporciona el rol, el nivel y una hoja de estilos del agente de usuario integrada.
role="heading" solo es adecuado cuando no es posible utilizar un encabezado nativo, por lo general cuando un CMS restringido renderiza todo el texto como <p> o <div>. En ese caso, DEBE establecer aria-level con un número del 1 al 6 (o superior, aunque en la práctica la tecnología de asistencia ignora los niveles más allá del 6).
No omita niveles de encabezado: un <h2> no debe ir seguido de un <h4> sin un <h3> intermedio. Los usuarios de lectores de pantalla que navegan por encabezados dependen de que el esquema del documento sea coherente.
Errores frecuentes
role="heading"sinaria-level. El rol requiere que se indique el nivel.- Textos con apariencia visual de «encabezados» (texto grande y en negrita) envueltos en
<div>o<span>sin rol de encabezado. Los usuarios de lectores de pantalla los omiten por completo. - Múltiples elementos
<h1>en una misma página cuando solo se pretende un encabezado principal. La práctica recomendada es un único<h1>por página que identifique el contenido principal. - Saltar niveles —pasar de
h2ah4— rompe el esquema del documento. - Texto decorativo con apariencia de encabezado que no está destinado a serlo, marcado igualmente como encabezado. Confunde la navegación por lectores de pantalla.
Ejemplo
<!-- Preferido -->
<h2>Cómo presentar una reclamación</h2>
<!-- Solo cuando <h2> es imposible -->
<div role="heading" aria-level="2">Cómo presentar una reclamación</div>