Punto de referencia — glosario de Disability World

Los puntos de referencia son regiones de nivel de página entre las que los usuarios de lectores de pantalla pueden saltar directamente mediante atajos de teclado específicos. Son el equivalente en la página de las divisiones por capítulos en un libro: un usuario con visión obtiene la estructura a partir de pistas visuales (la cabecera visible en la parte superior, la barra lateral a la derecha, el pie de página en la parte inferior); un usuario de lector de pantalla obtiene la estructura a partir de los puntos de referencia.

Los puntos de referencia estándar

Cada uno de ellos existe tanto como elemento HTML5 como en forma de rol ARIA. Utilice el elemento HTML5 siempre que sea posible; el rol ARIA existe para los casos en que no es posible usar el elemento nativo.

Región	Elemento HTML5	Rol ARIA
Cabecera de página (logotipo, navegación principal)	`<header>` (nivel superior)	`role="banner"`
Navegación principal	`<nav>`	`role="navigation"`
Contenido principal	`<main>`	`role="main"`
Contenido complementario (barra lateral)	`<aside>`	`role="complementary"`
Pie de página (derechos de autor, enlaces secundarios)	`<footer>` (nivel inferior)	`role="contentinfo"`
Búsqueda	`<search>` (HTML5) o `<form role="search">`	`role="search"`
Región genérica que necesita identificación	—	`role="region"` (con etiqueta)
Formulario (si no es de búsqueda)	`<form>`	`role="form"`

Hay que tener en cuenta que <header> y <footer> se corresponden con banner y contentinfo solo cuando son hijos directos de <body>. Un <header> dentro de un <article> es simplemente una cabecera de artículo: no se convierte en un punto de referencia de tipo banner.

Cómo los usan los usuarios de lectores de pantalla

Cada lector de pantalla principal dispone de un modo de navegación exclusivo por puntos de referencia:

JAWS: R avanza por los puntos de referencia; Mayús+R retrocede; Insert+F7 abre la lista de todos los puntos de referencia.
NVDA: D avanza por los puntos de referencia; Mayús+D retrocede; Insert+F7 abre la lista de elementos.
VoiceOver (macOS): VO+U abre el rotor; gire hasta «Puntos de referencia»; navegue con las teclas de flecha.
VoiceOver (iOS): gire con dos dedos hasta «Puntos de referencia» en el rotor; deslice hacia arriba o hacia abajo para recorrerlos.
TalkBack (Android): deslice hacia arriba y luego hacia la derecha para abrir el menú de controles de lectura; seleccione el modo «Puntos de referencia»; deslice hacia la derecha para avanzar.

Una página con buenos puntos de referencia ofrece al usuario del lector de pantalla una tabla de contenidos accesible con una sola pulsación de tecla.

Errores comunes en los puntos de referencia

Sin <main>. Sin un punto de referencia principal, los usuarios de lectores de pantalla deben recorrer con Tab toda la cabecera en cada carga de página. Toda página debe tener exactamente un <main>.
Múltiples <nav> sin etiquetar. Una página con una barra de navegación superior y otra lateral, cada una como <nav>, obliga al usuario del lector de pantalla a elegir entre dos entradas «navegación» indistinguibles. Etiquete cada una con aria-label: <nav aria-label="Principal">, <nav aria-label="Contenidos de la página">.
role="banner" en un elemento interior. Un <header> dentro de <main> o <article> no es un banner; es una cabecera de artículo. No añada role="banner" en ese caso.
Puntos de referencia duplicados. Dos <main> en una misma página infringen la regla «landmark-no-duplicate-main». Tanto axe como Lighthouse detectan esta situación.
Región sin etiqueta. role="region" requiere aria-label o aria-labelledby. De lo contrario, los lectores de pantalla la ignoran.

Cómo auditar los puntos de referencia

Abra la página en cualquier lector de pantalla moderno, pulse el atajo para abrir la lista de puntos de referencia y compruebe:

Que haya exactamente un banner, un main y un contentinfo.
Que cada <nav> tenga un nombre accesible diferenciado.
Que la estructura de puntos de referencia coincida con la estructura visual de la página.

Una lista de puntos de referencia que muestre «banner, navigation, navigation, main, complementary, contentinfo» sin más etiquetas implica que el usuario no puede distinguir las dos navegaciones. Hay que corregirlo.