Los elementos `<p>` con estilos no deben usarse como encabezados

Cuando un desarrollador usa CSS para hacer que un elemento <p> parezca un encabezado — aumentando el tamaño de fuente, añadiendo peso en negrita o aplicando otros estilos visuales — los usuarios videntes pueden percibirlo como un encabezado, pero las tecnologías de asistencia no pueden. Los lectores de pantalla identifican los encabezados por su marcado semántico, no por su apariencia visual. Un elemento <p> con estilos para parecer un encabezado sigue siendo anunciado como un párrafo común, lo que significa que la estructura del documento es invisible para cualquier persona que dependa de la navegación programática por encabezados.

Este problema afecta principalmente a usuarios ciegos y sordociegos que dependen de lectores de pantalla, así como a usuarios con discapacidades de movilidad que navegan mediante atajos de teclado. Los usuarios de lectores de pantalla frecuentemente saltan entre encabezados para ojear el contenido de una página — de manera similar a cómo los usuarios videntes escanean visualmente en busca de texto más grande y en negrita. Cuando los encabezados no están marcados correctamente, estos usuarios deben escuchar todo el contenido de forma lineal, perdiendo tiempo y esfuerzo significativo.

Esta regla se relaciona con el Criterio de Éxito 1.3.1 de WCAG 2.1: Información y Relaciones, que requiere que la información, estructura y relaciones transmitidas a través de la presentación sean determinables programáticamente o estén disponibles en texto. Cuando un párrafo tiene estilos para parecer un encabezado, la relación estructural que implica (una etiqueta de sección) solo se transmite visualmente y falla este criterio.

Cómo solucionarlo

1. Identifica párrafos con estilos que actúan como encabezados. Busca elementos <p> con CSS que aumente font-size, aplique font-weight: bold, o de otra manera los haga visualmente distintos de una forma que sugiera un encabezado.
2. Reemplázalos con elementos de encabezado semánticos. Usa <h1> a <h6> basándote en la posición del elemento en la jerarquía del documento.
3. Mantén un orden lógico de encabezados. Comienza el contenido principal con un <h1>, usa <h2> para secciones principales, <h3> para sub-secciones dentro de esas, y así sucesivamente. Evita saltarte niveles (por ejemplo, saltar de <h2> a <h4>).
4. Mueve los estilos visuales al elemento de encabezado. Aplica cualquier estilo CSS deseado al elemento de encabezado en lugar del párrafo.

Como buena práctica, el <h1> debería aparecer al principio del contenido principal para que los usuarios de lectores de pantalla puedan saltar directamente a él usando atajos de teclado. Las sub-secciones deberían usar <h2>, con anidamiento más profundo usando <h3> a <h6> según sea necesario. Los encabezados deberían ser breves, claros y únicos para maximizar su utilidad como puntos de referencia de navegación.

Más allá de la accesibilidad, la estructura apropiada de encabezados también beneficia al SEO, ya que los motores de búsqueda usan los encabezados para entender y clasificar el contenido de la página.

Ejemplos

Incorrecto: párrafo con estilos usado como encabezado

En este ejemplo, un elemento <p> tiene estilos visuales para parecer un encabezado pero no proporciona información semántica de encabezado a las tecnologías de asistencia.

<style>
  .fake-heading {
    font-size: 24px;
    font-weight: bold;
    margin-top: 1em;
  }
</style>

<p class="fake-heading">Our Services</p>
<p>We offer a wide range of consulting services.</p>

Correcto: elemento de encabezado apropiado con estilos

Reemplaza el <p> con estilos con un elemento de encabezado apropiado. Los mismos estilos visuales pueden aplicarse al encabezado si es necesario.

<style>
  h2 {
    font-size: 24px;
    font-weight: bold;
    margin-top: 1em;
  }
</style>

<h2>Our Services</h2>
<p>We offer a wide range of consulting services.</p>

Incorrecto: múltiples párrafos con estilos imitando una jerarquía de encabezados

<p style="font-size: 32px; font-weight: bold;">Welcome to Our Site</p>
<p>Some introductory content here.</p>

<p style="font-size: 24px; font-weight: bold;">About Us</p>
<p>Learn more about our team.</p>

<p style="font-size: 18px; font-weight: bold;">Our Mission</p>
<p>We strive to make the web accessible.</p>

Correcto: jerarquía de encabezados semántica

<h1>Welcome to Our Site</h1>
<p>Some introductory content here.</p>

<h2>About Us</h2>
<p>Learn more about our team.</p>

<h3>Our Mission</h3>
<p>We strive to make the web accessible.</p>

Qué verifica esta regla

Esta regla examina elementos <p> y marca cualquiera que haya sido estilizado para asemejarse visualmente a encabezados a través de propiedades CSS como font-size aumentado, font-weight: bold, o font-style: italic. Si los estilos de un párrafo lo hacen parecer un encabezado, debería convertirse en un elemento de encabezado apropiado en su lugar.

Learn more:

Deque Reference

Deque University - How To Fix

→

accessibility.psu.edu

PennState Accessibility - Heading Tags

→