Legible y predecible: 3.1.x y 3.2.x, incluido 3.2.6 Ayuda coherente

El principio Comprensible exige que la información y el funcionamiento de la interfaz se entiendan. Sus dos primeras pautas, Legible (3.1) y Predecible (3.2), suelen recibir menos atención que el contraste o el teclado, pero sus fallos afectan a personas con discapacidad cognitiva, a usuarios de lectores de pantalla (que dependen del idioma declarado) y a quienes necesitan que la web se comporte siempre igual. Aplicaremos las definiciones de cambio de contexto, conjunto de páginas y mismo orden relativo que viste en la lección 2. Esta lección detalla cómo evaluarlos, con el nuevo 3.2.6 Ayuda coherente de WCAG 2.2.

3.1.1 Idioma de la página (A)

El idioma principal de cada página debe poder determinarse programáticamente: atributo lang en el elemento html con un código válido (es, ca, eu, gl, en). Los lectores de pantalla eligen la voz y las reglas de pronunciación a partir de él; un lang="en" en una página en castellano hace que NVDA lea el texto con fonética inglesa, inteligible a medias. Fallos: ausencia del atributo; valor incorrecto heredado de la plantilla; valor no válido (lang="español"); en sitios multilingües, el atributo no cambia al cambiar de idioma. Prueba: inspecciona <html lang> en cada página y en cada versión lingüística; escucha el inicio de la página con el lector.

3.1.2 Idioma de las partes (AA)

Los pasajes o frases en otro idioma deben marcarse con lang en el elemento que los contiene, salvo nombres propios, términos técnicos, palabras de idioma indeterminado y palabras o frases que forman parte del lenguaje habitual del texto circundante («software», «online»). Dónde aparece: selectores de idioma («English», «Français» deben llevar su lang), citas, títulos de obras, contenido bilingüe en comunidades con lengua cooficial, interfaces con textos en inglés sin traducir. Prueba: localiza los cambios de idioma y comprueba el atributo; con el lector, escucha si la voz cambia.

<html lang="es">
…
<ul aria-label="Idioma">
  <li><a href="/ca/" lang="ca" hreflang="ca">Català</a></li>
  <li><a href="/en/" lang="en" hreflang="en">English</a></li>
</ul>
…
<blockquote lang="en">The power of the Web is in its universality.</blockquote>

3.2.1 Al recibir el foco (A) y 3.2.2 Al recibir entradas (A)

Recibir el foco no puede provocar un cambio de contexto: abrir una ventana, mover el foco a otro elemento, cambiar de página o reorganizar el contenido de forma significativa. Cambiar una opción de un control (seleccionar un valor en un select, marcar una casilla) tampoco puede provocarlo, salvo que se haya avisado antes. Fallos típicos: select de «ir a» que navega al cambiar de opción sin botón; formularios que se envían al marcar la última casilla; campos que al recibir el foco abren un modal; avance automático al siguiente campo al completar un dígito (aceptable solo si se advierte y es predecible). Un desplegable que muestra u oculta campos relacionados sin mover el foco no es cambio de contexto. Prueba: tabula por todos los controles y cambia valores con teclado sin pulsar Enter; observa si algo salta.

3.2.3 Navegación coherente (AA) y 3.2.4 Identificación coherente (AA)

Los mecanismos de navegación repetidos en un conjunto de páginas aparecen en el mismo orden relativo cada vez, salvo que el usuario inicie el cambio. Los componentes con la misma función se identifican de forma coherente (mismo nombre, mismo icono, mismo alt). Fallos: menú principal con elementos en distinto orden según la sección; buscador en la cabecera en unas páginas y en el pie en otras; icono de lupa con alt «Buscar» en una página y «Ir» en otra; «Descargar» frente a «Obtener PDF» para la misma acción. Estos criterios se evalúan comparando páginas, así que se completan al terminar la muestra. Nota: «mismo orden relativo» permite que en una sección se añadan o quiten elementos, siempre que los comunes conserven su orden.

3.2.6 Ayuda coherente (A) — nuevo en 2.2

Si una página de un conjunto ofrece alguno de estos mecanismos de ayuda, debe aparecer en el mismo orden relativo respecto al resto del contenido en todas las páginas del conjunto que lo incluyan, salvo que el usuario provoque el cambio: datos de contacto humano (teléfono, correo, horario), mecanismo de contacto humano (chat con persona, formulario), opción de autoayuda (preguntas frecuentes, ayuda) y mecanismo de contacto totalmente automatizado (chatbot).

El criterio no exige que exista ayuda, ni que esté en todas las páginas: exige que, cuando esté, esté siempre en el mismo sitio relativo. Está pensado para personas con discapacidad cognitiva que necesitan encontrar la ayuda sin buscarla cada vez. Prueba: en la muestra, localiza los mecanismos de ayuda de cada página (cabecera, pie, lateral, botón flotante) y compara su posición en el orden del contenido; es independiente del diseño visual exacto, pero el orden en el DOM y la ubicación general deben coincidir. Fallos: chat de atención que aparece como botón flotante en la portada y solo en el pie en las fichas; teléfono de contacto que en unas páginas aparece en la cabecera y en otras, en el pie (que una página no incluya un mecanismo de ayuda no es, por sí solo, un fallo).

3.2.5 Cambios a petición (AAA)

Aunque es AAA, es útil como recomendación: todo cambio de contexto se produce solo a petición del usuario, o existe un mecanismo para desactivar los automáticos. Las redirecciones automáticas, los refrescos periódicos y las ventanas que se abren solas lo incumplen.

Cómo documentar los hallazgos de estas pautas

Para 3.1.x, el hallazgo debe incluir el valor del atributo encontrado y el esperado, y la evidencia de la voz incorrecta del lector cuando sea relevante. Para 3.2.1 y 3.2.2, describe la acción que provoca el cambio (tabular hasta X, cambiar la opción Y) y el cambio ocurrido (navegación, apertura de ventana, pérdida de foco). Para los criterios de coherencia, aporta capturas comparadas de dos o más páginas con el elemento señalado, e indica a qué conjunto de páginas pertenecen (todo el sitio, la sede electrónica, el área privada).

Resumen

• 3.1.1: lang válido en html, correcto en cada versión lingüística; 3.1.2: lang en pasajes en otro idioma, incluidos los selectores de idioma, con las excepciones de nombres propios y términos integrados.
• 3.2.1 y 3.2.2: ni recibir el foco ni cambiar el valor de un control provocan cambios de contexto no anunciados; los select que navegan solos son el fallo clásico.
• 3.2.3 y 3.2.4: navegación en el mismo orden relativo e identificación coherente de componentes a lo largo del conjunto de páginas.
• 3.2.6: los mecanismos de ayuda (contacto humano, autoayuda, chatbot) ocupan el mismo lugar relativo en todas las páginas que los incluyen; no obliga a tener ayuda.
• Los criterios de coherencia se evalúan comparando páginas al final de la muestra, con capturas comparadas como evidencia.