Cuando navegamos por una interfaz web o una aplicaci\u00f3n m\u00f3vil, probablemente no somos conscientes de la importancia que tienen los encabezados. Para la mayor\u00eda de los usuarios estas marcas sem\u00e1nticas s\u00f3lo se aprecian por un cambio de tama\u00f1o del texto o por un resaltado de su aspecto visual pero para personas con discapacidad visual o cognitiva resultan imprescindibles para comprender mejor la interfaz que est\u00e1n navegando.<\/p>\n
Los encabezados son elementos que organizan y estructuran el contenido de una p\u00e1gina o pantalla. En HTML, estos se definen mediante marcas sem\u00e1nticas o etiquetas como <h1>, <h2>, <h3>, y as\u00ed sucesivamente hasta <h6>. En interfaces m\u00f3viles, los encabezados suelen representarse como texto destacado o t\u00edtulos que dividen secciones de contenido y utilizan atributos de la API de accesibilidad para que esos bloques de texto sean identificados como encabezados sem\u00e1nticos.<\/p>\n
Para los usuarios sin discapacidad visual, los encabezados facilitan una comprensi\u00f3n visual r\u00e1pida del contenido y su jerarqu\u00eda. en cambio, para los usuarios que dependen de tecnolog\u00edas de asistencia como lectores de pantalla, los encabezados son mucho m\u00e1s que un simple formato: son un mapa estructural que permite moverse r\u00e1pidamente por la p\u00e1gina o la app.<\/p>\n
Por ejemplo, una persona ciega que usa un lector de pantalla puede saltar entre los encabezados para encontrar secciones espec\u00edficas sin tener que escuchar todo el contenido desde el principio. Esto es especialmente \u00fatil en p\u00e1ginas con mucho texto o pantallas m\u00f3viles con varias secciones de informaci\u00f3n.
Para las personas con discapacidad cognitiva esta estructura de encabezados les permite asimilar y comprender c\u00f3mo se ha estructurado la informaci\u00f3n y los elementos de navegaci\u00f3n en la interfaz.<\/p>\n
Las Pautas de Accesibilidad para el Contenido Web (WCAG) incluyen un criterio espec\u00edfico que aborda la correcta implementaci\u00f3n de los encabezados. Este criterio est\u00e1 relacionado con el principio de Perceptible y se resume as\u00ed:<\/p>\n
Este criterio establece que, si el contenido est\u00e1 dividido en secciones, cada una debe contar con un encabezado descriptivo que refleje su prop\u00f3sito o tema. Esto no solo mejora la navegaci\u00f3n, sino tambi\u00e9n la comprensi\u00f3n del contenido. Puedes leer m\u00e1s detalles sobre el criterio 2.4.10<\/a> en la p\u00e1gina oficial del W3C.<\/p>\n Para cumplir con este criterio debemos asegurarnos de: A la hora de estructurar los contenidos de una interfaz web o de una pantalla de una aplicaci\u00f3n es aconsejable seguir los siguientes puntos: El encabezado principal de la p\u00e1gina o pantalla debe ser un <h1>. A partir de ah\u00ed, usa <h2> para las subsecciones principales, <h3> para las subsecciones de estas, y as\u00ed sucesivamente. Esto crea un flujo l\u00f3gico que las tecnolog\u00edas de asistencia pueden interpretar f\u00e1cilmente.<\/p>\n Ejemplo en HTML:<\/p>\n 2. Prohibido usar encabezados para aplicar un estilo visual a un texto<\/p>\n Es com\u00fan usar etiquetas de encabezado simplemente porque hacen el texto m\u00e1s grande o m\u00e1s llamativo. Esto es un error, ya que confunde a los usuarios de lectores de pantalla. Si es necesario aplicar un estilo concreto a un texto grande sin que sea un encabezado, es aconsejable usar estilos CSS en lugar de etiquetas como <h1>.<\/p>\n 3. Los encabezados deben ser claros y concisos<\/p>\n Un buen encabezado es breve y refleja con precisi\u00f3n el contenido de su secci\u00f3n. Por ejemplo, \u201cConfiguraci\u00f3n avanzada\u201d es mejor que \u201cDetalles sobre las configuraciones avanzadas\u201d.<\/p>\n Muchas herramientas automatizadas para la detecci\u00f3n de barreras de accesibilidad identifican la mayor\u00eda de problemas relacionados con el criterio WCAG 2.4.10. Tanto Wave<\/a> como Lighthouse<\/a> o Axe<\/a> pueden detectar si falta alg\u00fan encabezado o si se han utilizado de manera incorrecta. Cuando navegamos por una interfaz web o una aplicaci\u00f3n m\u00f3vil, probablemente no somos conscientes de la importancia que tienen los encabezados. Para la mayor\u00eda de los usuarios estas marcas sem\u00e1nticas s\u00f3lo se aprecian por un cambio de tama\u00f1o del texto o por un resaltado de su aspecto visual pero para personas con discapacidad visual o … <\/p>\n
\u2022 Usar encabezados de forma jer\u00e1rquica y l\u00f3gica (por ejemplo, <h1> para el t\u00edtulo principal, <h2> para subt\u00edtulos, etc.).
\u2022 Los encabezados deben ser descriptivos. Un encabezado como \u201cServicios\u201d es claro, pero uno como \u201cM\u00e1s informaci\u00f3n\u201d es ambiguo.
\u2022 Evitar saltos innecesarios en los niveles de encabezado (por ejemplo, pasar de un <h1> directamente a un <h3> sin un <h2> intermedio).<\/p>\nBuenas pr\u00e1cticas<\/h2>\n
1. Respetar una estructura jer\u00e1rquica<\/p>\n<h1>Recetas saludables<\/h1>
<h2>Desayunos<\/h2>
<h3>Zumos y batidos saludables<\/h3>
<h3>Tostadas con aguacate<\/h3>
<h2>Cenas<\/h2>
<h3>Ensaladas ligeras<\/h3>
<h3>Sopas nutritivas<\/h3><\/pre>\nC\u00f3mo comprobar la accesibilidad de los encabezados<\/h2>\n
En cualquier caso es muy recomendable realizar una verificaci\u00f3n manual utilizando un lector de pantallas como NVDA<\/a>, VoiceOver, TalkBack o JAWS. Todos estos lectores de pantalla incorporan funciones para navegar por encabezados o mostrar una lista con los encabezados detectados.<\/p>\n","protected":false},"excerpt":{"rendered":"