No tengo mucha idea de programación, pero ¿esto ha tenido que hacerlo alguien, no? Quiero decir que las “t minúscula” por defecto, ¿funcionan, no?

Como no todo va a ser criticar, les propongo un rediseño:

¿Y tú? ¿Cual es el bug más divertido que has encontrado en la web de renfe?

Actualización [16:50]: Félix ha solucionado el misterio en los comentarios.

Actualización 2 [17:13]: Ale me pasa este rediseño alternativo, mucho mejor que el anterior, más info aquí.

Actualización 3 [19:35]: Denegro también pone su grano de arena, es una revisión “por si no saben cómo hacer las anteriores”

Si eres capaz de identificar todos los enlaces del cuadro de login de hotmail de un simple vistazo, premio para ti. Apenas 400×300 píxeles dan para mucho.

Algunas pistas para ayudarte en el camino son:

1. Que sea azul no quiere decir que sea un enlace.
2. Aunque puede que sí.
3. Si parece texto plano seguramente será un enlace.
4. No, no hay nada subrayado.

Y ya que va de apostar, me apuesto lo que quieras a que ningún usuario de hotmail ha hecho click en “Utilizar seguridad mejorada” en su vida (Sí, eso es un link). ¿Qué quiere decir “seguridad mejorada”? ¿Que si inicio sesión normal será menos seguro? ¿Por qué no tengo “seguridad mejorada ” en Gmail?

Y la guinda la pone pedir el “Windows Live ID”, no el mail, no el nombre de usuario ¡El Windows Live ID!, ni más ni menos. Menos mal que lo explican más arriba (Sí, en eso en azul no hay un sólo enlace).

Hay muchas herramientas para testear la accesibilidad de tu página, la principal quizás sea el Test de Accesibilidad Web (TAW), que genera una vista de tu página con los puntos que presentan conflicto con el nivel de accesibilidad web escogido.

Los resultados del TAW se muestran en dos grupos, los automáticos y los manuales. A grandes rasgos, los resultados automáticos son incontestables: presentan conflictos de accesibilidad que deberías corregir si deseas obtener el nivel que has marcado. Los resultados manuales son aquellos que necesitarás revisar tú mismo y, en muchos casos, no son errores de accesibilidad, sino avisos del tipo “revisa que esto esté cerca de esto otro, que yo no lo puedo hacer por ti”. Generalmente, si no tienes ningún error en los resultados automáticos, tu site es muy accesible.

Este blog, por ejemplo, no tiene ningún error de accesibilidad en la categoría AAA reflejado en las alertas automáticas. Hay sin embargo muchas concesiones al diseño en lo que a los resultados manuales se refiere. Por ejemplo, los links contiguos presentan problemas de accesibilidad. Sin embargo el test salta con esa alerta en la nube de tags de la barra lateral, lugar en el que, en realidad, los enlaces están bien diferenciados.

Otra herramienta muy útil es Vischeck, que te muestra tu site del modo en el que lo verían personas con diferentes discapacidades visuales. Siempre es buena idea revisar los colores de los enlaces y elementos gráficos principales.

También puede interesarte el CSS Analyser, de Juicy Studio, que analiza tu CSS en busca de relaciones de color poco claras y otros problemas de accesibilidad.

Por último, una correcta maquetación del texto es fundamental. Buscar un ancho de línea óptimo, un tamaño de letra generoso y un interlineado cómodo son las premisas fundamentales. Hay cientos de recursos sobre cómo manejar la tipografía en pantalla, seguro que dará para otro post. Una herramienta que me gusta mucho a la hora de maquetar texto es Typetester, de Marko Dugonji. Con esta herramienta podrás probar diferentes combinaciones para tu caja de texto y descargar la CSS que más se adapte a tus necesidades.

Recursos
Si quieres profundizar más en el tema, Whdb.com publicó un genial post hace unos días sobre 100 recursos fundamentales de accesibilidad.