No puedes ver lo que una persona ciega no puede hacer.
Una tienda de alta joyería con un tema bien hecho, miles de productos y un componente que dejaba una página de colección entera inservible para quien compra con un lector de pantalla.
Tienda real: una joyería de alta gama de Nueva York, sin nombre · AccesibilidadUna tienda de la que nadie se había quejado.
Ni carta ni queja. Un cliente de venta al público con el que ya trabajábamos y una tienda que parecía terminada. Hicimos la auditoría en tres páginas como siempre: la página de inicio, una página de colección y una de producto, con el teclado y después con un lector de pantalla.
Once comprobaciones salieron bien. Dos fallaron. Las dos venían del mismo sitio.
El tema estaba mejor hecho que la mayoría: todas las imágenes descritas, todos los botones y campos de formulario con nombre, texto legible sobre su fondo en 704 muestras y una declaración de accesibilidad ya publicada.
Los dos fallos venían del mismo componente: las muestras de metal de cada tarjeta de producto. Cada muestra era un enlace sin nombre y medía 20 píxeles de ancho, por debajo del mínimo de 24 píxeles que necesita un dedo o un puntero. En una página de colección había 490. Para un lector de pantalla, la página era la palabra "enlace" 490 veces, y quien compraba no podía distinguir el oro del oro rosa ni de la plata.
| Comprobación | Medido | Resultado |
|---|---|---|
| Cada foto tiene una descripción | 533 imágenes | Correcto |
| Los botones dicen lo que hacen | 62 botones | Correcto |
| Los campos dicen qué escribir | 42 campos | Correcto |
| El texto se lee bien sobre su fondo | 704 muestras | Correcto |
| La página indica su idioma | 3 páginas | Correcto |
| Con teclado se puede saltar el menú | 3 páginas | Correcto |
| En el móvil se puede ampliar | 3 páginas | Correcto |
| El lector de pantalla puede saltar entre secciones | 3 páginas | Correcto |
| El orden del tabulador sigue la página | 3 páginas | Correcto |
| Cada página tiene un título real | 3 páginas | Correcto |
| Hay una declaración de accesibilidad enlazada | todo el sitio | Correcto |
| Los enlaces dicen adónde llevan | 1,125 enlaces | 526 fallan |
| Los botones son fáciles de tocar | todos los controles | Falla |
Una línea, en una plantilla.
La plantilla de la tarjeta de producto crea todas las muestras. Una línea ahí le da a cada una su nombre: el producto más el metal, para que el lector de pantalla diga "Pendientes de aro huggie, vermeil de oro rosa, enlace." Medio día, incluido volver a probar la página después con un lector de pantalla.
Dos cosas que una máquina no puede resolver, y una que sí.
Un programa puede contar nombres y medir píxeles. No puede decirte si quien navega con teclado ve dónde está en la página, ni si el texto sobre las imágenes de cabecera se lee bien en todos los casos. Las dos quedaron abiertas para que las probara una persona antes de dar el visto bueno, en vez de darlas por correctas a ojo.
La tercera es el tamaño de la muestra: 24 píxeles es el mínimo, y lo controla la misma plantilla.
Lo bueno también hay que decirlo.
Casi todo lo que señala una carta de reclamación (demand letter) ya estaba bien en esta tienda: descripciones de imagen, formularios con etiquetas, texto legible, una declaración publicada. Eso es más raro de lo que debería, y es algo que ponemos en el informe con la misma claridad que los fallos, porque quien tiene la tienda merece saber qué funciona.
Una página que se puede comprar con lector de pantalla, y el registro.
Una página de colección donde cada muestra dice lo que es, un informe con fecha de qué se probó y qué se encontró, y una lista corta de lo que hay que comprobar después con teclado y lector de pantalla. Los 490 eran parte de los 526 enlaces sin nombre que contó la auditoría. Un resultado medido en tres páginas, no una afirmación sobre toda la tienda.