Texto alternativo (alt) en casos especiales

post - - 4 replies - share

El atributo alt de una imagen u otro elemento debe proporcionar un texto alternativo que contenga la información que se pretendía transmitir. No olvidemos que la información textual es la de mayor grado de accesibilidad.

Usar textos alternativos lógicos y coherentes

  • Si la imagen contiene texto, por ejemplo un número de teléfono, debemos transmitirlo completamente, alt="Teléfono: 000 000 000".
  • Si la imagen es un icono de error, el texto debe transmitir esa misma idea, podemos usar simplemente alt="error".
  • Si se trata de un icono “ZIP”, podemos usar algo como alt="fichero comprimido en ZIP".
  • En el caso de una fotografía podemos describir lo que vemos, alt="Asturias, tierra de altas montañas".
  • Si la imagen transmite acción, por ejemplo un enlace que tenga un icono de una impresora, debemos indicar dicha acción y no la descripción del icono, alt="imprimir".
  • Si una imagen transmite lo mismo que un texto contiguo, debemos dejar el texto alternativo vació para no caer en redundancias, alt="".

Las votaciones

Supongamos que tenemos el clásico sistema de votaciones con estrellas:
puntuación 4 de 5

Siguiendo las directrices de WCAG2 lo que podemos hacer es usar el atributo alt de la primera imagen para describir a todo el grupo e indicar la puntuación global. El resto de las imágenes que deberían estar situadas de forma contigua, tienen que tener alt="" vacio y no llevar ningún title, de esta forma son obviadas. Con ello se consigue que las ayudas técnicas (como por ejemplo lectores de pantalla) únicamente “lean” el texto alternativo de la primera imagen donde se da toda la información necesaria al usuario.

Ejemplo

<img src="star1.png" alt="puntuación 4 de 5" />
<img src="star2.png" alt="" />
<img src="star3.png" alt="" />
<img src="star4.png" alt="" />
<img src="star5.png" alt="" />

Los emoticonos

Se tiene que transmitir de forma textual el mismo sentimiento que el representado. Por ejemplo: Feliz alt="Feliz".

<img src="http://aurea.es/wp-includes/images/smilies/icon_smile.gif" alt="Feliz" />

Supongamos que en vez de una imagen usamos texto (ASCII). En este caso podemos marcar los emoticonos como abreviaturas (semánticamente podrían ser considerados así) y con el atributo title="sentimiento"
Por ejemplo: 🙂

<abbr title="Feliz">:-)</abbr>

Tablas más semánticas y accesibles

post - - 1 reply - share

CAPTION y TITLE

La etiqueta caption proporciona información sobre el contenido de la tabla al igual que el atributo <table title="">.

La única diferencia es que title no se muestra en los navegadores de pantalla (a excepción de mostrarse como tooltip o mensaje emergente). Por contra caption aparece como un texto centrado en la parte superior de la tabla.

Resulta innecesario usar ambos puesto que con uno de ellos ya aportamos la información sobre el contenido de la tabla.

SUMMARY

Podemos optar libremente por usar caption o title pero si es necesario (sobre todo por razones de accesibilidad) complementar la información con un resumen a través del atributo <table summary="">

Como resumen se debería de indicar la función informativa de la tabla, de una forma más ampliada que el caso de caption. También se puede indicar de forma muy resumida las relaciones entre las celdas.

TH

La etiqueta th sirve para identificar los grupos de encabezamiento. Las cabeceras que sirven de referencia, tanto si se trata de una disposición en columna como en filas.

SCOPE y HEADERS

Su función consiste en relacionar las celdas de los encabezados con las celdas que contienen los datos.

  • El atributo scope podemos usarlo especialmente en tablas sencillas y en los encabezamientos th.
  • El atributo headers cumple la misma misión pero de una forma más especifica, por ello es mejor reservarlo para tablas complejas.

Más información detallada de estos atributos en scope y headers en tablas para mejorar la accesibilidad.

En conclusión, con el uso de caption, th, thead, tbody, tfoot, colgroup, col, scope, headers, axis mejoramos sustancialmente la accesibilidad de nuestras tablas.

Usar atributo TITLE remplazando a LABEL

post - - 2 replies - share

Supongamos que tenemos la siguiente tabla de datos:

En la tabla vemos que hay unos campos de formulario para introducir el número de unidades de cada producto y que no tienen un texto que pueda usarse como LABEL. Ante esta situación he pensado que podría asociar explícitamente el INPUT con un LABEL de cada campo en la columna producto (reproductor mp3, impresora, caja 25 dvd).

<tr>
	<th id="pro1">
		<label for="a_uds">
			Reproductor <dfn title="Es un formato de audio digital"><abbr lang="en" xml:lang="en" title="MPEG-1 Audio Layer 3">MP3</abbr></dfn>
		</label>
	</th>
	<td headers="pro1 tpvp">
		40 €
	</td>
	<td headers="pro1 tuds">
		<input type="text" id="a_uds" name="a_uds" value="1" size="4" />
	</td>
</tr>

Vemos que LABEL e INPUT se encuentran asociados por el identificador “a_uds”.

Aunque esta forma de proceder no sea “mala”, quizás la etiqueta textual queda “lejos” del control de formulario, lo que puede provocar cierta confusión a los usuarios de lectores de pantalla.

La solución más directa en estos casos es usar el atributo TITLE de los controles de formulario.

<tr>
	<th id="pro1">
		Reproductor <dfn title="Es un formato de audio digital"><abbr lang="en" xml:lang="en" title="MPEG-1 Audio Layer 3">MP3</abbr></dfn>
	</th>
	<td headers="pro1 tpvp">
		40 €
	</td>
	<td headers="pro1 tuds">
		<input type="text" title="Número de unidades para: Reproductor mp3" name="a_uds" value="1" size="4" />
	</td>
</tr>

Usando title="Número de unidades para: Reproductor mp3" podemos ayudar a que el usuario sepa como actuar con ese control.

Etiquetas dentro del control input (III)

post - - 1 reply - share

Hace casi un año hablaba sobre un posible problema de usabilidad y accesibilidad en el formulario de inicio de sesión que tiene Facebook.

Desde entonces han mejorado un poquito la accesibilidad, aunque siguen sin usar la etiqueta label para el campo de Email de inicio de sesión. En su lugar han puesto los atributos title y value. El problema es que algunas ayudas asistivas pueden no interpretar el atributo title, por lo que esta solución no sería suficiente.

Respecto a la usabilidad puede ser debatida, pero el hecho de perder (lo que tienes que rellenar en ese campo) cuando haces clic en el, me parece un error. Eso si, visualmente y a nivel de interacción queda chulisimo.

Hoy, Kus (de uninstallme.com) me comenta:

Acabo de encontrar esto http://www.csskarma.com/lab/slidinglabels/ y me he acordado de este post. No lo he analizado a fondo, pero me ha parecido una buena idea.

Y tanto que es buena idea, la accesibilidad es impecable. Se usa JavaScript como un complemento no intrusivo que se encarga de realizar el efecto y la transición del label. Solo le veo una pega, que puede resultar cansino, yo lo usaría para formularios muy pequeños, con 2 o 3 inputs.

Un lujo contar con tus aportaciones María 😉

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.

CSS print, página optimizada para la impresión

post - - leave a reply - share

Hace poco tiempo hablábamos del código optimizado para diseñar e-mails y newsletter, ahora le toca el turno al formato de impresión.

Por cierto, entre tantas versiones (pantalla, e-mail, impresión) cabe recordar eso de “una web única” tan promulgado por la W3C. Bueno, lo que si es cierto es que las ventajas de los estándares web permiten una mejor adaptación al dispositivo o medio final y esto conlleva un ahorro de trabajo enorme.

Vamos al ataque con el CSS optimizado para la impresión.

Read more