Entiendo que un buen diseño web es aquel proporciona su información (el contenido) de forma sencilla (usabilidad) y adaptándose a una gran variedad de escenarios (accesibilidad).

Sin profundizar demasiado en cada disciplina es bastante fácil comprobar lo dicho a través de un sencillo test en el que desactivemos de nuestro navegador las imágenes, el css, javascript, etc.

Esto es algo tan viejo como carracuca para los que trabajamos en interfaces web, sin embargo a nivel empresarial, los jefes de proyecto, etc. siguen sin realmente darse cuenta de ello.

Realizar el test

No hay disculpas para no hacerlo, es realmente sencillo. Cuando estés realizando el test y navegando por el sitio web podrás percatarte de mejoras o cuestiones que habías pasado por alto.

Para realizarlo puedes desactivar en las opciones de tu navegador los elementos que te permita (imágenes, javascript, java, etc). Sin embargo lo tendrás más fácil si usas alguna herramienta como web-developer.

Sin imágenes

Por norma general a mi siempre me ha parece muy útil pensar que todas aquellas imágenes que sean decorativas (puramente diseño) y que no aporten información sean relegadas al estilo y por tanto gestionadas a través de CSS. Por el contrario, aquellas imágenes que aporten información y que pertenezcan al contenido propio del sitio web (por ejemplo una fotografía de un plano) deben ser incrustadas en el código XHTML con la etiqueta IMG aportando un texto alternativo como valor del atributo alt u OBJECT con un texto embebido.

Vamos a pasar a la acción… Prueben a intentar navegar desde la web de apple sin imágenes. ¿Donde esta el menú de navegación? ha desaparecido! (con lo bonito que era…)

¿Es frustrante verdad?, pero de hecho el menú sigue estando y es operativo solo tienes que atinar un poco e imaginar cual será el destino 🙂

Este test es una buena forma de ver como la accesibilidad también repercute en las personas que no tienen ningún tipo de discapacidad. Pensemos que por ejemplo tenemos un día mala conexión y por razones de varias decidimos desactivar las imágenes o simplemente estas no pueden ser cargadas por la demora.

Más información sobre la accesibilidad en imágenes.

Sin CSS

Algo crucial para analizar la carga semántica de nuestro sitio web, la estructura, orden, información, etc. Desactivando el CSS podemos ver de forma clara si se mantiene la abstracción del estilo-contenido y si este es accesible. También puede darnos muchos pistas para el SEO del proyecto.

Sin JavaScript

En este caso juega un papel relevante la abstracción comportamiento-contenido. También podemos comprobar hasta que punto nuestro código JavaScript (y/o framework) es intrusivo y con ello mejorar la accesibilidad.

En WAI-ARIA, una aproximación podemos ver como hacer más accesibles los contenidos y aplicaciones web, específicamente el contenido dinámico y los controles avanzados de interfaz desarrollados con Ajax y tecnologías relacionadas.