F26Símbolos e iconos con significado que el lector de pantalla no explica

Por qué es importante

Un lector de pantalla (programa que lee en voz alta lo que hay en la pantalla) puede leer un símbolo de forma extraña, como «círculo negro», o no leerlo. Los iconos hechos con fuentes de iconos a menudo se leen como letras sueltas o no se leen.

Por ejemplo, una tienda indica «● disponible para envío inmediato» y «■ pendiente de reposición». Una persona ciega no sabe qué productos están disponibles. Una persona con baja visión puede confundir el círculo y el cuadrado.

Cómo evitarlo

1. Siempre que pueda, acompañe el símbolo de un texto visible: «● En stock» o «✓ Pagado».
2. Si el símbolo acompaña a un texto que ya lo dice, ocúltelo a los lectores con aria-hidden="true" para no repetir.
3. Si el símbolo va solo, dele una alternativa: alt en imágenes, o role="img" y aria-label en caracteres e iconos.
4. En las instrucciones, no diga solo «pulse la estrella» o «los marcados con un círculo». Nombre el estado o la acción.

Cómo comprobarlo

1. Busque símbolos que den información: iconos de estado, marcas ✓ y ✗, estrellas, círculos, flechas o emojis.
2. Compruebe si hay un texto visible o una alternativa que diga lo mismo.
3. Escuche la página con NVDA o VoiceOver. Compruebe que se entiende el significado de cada símbolo.
4. Revise las instrucciones: no deben depender solo de la forma del símbolo.

Ejemplo

Disponibilidad de un producto en una tienda en línea.

<!-- Incorrecto: el lector dice «círculo negro» o nada -->
<p>Silla de oficina ●</p>

<!-- Correcto: texto visible y símbolo oculto al lector -->
<p>Silla de oficina
  <span aria-hidden="true">●</span> Disponible para envío inmediato
</p>

<!-- Correcto: símbolo solo, con alternativa -->
<span role="img" aria-label="Disponible para envío inmediato">●</span>