Cómo escribir textos de enlaces y botones que se entiendan fuera de contexto

Una oración como “Para ver nuestros precios, haz clic aquí” se lee perfectamente en la página. Fuera de la oración, el enlace son dos palabras que no apuntan a ningún sitio en particular, y fuera de la oración es justamente como mucha gente se lo encuentra.

Una aclaración antes de seguir: el auditor reconoce las frases vagas en inglés (“click here”, “read more”), no en español, así que una etiqueta como “Haz clic aquí” no se marcará. Por eso los ejemplos que describen lo que detecta la herramienta están en inglés.

Por qué desaparece la oración que rodea a un enlace

Una lista de enlaces es la vista que ofrece un lector de pantalla con todos los enlaces de una página a la vez, para que quien lo usa salte directamente al que quiere. Es una de las formas más rápidas de moverse por una página, y muestra cada enlace con sus propias palabras y nada más. Once enlaces que dicen “Leer más” se convierten en once filas idénticas.

Un nombre accesible es el texto que la tecnología de asistencia anuncia para un enlace o un control. La herramienta lo determina en este orden: un aria-label si lo hay, luego aria-labelledby, luego el texto del propio elemento, luego el texto alt de una imagen que esté dentro, y luego el atributo title. Lo primero que aparezca es lo que muestra la lista de enlaces y lo que espera oír el control por voz.

Así que el trabajo no es escribir mejores oraciones alrededor de los enlaces. Es lograr que el nombre accesible haga el trabajo por sí solo.

Los criterios detrás de la regla

Cada hallazgo que reporta la herramienta cita uno de cinco criterios de conformidad de WCAG, lo que convierte “esta etiqueta es imprecisa” de una opinión en algo que puede ir en un ticket.

Criterio	Nivel	Qué lo incumple	Cómo lo reporta la herramienta
2.4.4 Propósito de los enlaces (en contexto)	A	Un enlace sin nombre accesible, o uno cuya etiqueta completa es una frase como “click here”, “learn more” o “download”	Error. Una URL sin formato de más de 30 caracteres usada como etiqueta es una advertencia
2.4.9 Propósito de los enlaces (solo enlaces)	AAA	Las mismas palabras usadas en enlaces que van a lugares distintos	Advertencia
2.4.6 Encabezados y etiquetas	AA	Un botón que no nombra ninguna acción: “Submit”, “OK”, “Send”, “Done”	Advertencia
2.5.3 Etiqueta en el nombre	A	Un aria-label que no contiene el texto visible del botón	Error
4.1.2 Nombre, función, valor	A	Un control sin nombre accesible; un enlace que solo tiene nombre por su title	Error; advertencia en el caso de title

Un matiz sobre el 2.4.4: en sentido estricto, permite que la oración o el elemento de lista que lo rodea cuenten como contexto, y por eso un “Read more” técnicamente puede aprobar en el nivel A. La herramienta marca esas etiquetas como errores de todos modos, porque la lista de enlaces es precisamente el lugar donde ese contexto desaparece. El 2.4.9, el criterio AAA, es el que exige que las palabras del propio enlace basten.

Audita una página con la herramienta

1. Abre la página que vas a revisar, haz clic derecho en la zona de los enlaces, elige Inspeccionar y copia el marcado del elemento desde las herramientas para desarrolladores. Copia el marcado y no el texto visible: en los atributos aria-label está la mitad de los hallazgos.
2. Abre el Link & button text auditor. El cuadro bajo Paste your markup (pega tu marcado) empieza con un ejemplo, así que primero pulsa Clear (borrar) en la barra inferior y luego pega.
3. Lee los cuatro conteos de arriba: Links (enlaces), Controls (controles), Errors (errores) y Warnings (advertencias).
4. Resuelve los errores antes que las advertencias. Cada hallazgo muestra su gravedad, el criterio de WCAG y su nivel, la regla que incumplió, el texto problemático, por qué importa y una línea que empieza con “Fix:” (solución).
5. Reescribe las etiquetas en tu código fuente, pega el marcado nuevo y repite hasta que el panel diga “Every link and control here names where it goes or what it does.” (cada enlace y control de aquí nombra a dónde va o qué hace).
6. Pulsa Copy report (copiar informe), o la tecla C, para llevarte los hallazgos como texto plano, un bloque por hallazgo con su criterio, para un ticket o una pull request.

El marcado de ejemplo, analizado

El ejemplo con el que abre la herramienta son diez líneas que reúnen la mayoría de los errores comunes. Cuenta 5 enlaces y 3 controles, y encuentra 4 errores y 2 advertencias:

Marcado	Hallazgo	Criterio
<a href="/pricing">Click here</a>	El texto del enlace no tiene sentido fuera de contexto (error)	2.4.4, A
<a href="/docs">Learn more</a>	El texto del enlace no tiene sentido fuera de contexto (error)	2.4.4, A
Dos enlaces con el texto “Documentation”, a /help y /api	Mismo texto de enlace, destinos distintos (advertencia)	2.4.9, AAA
<a href="/home"> que solo contiene un icono vacío	El enlace no tiene nombre accesible (error)	2.4.4, A
<button>Submit</button>	La etiqueta del control no nombra su acción (advertencia)	2.4.6, AA
<button aria-label="Find records">Search</button>	El texto visible no está en el nombre accesible (error)	2.5.3, A
<button>Delete 3 invoices</button>	Nada: nombra el resultado y la cantidad	Ninguno

Los dos enlaces “Documentation” cuentan como un solo hallazgo, porque el problema es la pareja. El botón de búsqueda es el que se le escapa a la gente. Suena bien en un lector de pantalla, que anuncia “Find records”. Pero quien usa control por voz dice la palabra que ve, “Search”, y no pasa nada, porque “Search” no está en el nombre accesible. Empezar la etiqueta con la palabra visible, como en “Search records”, cumple con las dos cosas.

La puntuación de legibilidad que premia las peores etiquetas

El atajo obvio es pasar las etiquetas por un analizador de legibilidad. Da exactamente la respuesta equivocada. Las fórmulas de legibilidad dividen entre el número de oraciones y se ajustaron con prosa continua, así que una cadena de dos palabras las saca de escala. Flesch–Kincaid le da a “Learn more” y “Click here” una facilidad de lectura de 120.2, por encima del máximo de su propia escala, y le da a “Download invoice PDF”, que es mucho más claro, un 62.8.

Por eso el auditor no muestra ninguna puntuación de nivel de lectura, y lo dice en la página. Lo que se puede comprobar de una etiqueta es si nombra un destino o una acción, y si su nombre accesible coincide con lo que se ve en pantalla.

Dónde terminan las comprobaciones

Una herramienta que cita criterios solo es tan buena como las reglas que aplica, y estas tienen límites que conviene conocer:

• Las listas de palabras imprecisas coinciden con una etiqueta completa, no con una frase dentro de ella. “Click here” se marca; “Click here to compare plans” no, aunque igual obliga a quien escucha a esperar hasta las palabras útiles.
• La lista para enlaces es más larga que la de botones. Un enlace que dice “Download” es un error; un botón que dice “Download” aprueba, y aun así debería decir qué descarga.
• No puede saber si una etiqueta es exacta, solo si es específica. Un botón que dice “Delete” y en realidad archiva pasará todas las comprobaciones.
• No puede cargar una página desde una URL. Los navegadores impiden que un sitio lea el HTML de otro, y no hay un servidor detrás de la herramienta que lo haga en su lugar, y por eso tienes que pegar el marcado.

Otras formas de hacerlo

No hay un método integrado en el sistema operativo para auditar el texto de los enlaces. La versión manual es la misma prueba que aplica la lista de enlaces: lee las palabras de cada enlace por sí solas, en una columna, sin la página alrededor, y pregúntate si sabrías a dónde va cada uno. Para los botones, pregúntate si la etiqueta nombra lo que pasa después de pulsarlo. Es lento en una página grande, y no va a detectar un aria-label que contradice el texto visible, porque no puedes verlo sin leer el marcado.

Cómo comprobar que no se envió nada

Tu propio navegador analiza el marcado en la pestaña. Abre el panel Network (Red) de las herramientas para desarrolladores, pega un bloque de marcado y observa: ninguna solicitud lo lleva. Desconectarte de la red después de que cargue la página también funciona, y la herramienta sigue auditando.

Siguiente paso

Pega una barra de navegación o una cuadrícula de tarjetas en el Link & button text auditor; ahí es donde suelen acumularse los enlaces “Read more” (leer más) repetidos. Si tus botones con icono usan SVG en línea, el optimizador de SVG conserva de forma predeterminada el elemento <title> de cada archivo en lugar de quitarlo para ahorrar bytes.