Enlaces con sentido, abreviaturas e idioma del contenido

Tres detalles de redacción que pasan desapercibidos para la mayoría de los lectores tienen un impacto enorme en quienes usan tecnologías de apoyo: el texto de los enlaces, las abreviaturas y el idioma declarado del contenido. Los tres dependen del redactor o gestor de contenidos, no del equipo de desarrollo, y los tres tienen criterios WCAG concretos detrás: 2.4.4 Propósito de los enlaces (en contexto), 3.1.1 Idioma de la página y 3.1.2 Idioma de las partes.

Enlaces con sentido (2.4.4)

Las personas que usan lector de pantalla navegan a menudo por la lista de enlaces de la página, fuera de contexto. Si esa lista dice «leer más, leer más, aquí, pinche aquí, más información», no sirve de nada. El criterio 2.4.4 Propósito de los enlaces (en contexto), de nivel A, exige que el propósito de cada enlace pueda determinarse a partir de su texto, o del texto junto con su contexto inmediato (la misma frase, el mismo párrafo, la misma celda de tabla o el elemento de lista que lo contiene). El criterio 2.4.9 Propósito de los enlaces (solo enlaces), de nivel AAA, va más allá y pide que el texto del enlace baste por sí solo.

Reglas prácticas:

• El texto del enlace describe el destino o la acción: «Descargar el formulario de solicitud (PDF, 230 KB)», «Consultar el calendario fiscal».
• Evita «aquí», «este enlace», «pulsa», «más información» como único texto.
• No uses la URL como texto salvo que sea muy corta y reconocible; un lector de pantalla leerá «hache te te pe dos puntos barra barra…».
• Enlaces con el mismo texto deberían llevar al mismo destino; si tienes diez «Ver detalle», incluye el título de cada noticia en el enlace (puede ir visualmente oculto).
• Avisa si el enlace abre en una nueva ventana o descarga un fichero, e indica el formato y el tamaño.
• Los enlaces deben distinguirse del texto normal por algo más que el color: subrayado, por ejemplo. Lo veremos en el criterio 1.4.1 Uso del color en el curso de color y contraste.

<!-- Incorrecto -->
<p>Para solicitar la beca, pulsa <a href="/becas/solicitud">aquí</a>.</p>

<!-- Correcto -->
<p>Puedes <a href="/becas/solicitud">solicitar la beca en la sede electrónica</a>.</p>

<!-- Correcto: documento descargable -->
<a href="/docs/bases.pdf">Bases de la convocatoria (PDF, 1,2 MB)</a>

Abreviaturas y siglas

Las abreviaturas son un obstáculo doble: de comprensión (no todo el mundo sabe qué es la «AEAT» o el «IRPF») y de lectura por voz (un sintetizador puede leer «BOE» como palabra o letra a letra según el contexto). El criterio 3.1.4 Abreviaturas (AAA) pide un mecanismo para conocer la forma expandida, pero aunque sea AAA la buena práctica es sencilla y gratuita:

• Escribe la forma completa la primera vez que aparece en la página, seguida de la sigla entre paréntesis: «Agencia Estatal de Administración Tributaria (AEAT)». A partir de ahí puedes usar la sigla.
• Puedes marcar la sigla con <abbr title="Agencia Estatal de Administración Tributaria">AEAT</abbr>. Ten en cuenta que el atributo title no es accesible por teclado ni en pantalla táctil, así que no sustituye a la expansión en el texto; es un complemento.
• Evita abreviaturas innecesarias en texto corrido: «p. ej.», «etc.», «aprox.» se escriben mejor completas.
• Las siglas muy conocidas (ONU, DNI, IVA) no necesitan expansión, pero ante la duda, expándelas.

Idioma de la página y de las partes (3.1.1 y 3.1.2)

Un lector de pantalla cambia de sintetizador de voz según el idioma declarado. Si una página en español no lo declara, o lo declara mal, se leerá con pronunciación inglesa y será casi ininteligible. El criterio 3.1.1 Idioma de la página (nivel A) exige que el idioma principal esté indicado mediante programación: en HTML, el atributo lang del elemento <html>. El criterio 3.1.2 Idioma de las partes (nivel AA) exige lo mismo para cualquier fragmento en otro idioma, salvo nombres propios, términos técnicos, palabras de idioma indeterminado y expresiones que ya forman parte del idioma circundante.

<html lang="es">
...
<p>La Comisión publicó el informe <span lang="en">Web Accessibility
in Europe: state of play</span> en marzo.</p>

<p>Pàgina en català: <a href="/ca/" lang="ca" hreflang="ca">Inici</a></p>

Qué significa esto para quien redacta:

• Comprueba que la plantilla del sitio declara lang="es" (o ca, eu, gl; para el valenciano, ca o la variante ca-valencia). Muchas plantillas compradas vienen con lang="en" y nadie lo cambia.
• En sitios multilingües, cada versión declara su idioma, y el selector de idioma muestra cada opción escrita en su propio idioma («Català», «English») con el atributo lang correspondiente.
• Cuando incluyas una cita o un título en otro idioma dentro de un párrafo, pide al editor que lo marque con lang. Algunos editores (TinyMCE, CKEditor, Gutenberg con bloques adecuados) lo permiten; si el tuyo no, es una petición razonable al equipo técnico.
• Los anglicismos ya asimilados («software», «marketing», «web») no necesitan marcado.

Cómo comprobarlo

• Enlaces: en NVDA, Insert+F7 muestra la lista de enlaces. Léela sin mirar la página: ¿sabes a dónde lleva cada uno?
• Idioma: axe DevTools y WAVE detectan la ausencia del atributo lang o un valor no válido.
• Abreviaturas: busca grupos de mayúsculas y comprueba que la primera aparición está expandida.

Resumen

• 2.4.4 Propósito de los enlaces (A): el texto del enlace, con su contexto inmediato, debe indicar a dónde lleva. Nada de «aquí» ni «leer más» sin más.
• Indica formato y tamaño en enlaces a documentos y avisa de aperturas en nueva ventana.
• Expande las siglas la primera vez; <abbr> es un complemento, no un sustituto.
• 3.1.1 Idioma de la página (A) y 3.1.2 Idioma de las partes (AA): atributo lang en <html> y en los fragmentos en otro idioma.
• Comprueba la lista de enlaces del lector de pantalla y el atributo lang con WAVE o axe.