Si hubiese que elegir una regla o principio que resumiese toda las pautas, guías y consejos para hacer una página web accesible yo me quedaría con ofrece alternativas. No te limites a proporcionar la información en un solo formato, ya que estarás excluyendo a muchos usuarios.
Como suele ocurrir, la teoría es más sencilla que la práctica, y muchas veces es difícil encontrar buenos ejemplos que reflejen la teoría.
Pero acabo de encontrar un buen ejemplo. Un buen ejemplo de cómo hacer que un gráfico sea accesible. Tampoco es que haya descubierto algo sorprendente (lo que vamos a ver se lleva haciendo muchos años con el enlace D de información detallada), pero vale la pena recordarlo.
La página web WebKit SunPider ofrece los resultados de un test para medir el tiempo de ejecución de JavaScript en diferentes navegadores. Es decir, es un test para evaluar el rendimiento de los motores de JavaScript que llevan incorporados los navegadores. Sorprendentemente, el navegador más rápido de todos los probados es la versión candidata de Internet Explorer 9. Y también sorprende que no les importe reconocer que Internet Explorer 8 es el navegador más lento con diferencia (más de 10 veces más lento).
Volviendo al tema de la accesibilidad, como podemos ver en la siguiente imagen, los resultados se ofrecen mediante un gráfico de barras.
La forma correcta de ofrecer información adicional o alternativa sería mediante el atributo longdesc, pero desgraciadamente poca gente lo conoce y mucha menos gente lo usa.
Pero también se ofrece una versión textual en forma de tabla mediante el texto "A textual version of the results can be found here".
Para una persona que no pueda ver, la versión en forma de tabla, que está correctamente etiquetada porque emplea la etiqueta <th> para crear los encabezados de columna, le ofrece la misma información que el gráfico de barras. Pero es que además, la versión en forma de tabla beneficia a todo el mundo: ¿y si quiero hacer un trabajo con esos datos? No hay problema, los puedo copiar y pegar fácilmente a partir de la tabla, no tengo que escribir la tabla desde cero a partir del gráfico.
Como suele ocurrir, la teoría es más sencilla que la práctica, y muchas veces es difícil encontrar buenos ejemplos que reflejen la teoría.
Pero acabo de encontrar un buen ejemplo. Un buen ejemplo de cómo hacer que un gráfico sea accesible. Tampoco es que haya descubierto algo sorprendente (lo que vamos a ver se lleva haciendo muchos años con el enlace D de información detallada), pero vale la pena recordarlo.
La página web WebKit SunPider ofrece los resultados de un test para medir el tiempo de ejecución de JavaScript en diferentes navegadores. Es decir, es un test para evaluar el rendimiento de los motores de JavaScript que llevan incorporados los navegadores. Sorprendentemente, el navegador más rápido de todos los probados es la versión candidata de Internet Explorer 9. Y también sorprende que no les importe reconocer que Internet Explorer 8 es el navegador más lento con diferencia (más de 10 veces más lento).
Volviendo al tema de la accesibilidad, como podemos ver en la siguiente imagen, los resultados se ofrecen mediante un gráfico de barras.
La forma correcta de ofrecer información adicional o alternativa sería mediante el atributo longdesc, pero desgraciadamente poca gente lo conoce y mucha menos gente lo usa.
Pero también se ofrece una versión textual en forma de tabla mediante el texto "A textual version of the results can be found here".
Para una persona que no pueda ver, la versión en forma de tabla, que está correctamente etiquetada porque emplea la etiqueta <th> para crear los encabezados de columna, le ofrece la misma información que el gráfico de barras. Pero es que además, la versión en forma de tabla beneficia a todo el mundo: ¿y si quiero hacer un trabajo con esos datos? No hay problema, los puedo copiar y pegar fácilmente a partir de la tabla, no tengo que escribir la tabla desde cero a partir del gráfico.
1 comentario:
En los recursos de webAIM hay una entrada muy buena sobre ello Creating Accessible Images.Long Descriptions
Publicar un comentario