Accesibilidad

Personalmente, agradezco el hecho de que tengo visión bastante buena, no necesito anteojos y no soy daltónico. Aún así, hay algunos sitios que me dan la impresión de que intentan violar mis sentidos, ya sea con colores demasiado brillantes, o animaciones incesantes… Al menos Firefox me da la opción de desactivar los estilos de un sitio, y eso es una herramienta invaluable, tanto para defender mis ojos de las abominaciones de los diseños, como para comprobar si mi propio sitio es accesible.

La accesibilidad es relativamente fácil de obtener, aunque es levemente más complejo que un sitio sea tanto accesible como visualmente atractivo; pero esto no es razón para dejar la accesibilidad de lado. Al contrario, si un sitio es accesible, significa que personas con discapacidades pueden utilizarlos (esta sería la razón más importante, y debería ser obligada por ley); además, un sitio realmente accesible es más fácil de revisar por los motores de búsqueda, logrando mejores resultados.

Entonces, ¿qué necesita un sitio para ser accesible?

El W3C nos da una serie de puntos para lograr la accesibilidad, e incluyen información sobre la prioridad de cada punto (desde obligatorios a recomendados), y maneras de aplicarlos.

Además hay que tomar en cuenta ciertos factores al armar el diseño o el contenido:

1. El HTML nos provee de una serie de elementos para indicar las cabeceras, de h1 a h6. Se deben marcar los títulos con ellos (con los que correspondan, jerárquicamente); usar simplemente un elemento que cambie el tamaño y el color de la fuente no le da información a la máquina (o motores de búsqueda).
2. Ordená el código apropiadamente. El menú de navegación y el contenido deben estar en dos contenedores diferentes.
3. Usá texto informativo en los links. No hay cosa más molesta que «pincha aquí» o «click aquí». Google (y otros buscadores) usa el texto de los links como palabras claves hacia los sitios. Adobe es el resultado número uno al buscar «click aquí»… Si leer sólo el link no informa sobre el contenido, cambia el texto.
4. Poné textos descriptivos en las imágenes. La propiedad alt del elemento img no es opcional, y debería dar información sobre el contenido de la imagen, por si esta no se mostrara.
5. No uses tablas para posicionamiento. Simple.
6. No pongas texto en una imagen (si no hay otra forma de leerlo).
7. Comprobá el contraste del diseño. Sí, a lo mejor vos ves amarillo sobre azul, ¿pero qué tal alguien daltónico? Si el texto no se puede leer al transformar todo a escala de grises (cosa que se puede lograr con cualquier editor gráfico), entonces hay algo mal.
8. Antes de decir «ya está», fijate una última cosa: ¿Cómo se ve si desactivas el estilo? Si la respuesta no es «una serie de encabezados seguidos de contenido», casi seguro hiciste algo mal.
9. No uses Javascript. (En el próximo artículo digo dónde, cómo, cuándo y por qué).

Claro que hay sitios donde alguna de estas reglas se podría llegar a obviar, pero, antes de intentar hacerlo, pensá: ¿Realmente puedo dejar de lado esta regla? En el 99% de los casos, la respuesta es no.

• Parte 1
• Parte 2
• Parte 4