Estructura de puntos de referencia: cómo navegan los lectores de pantalla

Los usuarios de lectores de pantalla no leen una página de arriba abajo como quien se desplaza por un documento: saltan entre regiones con nombre, encabezado, navegación, contenido principal, pie de página, de la misma manera en que el ojo de una persona que ve va directo a una barra de menú sin leer todo lo que hay encima. Esas regiones se llaman puntos de referencia (landmarks), y sin ellos, un usuario de lector de pantalla se ve obligado a leer todo en orden, sin forma de saltar directo a lo que realmente vino a buscar.

Puntos clave

• Los puntos de referencia son regiones semánticas de HTML, <header>, <nav>, <main>, <footer>, <aside>, que le dan a la página un mapa invisible. Un lector de pantalla puede saltar directamente entre ellos.
• Sin puntos de referencia, un usuario de lector de pantalla tiene que escuchar todo en orden: el mismo menú de navegación repetido en cada página, cada vez, sin forma de adelantarse.
• Una página debe tener exactamente un <main>. Más de uno confunde la navegación por puntos de referencia y falla un escaneo automatizado de inmediato.
• Varios elementos <nav> necesitan una etiqueta para distinguirse. Dos regiones de navegación anunciadas ambas simplemente como "navegación" no le dan al usuario forma de saber cuál es cuál.
• Envolver todo en etiquetas <div> genéricas en lugar de elementos semánticos elimina el mapa por completo. Un <div> no tiene rol, así que el lector de pantalla no tiene nada a lo que saltar.

Mensajes de error exactos y cómo corregirlos

Si un escáner lo trajo aquí, estos son los mensajes que axe-core, el motor de código abierto detrás de la mayoría de los verificadores automáticos de accesibilidad, reporta para problemas de puntos de referencia. Los textos coinciden con axe-core 4.11 y se muestran en inglés tal como aparecen en los informes.

"Document does not have a main landmark"

Es la regla landmark-one-main ("el documento debe tener un punto de referencia main"). La página no tiene un elemento <main> ni role="main". Envuelva el contenido principal de la página en un único <main> y deje el encabezado y el pie de página del sitio fuera de él.

"All page content should be contained by landmarks"

Es la regla region; en el elemento que falla dice "Some page content is not contained by landmarks". Hay texto, imágenes o controles fuera de todo <header>, <nav>, <main> y <footer>. Mueva cada uno al punto de referencia al que pertenece, casi siempre <main>.

"Document should not have more than one main landmark"

Es la regla landmark-no-duplicate-main. Dos elementos de la página actúan como <main>, ya sea por la etiqueta o por role="main". Conserve el que contiene el contenido real de la página y cambie el otro a un <div> o a una <section> con etiqueta.

"Landmarks should have a unique role or role/label/title (i.e. accessible name) combination"

Es la regla landmark-unique. Dos puntos de referencia del mismo tipo, normalmente dos elementos <nav>, no tienen nombre o tienen el mismo. Asigne a cada uno su propio aria-label, como aria-label="Main" y aria-label="Footer".

"Main landmark should not be contained in another landmark"

Es la regla landmark-main-is-top-level. Un <main> está anidado dentro de un <header>, <nav>, <aside> o <footer>. Sáquelo para que quede en el nivel superior de la página.

Cuáles de estos corrige Axeazy automáticamente y cuáles esperan su aprobación se explica en "Qué puede corregir Axeazy aquí" más abajo. Los puntos de referencia son una de las dos maneras en que los usuarios de lectores de pantalla se mueven por una página; la otra son los encabezados, que se tratan en errores de estructura de encabezados que rompen la accesibilidad.

Qué hacen realmente los puntos de referencia

Los puntos de referencia son elementos semánticos de HTML que delimitan las regiones principales de una página: <header> para la zona superior, <nav> para los menús de navegación, <main> para el contenido real que alguien vino a leer, <footer> para lo que está al final y <aside> para contenido relacionado de forma tangencial, como una barra lateral.

Cada uno lleva un rol implícito que el lector de pantalla reconoce automáticamente. Eso es lo que los convierte en puntos de referencia y no solo en contenedores: un lector de pantalla puede presentar una lista de todos los puntos de referencia de la página y dejar que el usuario salte directamente a cualquiera de ellos, el mismo atajo que una persona que ve obtiene gratis con solo mirar el diseño visual de la página.

Los atajos de los lectores de pantalla varían según el software, pero la idea es la misma en todos: los usuarios de NVDA recorren los puntos de referencia con la tecla D, los de JAWS con R y los de VoiceOver mediante el rotor. Los tres permiten pasar de largo el encabezado y el menú de navegación repetidos para llegar al contenido real, el mismo menú que ya han escuchado en todas las demás páginas del sitio.

Por qué importa más de lo que parece

Imagine escuchar cada sitio web leído en un solo flujo continuo: logotipo, menú de navegación completo, banners de anuncios y, por fin, el contenido real de la página, en cada página, sin forma de adelantarse. Esa es la experiencia sin puntos de referencia. Alguien que visita diez páginas de producto en una tienda en línea escucha el encabezado y la navegación completos diez veces distintas antes de llegar a lo que realmente intenta comparar.

Los puntos de referencia convierten eso en un mapa real en lugar de una línea recta. Esto es la WCAG 1.3.1, Información y relaciones, en el Nivel A: la estructura y las relaciones de la página deben poder determinarse mediante programación, no solo ser evidentes visualmente. También se conecta con la 2.4.1, Evitar bloques, el requisito de que los usuarios tengan alguna forma de saltarse el contenido repetido; los puntos de referencia son una de las formas estándar de cumplirlo.

Errores comunes que rompen el mapa

Envolver todo en <div> en lugar de elementos semánticos. Un <div> no tiene ningún rol. Visualmente puede verse idéntico a un <header> o <nav> correcto, pero el lector de pantalla no tiene nada a lo que saltar: el punto de referencia simplemente no existe.

<!-- Falla: visualmente es un encabezado, invisible para la navegación por puntos de referencia -->
<div class="header">
  <div class="logo">Site Name</div>
</div>

<!-- Pasa: un punto de referencia real al que el lector de pantalla puede saltar -->
<header>
  <a href="/es" class="logo">Site Name</a>
</header>

Más de un <main> en una página. La especificación de HTML permite exactamente uno. Un segundo no solo fuerza las reglas, sino que confunde activamente la navegación por puntos de referencia y falla un escaneo automatizado.

Varios elementos <nav> sin etiqueta. Si una página tiene un menú de navegación principal y una navegación de pie de página separada, un lector de pantalla anuncia ambos simplemente como "navegación", sin forma de distinguirlos, a menos que cada uno lleve una etiqueta que los diferencie.

<!-- Falla: ambos se anuncian idénticos, como "navegación" sin etiqueta -->
<nav>...</nav>
<nav>...</nav>

<!-- Pasa: cada uno se anuncia de forma distinta -->
<nav aria-label="Main">...</nav>
<nav aria-label="Footer">...</nav>

Anidar <header> o <footer> dentro de <article> o <section>. Pierden por completo su rol de punto de referencia cuando se anidan así; solo se reconocen como puntos de referencia de la página en el nivel superior del documento, no dentro de otra región de contenido.

Usar <section> sin etiqueta. Una <section> solo se convierte en un punto de referencia real cuando se le da un nombre accesible mediante aria-label o aria-labelledby. Una <section> sin etiqueta no se registra como punto de referencia.

Cómo revisar su propio sitio

No necesita tener instalado un lector de pantalla para detectar la mayor parte de esto.

1. Vea el código fuente de la página o abra el panel Elements de DevTools. Busque <div class="header"> o similar: los contenedores genéricos que ocupan el lugar de elementos reales de puntos de referencia son el fallo más común.
2. Cuente sus elementos <main>. Debe haber exactamente uno por página.
3. Revise que cada <nav> tenga una etiqueta, si hay más de uno en la página.
4. O ejecute un escaneo en lugar de revisar elemento por elemento. El escaneo gratuito de Axeazy revisa toda la estructura de puntos de referencia de una página en unos 60 segundos, junto con las demás categorías de corrección que cubre.

Qué puede corregir Axeazy aquí

Esta categoría se divide limpiamente en dos tipos de cambio, y solo uno puede ocurrir sin preguntar primero.

Agregar una etiqueta faltante es una adición pura: nada se mueve, nada se renombra, así que Axeazy lo corrige automáticamente: una región de contenido huérfana sin etiqueta recibe una construida a partir de su id, clase o nombre de etiqueta, y los puntos de referencia duplicados que carecen de una etiqueta distintiva reciben una. Ambas son correcciones automáticas reales y funcionales.

Reestructurar un punto de referencia existente, cambiar un <header> duplicado a un <div> simple, sacar un <main> anidado al nivel superior, arreglar un <nav> enterrado donde no debería estar, es un cambio estructural visible, no una adición silenciosa. Axeazy calcula la corrección adecuada para estos casos, pero no se escribe nada hasta que usted o su desarrollador lo aprueben explícitamente en el panel. Es una línea deliberada: agregar una etiqueta invisible no necesita aprobación; cambiar la estructura real de su página, sí.

Preguntas frecuentes

¿Cuántos elementos <main> debe tener una página?

Exactamente uno. La especificación de HTML solo permite uno, y tener más de uno rompe la navegación por puntos de referencia para los usuarios de lectores de pantalla y falla un escaneo de accesibilidad automatizado.

¿Necesito etiquetar cada <nav> de mi página?

Solo si hay más de uno. Una única región de navegación no necesita etiqueta: el lector de pantalla la anuncia como "navegación" y eso es inequívoco. Cuando hay dos o más, cada una necesita una etiqueta distintiva como aria-label="Main" o aria-label="Footer" para que los usuarios puedan distinguirlas.

¿Usar <section> crea automáticamente un punto de referencia?

No. Una <section> solo se convierte en punto de referencia una vez que tiene un nombre accesible, dado mediante aria-label o aria-labelledby. Sin él, es solo un contenedor genérico, igual que un <div> para efectos de los puntos de referencia.

¿Puedo anidar un <header> dentro de un <article>?

Puede, pero pierde su rol de punto de referencia a nivel de página cuando se anida así. Un <header> o <footer> solo se reconoce como punto de referencia de nivel superior cuando está directamente en el nivel de la página, no dentro de otra región de contenido.

¿Corregir solo los puntos de referencia hace que mi sitio sea fácil de navegar?

Ninguna corrección individual lo cubre todo. Los puntos de referencia resuelven un problema específico: permitir que los usuarios salten entre las regiones principales en lugar de leer todo en orden. Una página aún puede tener otros problemas de navegación, una estructura de encabezados rota o un orden de tabulación confuso, que necesitan su propia revisión por separado.

Fuentes

• W3C: Entender el criterio de éxito 1.3.1, Información y relaciones
• W3C: Entender el criterio de éxito 2.4.1, Evitar bloques