p-as-heading
El texto con estilo de encabezado probablemente debería ser un encabezado real
Marca los elementos <p> y <div> cortos cuyo texto está todo en negrita y se renderiza a >=18px, para revisar manualmente si debería usarse un elemento de encabezado real.
Ámbito de aplicación. Elementos <p>, y elementos <div> que solo contienen texto y marcado en línea, cuyo texto visible es corto (<=120 caracteres) y no vacío, y en los que cada fragmento de texto visible está en negrita (font-weight calculado >= 700, venga de donde venga: del propio elemento, de un <strong>/<b> o de un <span> con estilo) y se renderiza a >=18px. El texto visible es el texto que se renderiza (no display:none, [hidden] ni visibility:hidden) y que no es solo para lectores de pantalla. Se deja fuera el texto que está entero dentro de controles (el texto propio de un widget o de un <label>).
Resultado esperado. El texto con estilo que visualmente se lee como un encabezado (negrita, tamaño mayor que el del cuerpo, corto) debería estar marcado con un elemento de encabezado real (<h1>-<h6> o role="heading") para que su rol estructural sea determinable de forma programática, la misma preocupación de 1.3.1 que cualquier otro problema de "estructura transmitida solo mediante presentación".
Qué informa un hallazgo.
reasonCode:HEADING_LIKE_NUMBERcuando el texto es solo un número (dígitos con espacios y puntuación: "2024"; "No 12" no lo es),HEADING_LIKE_LINKcuando está entero dentro de un enlace, para que un informe pueda apartar cualquiera de los dos tipos como grupo; en otro caso,BOLD_LARGE_PARAGRAPHpara un <p> yBOLD_LARGE_DIVpara un <div>. En todos se pregunta.fontSizePx: el tamaño de fuente del texto tal como se dibuja, en píxeles CSS (el tamaño calculado multiplicado por el zoom de CSS, una transformación SVG o lo que escala la fuente font-size-adjust), el menor cuando los fragmentos difieren, frente al umbral de 18px.
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
<style>.fakeHeading { font-weight: bold; font-size: 22px; }</style><p class="fakeHeading">Section Title</p>
En negrita, con tamaño de encabezado y corto: visualmente es un encabezado, pero está marcado como un <p> simple sin semántica de encabezado.
<p>Just a normal paragraph of body text that is not bold at all.</p>
Peso y tamaño normales; nada sugiere visualmente un encabezado.
<div style="font-size: 24px"><span style="font-weight: bold">Our team</span></div>
Un <div> que solo contiene texto se comprueba como un <p>, y la negrita puede venir de un <span> con estilo dentro de él. No se pregunta por un <div> que contiene otros bloques, ni por el texto dentro de un botón, una etiqueta o una cabecera de tabla.
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.
BOLD_LARGE_DIV
- Localizar el bloque de texto en negrita y de gran tamaño que indica el informe y observarlo en la página.
- Decidir si presenta el contenido que le sigue, como lo hace un título de sección, o si es solo énfasis, un texto destacado o un valor.
- Si actúa como título, comprobar en el panel Accesibilidad de las herramientas para desarrolladores, o con la lista de encabezados de un lector de pantalla, si se expone como encabezado.
Se cumple. El texto no es un título de sección (énfasis, una cita, un precio o una estadística), o está marcado como encabezado (h1 a h6 o role="heading").
No se cumple. El texto titula visualmente una sección pero no es un encabezado, así que su estructura solo se muestra mediante el estilo, lo que incumple WCAG 1.3.1 (F2).
BOLD_LARGE_PARAGRAPH
- Localizar el párrafo en negrita y de gran tamaño que indica el informe y observarlo en la página.
- Decidir si presenta el contenido que le sigue, como lo hace un título de sección, o si es solo énfasis, un texto destacado o un valor.
- Si actúa como título, comprobar en el panel Accesibilidad de las herramientas para desarrolladores, o con la lista de encabezados de un lector de pantalla, si se expone como encabezado.
Se cumple. El texto no es un título de sección (énfasis, una cita, un precio o una estadística), o está marcado como encabezado (h1 a h6 o role="heading").
No se cumple. El texto titula visualmente una sección pero no es un encabezado, así que su estructura solo se muestra mediante el estilo, lo que incumple WCAG 1.3.1 (F2).
HEADING_LIKE_LINK
- Localizar el texto enlazado en negrita y de gran tamaño que indica el informe y observarlo en la página.
- Decidir si presenta el contenido que le sigue, como lo hace un título de sección, o si es solo énfasis, un texto destacado o un valor.
- Si actúa como título, comprobar en el panel Accesibilidad de las herramientas para desarrolladores, o con la lista de encabezados de un lector de pantalla, si se expone como encabezado.
Se cumple. El texto no es un título de sección (énfasis, una cita, un precio o una estadística), o está marcado como encabezado (h1 a h6 o role="heading").
No se cumple. El texto titula visualmente una sección pero no es un encabezado, así que su estructura solo se muestra mediante el estilo, lo que incumple WCAG 1.3.1 (F2).
HEADING_LIKE_NUMBER
- Localizar el número en negrita y de gran tamaño (como un año) que indica el informe y observarlo en la página.
- Decidir si presenta el contenido que le sigue, como lo hace un título de sección, o si es solo énfasis, un texto destacado o un valor.
- Si actúa como título, comprobar en el panel Accesibilidad de las herramientas para desarrolladores, o con la lista de encabezados de un lector de pantalla, si se expone como encabezado.
Se cumple. El texto no es un título de sección (énfasis, una cita, un precio o una estadística), o está marcado como encabezado (h1 a h6 o role="heading").
No se cumple. El texto titula visualmente una sección pero no es un encabezado, así que su estructura solo se muestra mediante el estilo, lo que incumple WCAG 1.3.1 (F2).