Usabilidad y Accesibilidad

Usabilidad y Accesibilidad son dos términos que se mencionan frecuentemente cuando hablamos de el «moderno» paradigma de la programación web.

Sin embargo, muy a menudo, estos términos se confunden o no se saben identificar bien, por lo que la mayoría de las personas no saben la importancia y el papel que tienen.

Veamos las definiciones:

Es decir, en nuestro ámbito estamos definiendo un sitio usable como aquella interfaz web que es cómoda, fácil y sencilla de utilizar, con la que no tenemos dudas y no nos parece complicada.

Nuevamente, en nuestro ámbito, con respecto a la cualidad de accesible, cabe remarcar dos características:

• Capacidades técnicas: Ya sean navegadores (Firefox, IE, Opera, Chrome, Safari...), tecnologías (flash, javascript, quicktime...), etc...
• Capacidades físicas: Ya sean problemas de audición (personas con deficiencias de oído), visuales (personas ciegas o con incapacidad visual), etc...

Ejemplos de usabilidad

Veamos, por ejemplo, el concepto de usabilidad en el mundo real con la «ruedita» táctil de los iPod de Apple.

A pesar de ser un concepto nuevo, que antes no se utilizaba, la ruedita de los iPod planteó una nueva forma de controlar un aparato para múltiples tareas (avanzar, retroceder, cancelar, aceptar, subir o bajar volumen, etc...) con un mínimo de esfuerzo por parte del usuario, convirtiendo todo tipo de tareas en algo muy sencillo y cómodo, que incluso ha terminado adoptándose por otras marcas y modelos.

En el ámbito web, ejemplos clásicos suelen ser:

• Búsqueda: El usuario la busca por defecto en la zona superior derecha, por lo que si está situada en otro lado no la encontrará en un primer barrido.
• Dejar un comentario: El usuario buscará el formulario debajo o al lado del artículo. Por lo que si encuentra otro formulario cercano, podrá confundirse.
• Ir a la página principal: El usuario pulsa intuitivamente (y muchas veces, inconscientemente) en el logotipo superior para ir a la página principal.

Ejemplos de accesibilidad

En el mundo real, los problemas de accesibilidad están muy claros: una rampa de acceso para personas con discapacidad móvil o rótulos en braille para indicar detalles importantes.

En el ámbito web la filosofía es la misma. ¿Por qué un usuario con algún tipo de discapacidad o un sistema operativo diferente al resto (o mayoría) debe ser privado del acceso a determinados sitios?

Y esto, en cierta forma, es un problema del diseñador de la página web. Puede pensar que para su negocio o servicio web las personas con discapacidad visual, el navegador Konqueror o que utilicen Solaris son una minoría y no vale la pena preocuparse por ellos.

Sin embargo, una entidad bancaria, una plataforma web de algún servicio público del estado o similar no puede (o más bien, no debería) permitirse esos lujos.

Para terminar, veamos dos pequeños ejemplos de como aplicar ligeros detalles para solucionar algunos problemas de accesibilidad típicos.

Ejemplo #1 aplicado: Popups accesibles

Objetivo: Crear un enlace que dirija a una pequeña página de consejos para un formulario. Esta página es muy breve, y lo ideal sería abrirla en un popup (ventana emergente) examinarla, cerrarla y seguir por donde íbamos:

<a href="javascript:window.open('consejos.html','_blank','height=400,width=550,scrollbars=yes');">Consejos</a>

Abrir un popup solo es posible mediante javascript, así que utilizando el método window.open abrimos una ventana nueva de 550x400 pixels con barras de desplazamiento.

¿Problemas? Necesitamos javascript para acceder al recurso. No hay alternativa. Además, el enlace javascript está dentro del href, por lo que muy probablemente el robot de Google no lo siga.

<a href="#" onclick="window.open('consejos.html','_blank','height=400,width=550,scrollbars=yes');">Consejos</a>

Mejor. Hemos conseguido separar la funcionalidad script al evento javascript onclick (cuando pulsamos con el ratón). No obstante, seguimos sin proveer una alternativa para usuarios sin javascript (que ahora mismo no obtendrían nada).

<a href="consejos.html" onclick="window.open('consejos.html','_blank','height=400,width=550,scrollbars=yes');">Consejos</a>

Ahora si tenemos una versión accesible, pero que funciona incorrectamente. En el caso de un navegador (o dispositivo móvil, consola portátil, batidora con conexión a Internet...) sin javascript, accederíamos por el enlace href, en el caso de tener javascript, el navegador hace caso a los dos. Fácil de solucionar:

<a href="consejos.html" onclick="window.open('consejos.html','_blank','height=400,width=550,scrollbars=yes'); return false">Consejos</a>

Ahora con el return false le decimos que si existe javascript, haga sólo eso y no siga el enlace href. Aunque ya es correcto, aún podemos mejorar un poco el código, eliminando la duplicidad y mejorando el mantenimiento:

<a href="consejos.html" target="popup" onclick="window.open(this.href, this.target, 'height=400,width=550,scrollbars=yes'); return false">Consejos</a>

Ejemplo #2 aplicado: ComboBox accesible

Objetivo: Crear un select (combo box) de navegación accesible con o sin javascript.

Veamos el ejemplo con el reciente select que utilizamos para la navegación por categorías en Emezeta:

<select name="categoria">
<optgroup label="seccion 1">
<option value="valor-1">Item 1</option>
...
</select>

Ya tenemos la estructura. Pero aún no tiene funcionalidad, ya que no hemos definido ninguna acción. Añadiremos mediante javascript, el dirigirnos a una categoría concreta.

<select name="categoria" onchange="document.location.href='/destino/'+this.options[this.selectedIndex].value;">
<optgroup label="seccion 1">
<option value="valor-1">Item 1</option>
...
</select>

Con esto conseguiremos que en los navegadores con javascript nos redirija a un documento destino que acepte por GET la categoría indicada en el atributo value de la opción elegida. Sin embargo, en un cliente sin javascript, esto no produce nada.

<form action="/destino/" method="get" enctype="text/plain">
<select name="categoria" onchange="document.location.href='/destino/'+this.options[this.selectedIndex].value;">
<optgroup label="seccion 1">
<option value="valor-1">Item 1</option>
...
</select>
<noscript><input type="submit" value="Ir a..." /></noscript> </form>

Englobamos el código en un formulario que redirija al usuario en el caso de que no tenga javascript, y un botón que sólo aparecerá en el caso de no tener javascript.

<form action="/destino/" method="get" enctype="text/plain">
<select name="categoria" onchange="document.location.href='/destino/'+this.options[this.selectedIndex].value;">
<option value="" selected="selected">--Selecciona--</option>
<optgroup label="seccion 1">
<option value="valor-1">Item 1</option>
...
</select>
<noscript><input type="submit" value="Ir a..." /></noscript> </form>

Finalmente, y para dejarlo perfecto, podemos añadir un option vacío con atributo selected="selected" (no ponerlo sólo para hacerlo compatible con XHTML) para que nos muestre el texto por defecto Selecciona una opción.

junio

27

2009