Marcando tabs con ARIA

post - - leave a reply - share

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.

WordPress V8 con landmarks de ARIA y el problema de validación

post - - leave a reply - share

Aunque recientemente ha salido la versión 2.9 de WordPress voy a comentar un importante giro de la versión 2.8 que se vuelca en la accesibilidad de la estructura de contenidos.

Una de las nuevas características de WordPress es la incorporación de los conocidos landmarks de WAI-ARIA, añadidos a través del atributo role al theme por defecto de WordPress. De esta forma se especifican los roles de las diferentes zonas funcionales del blog haciendo que sea más semántico y accesible.

Los landmarks que WordPress ha incluido en su theme por defecto son: main, contentinfo, banner, complementary y navigation.

Sin duda se trata de una gran apuesta de WordPress volcada a mejorar la accesibilidad de sus blogs.

El problema de la validación XHTML W3C

Esta importante actualización que viene integrada en el theme por defecto de Wrodpress plantea un problema de validación. Las especificaciones HTML 4.01 y las DTD no contemplan aún los landmarks de ARIA y esto hace que nuestro blog no pase positivamente el test de validación W3C.

Para solventar este problema podemos eliminar los atributos role del theme e inyectarlos por medio de JavaScript en tiempo de ejecución.

Inyectando landmarks de ARIA con jQuery

$(document).ready(function() {
	$('#content').attr('role', 'main');	
	$('#footer').attr('role', 'contentinfo');
	$('#header').attr('role', 'banner');
	$('#sidebar').attr('role', 'complementary');
        $('#sidebar ul').attr('role', 'navigation');
	$('#searchform').attr('role', 'search');
});

Sencillamente tomamos los elemento a partir de sus IDs (identificadores) e inyectamos la propiedad role con el valor que representa a cada una de las zonas funcionales role="navigation".
La última línea es un añadido que se encarga de inyectar el landmark del clasico buscador de WordPress.

ARIA Slider Generator

link - - leave a reply - share

Hace tiempo escribí el artículo “WAI-ARIA, una aproximación” publicado en la revista no solo usabilidad (centrada en el diseño de interacción).

En el artículo intentaba explicar la forma de crear un control de tipo “Slider” que fuese accesible gracias a la ayuda de las técnicas ARIA.
slider

Hoy he descubierto una herramienta experimental “ARIA Slider Generator” que crea el control en base a unos parámetros dados y a las indicaciones aportadas por The paciello Group en el post ARIA Slider.

Artículo sobre WAI-ARIA

link - - 2 replies - share
wai-aria

En Fundamentos web 2008 acudí a la charla WAI-ARIA Just do it de Steve Faulkner, donde me quede con ganas de más…

Estos días pude profundizar un poco y poner todas las conclusiones en un artículo titulado WAI-ARIA, una aproximación, publicado en no solo usabilidad, número 8 / 2009, revista multidisciplinar sobre diseño de interacción.

Breve resumen

Introducción a ARIA (Accessible Rich Internet Applications), iniciativa del W3C que define cómo hacer accesibles contenidos y aplicaciones web, específicamente el contenido dinámico y los controles avanzados de interfaz desarrollados con Ajax y sus tecnologías relacionadas.

ARIA proporciona un marco de trabajo complementario.

  1. Estructuras más semánticas para las zonas funcionales.
  2. Mejora de la navegación mediante el teclado.
  3. Controles complejos (widgets) más accesibles.
  4. Accesibilidad para el contenido actualizado de forma dinámica.

Leer artículo: WAI-ARIA, una aproximación (en nosolousabilidad.com)

Actualización 5/02/09: versión en inglés WAI-ARIA-an-approach.

Fundamentos web 2008

post - - 2 replies - share

Cartel de fundamentos web 2008Recientemente he asistido al congreso fundamentos web 2008, en Gijón (Asturias).

Se trata de un evento organizado por la Fundación CTIC, la oficina española del consorcio W3C, y subvencionado por el Gobierno del Principado de Asturias.

Este evento ha conseguido tras varias ediciones una enorme relevancia internacional, incorporando en sus actos a ponentes de primera fila.

A continuación voy a destacar lo que me ha parecido más interesante.

Read more