F72Dibujos hechos con caracteres sin texto alternativo

Por qué es importante

Un lector de pantalla (programa que lee en voz alta lo que hay en la pantalla) lee carácter a carácter: «guion bajo, guion bajo, barra, asterisco…». La persona oye una larga lista de símbolos sin sentido.

Lo mismo pasa con una flecha hecha con --> o un esquema dibujado con barras. Además, la persona tiene que escuchar todos esos símbolos antes de poder seguir leyendo.

Cómo evitarlo

1. Si puede, sustituya el dibujo por una imagen con su texto alternativo o por texto normal.
2. Si mantiene el arte ASCII, póngale un nombre que resuma lo que muestra, por ejemplo con role="img" y aria-label.
3. Si el dibujo contiene datos, como un gráfico, ofrezca esos datos en texto o en una tabla junto a él.
4. Coloque la alternativa justo antes o después del dibujo, o enlácela desde allí.
5. En dibujos largos, ofrezca un enlace para saltarlos.

Cómo comprobarlo

1. Busque en la página dibujos, esquemas o gráficos hechos con caracteres, a menudo dentro de <pre>.
2. Compruebe que cada uno tiene cerca un texto que explica lo que representa.
3. Escúchelo con un lector de pantalla. Debe anunciar la descripción, no la lista de símbolos.
4. Si algún dibujo no tiene alternativa, hay fallo.

Ejemplo

El dibujo se marca como imagen y recibe un nombre que lo resume, para que no se lea símbolo a símbolo.

<pre role="img" aria-label="Esquema: Solicitud, luego Revisión, luego Resolución">
+-----------+    +----------+    +------------+
| Solicitud | -> | Revisión | -> | Resolución |
+-----------+    +----------+    +------------+
</pre>