Credit image

¿Te gusta el diseño web? ¡Echa un vistazo a la documentación de LenguajeCSS.com!

Usabilidad y Accesibilidad

¿Cuáles son las diferencias entre los términos usabilidad y accesibilidad? En este artículo se detalla la diferencia de ambos con algunos ejemplos sencillos.

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:

Usabilidad: Atributo de calidad que mide lo fácil que es de utilizar un objeto, servicio o ítem.

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.

Accesibilidad: Grado en el que todas las personas pueden utilizar un objeto, visitar un lugar o acceder a un servicio, independientemente de sus capacidades técnicas o físicas.

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.

Sin ir más lejos, la red social Tuenti no permite la entrada sin javascript. Por otra parte, la red social Facebook si que permite la entrada sin necesitar javascript. Es por ello que en Tuenti tienen un problema de accesibilidad.

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.

Escrito por Manz, el , en webmasters. Comentarios recibidos: 9.

9 comentarios de lectores
Gonzalo
Gonzalo
1

Es algo que ayuda a muchas personas que recien estan empezando en la internet y no conocen mucho sobre esto

  • 1
Stick Boy
Stick Boy
2

Pues está muy bien, sobre todo los ejemplos de al final, esos "truquitos" para los navegadores sin Javascript... Por cierto, no es por criticar, eh, pero... ¡precisamente el buscador de Emezeta no está arriba a la derecha! Igual debería ir a changelog, pero bueno como ha surgido aquí... de todas maneras tampoco es que piense que esté mal, pero la verdad es que pasaron bastantes visitas al blog hasta que lo vi...

Manz
Manz
3

De acuerdo. Ya son dos comentarios que opinan igual, así que lo moveré un poco más arriba.

Dolores
Dolores
4

Una ayuda para hacer sitios accesibles la pueden encontrar en una guia didáctica sobre la temática que se ofrece en forma libre y gratuita en: http://www.atedis.gov.ar

  • -1
Angelfire
Angelfire
5

Muy bueno el artículo Manz, aunque para los últimos ejemplos de accesibilidad, hubiera quedado excelente un demo o una imagen para ver como quedaba. De todas formas, excelente, son un par de temas bien tratados hoy en día.

Ricardo
Ricardo
6

Yo creo que el ejemplo de accesibilidad del ultimo combo, no es correcto. por mucho que el navegador no tenga javascript activado, el boton que aparece de submit, no cmabia el valor del combo, asi que yo creo que no es un buen ejemplo, es inutil, porque solo hace que aparezca el boton, pero no funciona, no redirige a ningun sitio, no es un combo de navegacion. Saludos.

Manz
Manz
7

@Ricardo: ¿Cuál es el problema que tienes con el ejemplo exactamente? Fíjate que exactamente ese código está aplicado en esta misma página, en el "Combo" de las categorías y funciona perfectamente. Eso si, para que funcione bien, debería tener una estructura de destino coherente y que acepte la redirección por GET.

Alba
Alba
8

muy buena!. claro, preciso y didactico todo el texto.

Alberto Martirena
Alberto Martirena
9

yo bloquie a una persona,ahora la quiero desbloquear y no aparece en la lista de bloqueados,no puedo localizarla,que puedo hacer para recuperar a ese amigo

Publica tu opinión

Si lo deseas, puedes utilizar el siguiente formulario para publicar tu opinión o responder a alguna de las existentes:

Previsualización

Aquí se previsualizará su comentario. Revise que sea correcto antes de publicarlo.