Va otra de WAI-ARIA!

Recientemente se ha publicado la nueva versión de MOSAIC, una destacada publicación dedicada a las tecnologías y comunicación multimedia, donde tuve la oportunidad de colaborar en el desarrollo (ver ficha del proyecto).

Voy aprovechar este post para compartir como he implementado ARIA en las solapas que aparecen en la home de MOSAIC. De esta forma el contenido de las solapas es más accesible y semántico.

Marcado para un elemento de tipo tabs (solapas)

<div id="tabs">
	<ul>
		<li><a href="#tabs-1" id="tab1">en este número</a></li>
		<li><a href="#tabs-2" id="tab2">lo más leído</a></li>
	</ul>
	<div id="tabs-1" class="tabpanel">
		contenido de la solapa 1 (en este número)
	</div>
	<div id="tabs-2" class="tabpanel">
		contenido de la solapa 2 (lo más leído)
	</div>
</div>

Podemos destacar los siguientes elementos con IDentificadores:

  • id="tabs": contenedor general
  • id="tab1", id="tab2": cada solapa
  • id="tabs-1", id="tabs-2": contenedores de cada solapa

Inyectando ARIA con jQuery en un elemento de tipo tabs

$('#tabs ul').attr('role', 'tablist');
$('#tabs ul li a').attr('role', 'tab');
$('#tabs .tabpanel').attr('role', 'tabpanel');
  1. En la primera línea añadimos el landmark tablist a la lista que contiene las solapas.
  2. En la segunda línea marcamos cada enlace (solapa) de la lista con el landmark tab.
  3. Finalmente en la tercera línea indicamos el contenedor de cada solapa con el landmark tabpanel.

Al hilo del anterior post «Reconocer o memorizar en un sitio web», me parece interesante comentar el problema que puede darse con el icono «disquete» como opción para «guardar».

Actualmente es normal reconocer ese icono para la acción de «guardar», creo que de ser sustituido por otro icono puede provocar serias confusiones al usuario, y es que este icono se ha convertido en un estándar de facto.

¿Cuál es entonces el problema? Hoy en día las disqueteras están desapareciendo, seguro que ya nadie o muy pocos usan disquetes como sistema de almacenamiento, incluso creo que ya pocos conservamos algunos disquetes, más por un recuerdo que por otra cosa. En las generaciones venideras lo normal es que el usuario se pregunte ¿qué es ese icono que tiene esa forma tan rara?. Y es normal, porqué puede que solo usen ‘pen drives’, DVDs, etc.

disquete gdocs

Inteligentemente Google Docs usa el típico disquete en la posición de siempre y también un botón «Guardar» (sin icono), en un lugar privilegiado y con un tamaño adecuado para realizar esta acción (la más importante ante un fichero recien creado).

Los usuarios tienden a reconocer (rastrear) la información, opciones y funcionalidades de un sitio web antes que intentar predecirlas y posteriormente memorizarlas. Esto es debido a que el reconocimiento resulta más sencillo que la memorización.

Como postula Jakob Nielsen, los usuarios pasan la mayor parte de su tiempo visitando otros sitios web, cada uno de ellos con sus características, diseño y funcionalidades. ¿Qué razón tiene el usuario para memorizar concretamente el nuestro?.

Continue reading «Reconocer o memorizar en un sitio web»