Una pequeña introducción a ARIA

A quick & dirty introduction to ARIA (2014), una pequeña introducción a ARIA realizada por Leonie Watson de The Paciello Group:

A quick & dirty introduction to ARIA (2014) from Léonie Watson

ARIA explicado por Mozilla

Consultar la especificación oficial de ARIA, Accessible Rich Internet Applications (WAI-ARIA) 1.0, no es apto para todos los públicos. Afortunadamente, existen algunos recursos en los que se explica masticado y entendible.

Mozilla Developer Network ofrece varios recursos sobre ARIA.

Por un lado, está ARIA, el portal en el que se recogen todos sus recursos. Recomiendo Web applications and ARIA FAQ en el que se incluye un ejemplo de uso. Además, se explica si una página es válida, respecto a HTML, cuando se emplea ARIA.

ARIA en acción

En Videos of screen readers using ARIA, updated se encuentra una excelente colección de vídeos en los que se explica y se muestra el uso de ARIA en las páginas web para mejorar la accesibilidad.

Por ejemplo, el siguiente vídeo explica el uso de los landmarks, conocidos en español como regiones o puntos de referencia:


Si no sabes qué es ARIA, consulta WAI-ARIA Overview y Accessible Rich Internet Applications (WAI-ARIA) 1.0.

WAI-ARIA ya es recomendación

El pasado 20 de marzo, ARIA fue publicado como recomendación del W3C: Accessible Rich Internet Applications (WAI-ARIA) 1.0.

En W3C's Accessible Rich Internet Applications (WAI-ARIA) 1.0 Expands Accessibility of the Open Web Platform se explica la importancia de esta nueva recomendación.

ARIA, JavaScript y la accesibilidad de los vídeos interactivos

Un vídeo de la charla Overview of ARIA, JavaScript, and Interactive Web Accessibility que se realizó el año pasado en el JavaScript Accessibility Summit.

Cómo hacer un cuadro de diálogo modal accesible

Imprescindible el artículo The Incredible Accessible Modal Dialog, que explica cómo hacer un cuadro de diálogo modal accesible que tenga en cuenta a los usuarios que utilizan el ordenador con teclado o a los usuarios ciegos (que también lo usan con el teclado, pero que presentan otras consideraciones propias).

La idea general de esta solución es:

• The first focusable item in the modal dialog should receive the keyboard focus.
• The window behind the modal dialog should not be allowed to be clicked on
• The modal dialog must trap the keyboard focus inside the modal dialog so the user can’t accidentally interact with the window behind the modal dialog.
  • When the user is on the last focusable item and presses Tab, the user should be taken to the first focusable item in the modal dialog.
  • When the user is on the first focusable item and presses Shift-Tab, the user should be taken to the last focusable item in the modal dialog.
• The position of the keyboard focus before the modal window opens must be saved, and the focus must be restored to this location after the modal dialog closes.

El uso de tabindex para mejorar la accesibilidad

En WAI-ARIA se redefine el comportamiento del atributo tabindex de HTML. En WAI-ARIA 1.0 Primer está explicado en el punto 2.1.3. Provision of the Keyboard or Input Focus: "What object am I working on?".

En HTML 4.01 y XHTML 1.x, sólo los controles de los formularios (button, input, select, textarea), los enlaces (a y area) y los objetos (object) pueden recibir el foco. Esto dificulta el desarrollo de interfaces avanzadas en las que con los eventos (onclick, onkeydown) podemos hacer que se pueda interactuar con cualquier elemento de la página.

En WAI-ARIA se puede emplear tabindex para permitir que un elemento cualquiera pueda recibir el foco:

• Si no está el atributo tabindex, el comportamiento es el normal, y sólo los controles de un formulario pueden recibir el foco con el ratón o desde JavaScript con element.focus().
• Si tabindex toma un valor negativo (tabindex="-1"), el elemento puede recibir el foco con el ratón o desde JavaScript con element.focus(), pero no se puede navegar a él mediante la tecla tabulación, es decir, el elemento no está en el flujo normal de tabulación.
• Si tabindex toma el valor cero (tabindex="0"), el elemento puede recibir el foco con el ratón o desde JavaScript con element.focus(), y se puede navegar a él mediante la tecla tabulación (la posición que ocupa en el orden de tabulación es la correspondiente a su posición en el documento).
• Finalmente, si tabindex toma un valor positivo (tabindex="1"), el elemento puede recibir el foco con el ratón o desde JavaScript con element.focus(), se puede navegar a él mediante la tecla tabulación, y el valor del atributo indica su posición en el orden de tabulación; además, se colocan por delante de cualquier elemento que tenga tabindex="0" o cualquier elemento que reciba el foco de forma natural (los controles de los formularios y los enlaces).

Bueno, esto es la teoría... luego falta que los navegadores y los lectores de pantalla la cumplan.

En tabindex, keyboard focus and some ARIA in screen readers, se presentan los resultados de unas pruebas realizadas con diferentes ejemplos en diferentes navegadores y con diferentes lectores de pantalla. Con JAWS los resultados son los adecuados con Internet Explorer y Firefox, pero con otros lectores de pantalla (NVDA, SAToGo, Windows-Eyes y VoiceOver) ocurren algunas cosas raras.

Cinco formas de usar HTML5 con ARIA

El artículo 5 HTML5 and ARIA design patterns explica cinco formas de usar HTML5 con ARIA.

Estos patrones pueden parecer un poco repetitivos, puede parecer que se está diciendo lo mismo dos veces... así es, desgraciadamente no todos los lectores de pantalla actuales ofrecen el mismo soporte de HTML5 y ARIA, así que por ahora "hay que decir lo mismo dos veces".

Introducción a ARIA

Un artículo que explica de forma muy sencilla qué es ARIA y cómo se puede usar: ARIA and Progressive Enhancement.

Lo más interesante del artículo es la comparativa de soporte de diferentes características de ARIA en diferentes lectores de pantalla (ZoomText, JAWS, Window-Eyes, NVDA y VoiceOver):

Muy importante, este artículo es de noviembre de 2010, así que se supone que las versiones actuales de los lectores de pantalla deben soportar más características.

Ejemplos de código AJAX accesible

OpenAjax Examples es una lista de fragmentos de código basado en AJAX que hace uso de WAI-ARIA para que sea accesible.

Así, por ejemplo, podemos encontrar ejemplos de listas que se rellenan de datos mediante AJAX, contenido que se muestra o se oculta, y controles hechos a medida, como barras de progreso o barras de deslizamiento (slider).

Generador de formularios accesibles

Quick Form Builder es una herramienta en línea que permite construir formularios accesibles de forma rápida y sencilla. Las opciones más interesantes que incorpora son:

• Permite emplear los nuevos tipos de controles de HTML5, como correo electrónico, selector de fecha, selector de color, etc.
• Etiqueta los nombres de los controles con la etiqueta <label>.
• Emplea el atributo labelledby de ARIA.

Soporte de ARIA en JAWS

Descripción de las características de ARIA que soporta JAWS: JAWS Support for ARIA. También está disponible como un documento de Word.

AViewer

AViewer es un software desarrollado por The Paciello Group que permite inspeccionar el contenido de una página web y ver el código HTML, los atributos ARIA y la información proporcionada por el navegador a los APIs de accesibilidad: MSAA, ARIA, HTML e IA2.

Uso del texto alternativo con HTML 5

El texto alternativo es la principal forma de lograr que la información visual sea accesible. Hace tiempo, escribí varias entradas donde explicaba el uso del texto alternativo:

• ¿Qué hace el atributo alt? (17/3/2006)
• El atributo longdesc (10/4/2006)
• Serie "Guía breve": Imágenes y animaciones (31/10/2007)
• Serie "Guía breve": Mapas de imagen (2/11/2007)

HTML 5, que se espera que sea una recomendación en 2011, traerá numerosas novedades y características que mejorarán la accesibilidad de las páginas web. En el borrador de HTML 5 podemos encontrar el apartado 4.8.1.1 Requirements for providing text to act as an alternative for images donde se explica cómo escribir un texto alternativo correcto. Además, el W3C también ha publicado el borrador del documento HTML5: Techniques for providing useful text alternatives donde se desarrolla (o se desarrollará, porque el documento está incompleto).

Los mecanismos disponibles en HTML 5 para proporcionar un texto alternativo son:

• El atributo alt del elemento img
• El atributo title del elemento img
• El atributo longdesc del elemento img
• Los nuevos atributos aria-labelledby y aria-describedby
• Los nuevos elementos figure y figcaption

Un ejemplo de uso del nuevo atributo aria-describedby es:

<p><img src="flowchart.gif" alt="Un diagrama de flujo que representa la reparación de una lámpara que no funciona." aria-describedby="d1"></p>

<p id="d1">Si la lámpara no funciona, comprobar que está conectada a la corriente.

Si no, conectarla. Si está conectada y todavía no funciona, comprobar que hay una bombilla.

Si no, colocar una bombilla. Si hay una bombilla, comprobar que no está quemada.

Si lo está, cambiar la bombilla. Si todavía no funciona, comprar una lámpara nueva.</p>

En el ejemplo anterior,el atributo aria-describedby contiene el identificador (atributo id) de un párrafo de texto que contiene la descripción detallada de la imagen.

Un ejemplo del uso de los nuevos elementos (etiquetas) figure y figcaption es:

<figure>

<img src="adan-eva.jpg" alt="Fotografía de la pareja de pinturas, donde Adán se sitúa a la izquierda y Eva a la derecha con la famosa manzana en su mano izquierda">

<figcaption>Adán y Eva, Alberto Durero (1507)</figcaption>

</figure>

En el ejemplo anterior se puede observar que se ha empleado el atributo alt para proporcionar una descripción de la imagen, mientras que la etiqueta figcaption proporciona el título, autor y fecha de creación del cuadro que representa la imagen.

AxsJax

AxsJax es un proyecto de Google que ofrece un framework para crear aplicaciones accesibles que utilicen AJAX.

Otro término relacionado con AJAX accesible es Hijax: Ajax accesible.

Taller sobre interfaces accesibles con ARIA

Acabo de encontrar el taller More Accessible User Interfaces with ARIA que se impartirá el próximo martes 17 de noviembre. El taller lo impartirá Todd Kloots de Yahoo! y explicará cómo lograr, gracias a ARIA, que los controles y las interfaces ricas de usuario sean accesibles. En concreto, la noticia dice:

ARIA is a W3C specification that can be used to dramatically improve the accessibility of DHTML widgets and rich interaction patterns (like drag and drop). This talk provides practical tips and design patterns for using ARIA to create accessible user interfaces that work across all of the various combinations of browsers and assistive technology that support ARIA.
Additionally, this talk will focus on the tools and methodologies developers need to test ARIA in order to ensure the best possible user experience.

El taller es gratuito. ¿Lo malo? Que es en Londres.

Usabilidad e inclusión digital

El viernes 13 de marzo a las 17.30 habrá un seminario sobre Usabilidad e inclusión digital en Alicante. El programa es:

Programa
1. Introducción
1.1 Acceso a la información en un entorno digital como Internet: Accesibilidad, Usabilidad, e-Inclusión... ¿de qué trata todo esto?
1.2 Rol del diseñador gráfico en la inclusión digital.

2. Visualización de la Información
2.1 Cuatro apuntes sobre Visualización de la Información.
2.2 La Usabilidad como un ejemplo de Visualización de la Información.
2.3 La multiplicidad de esquemas notacionales: El reto de la accesibilidad.

3. Claves para el desarrollo usable y accesible de un sitio web.
3.1 Un poco de historia: El diseño web vernacular, la aparición de las hojas de estilo CSS y JavaScript, PHP y el contenido dinámico, el crack de las punto com y la web 2.0.
3.2 La variedad de dispositivos.
3.3 La iniciativa WAI.
3.4 Separación de contenido y forma.

4. Aproximación a algunas soluciones técnicas
4.1 XHTML+CSS accesible
4.2 Otros formatos: XML+XSLT, Sindicación RSS
4.3 Presente y futuro: WCAG 2.0, Ajax y accesibilidad (WAI-ARIA), CSS3...

Mucho para tan poco tiempo.

Última convocatoria de Aplicaciones de Internet Enriquecidas Accesibles (WAI-ARIA)

En las noticias del W3C en español podemos leer Última Convocatoria: Aplicaciones de Internet Enriquecidas Accesibles (WAI-ARIA). También publicados los Borradores de Trabajo de buenas prácticas y guía de implementación. La noticia dice:

El Grupo de Trabajo de Protocolos y Formatos ha publicado un Borrador de Trabajo de última convocatoria de Aplicaciones de Internet Enriquecidas Accesibles (WAI-ARIA). WAI-ARIA describe cómo hacer que el contenido y las aplicaciones Web sean más accesibles para las personas con discapacidad. Es de especial utilidad para el contenido dinámico y los controles de interfaces de usuarios avanzados desarrollados con Ajax, HTML, JavaScript, y tecnologías relacionados.
El Grupo de Trabajo también ha publicado el primer Borrador de Trabajo público de la Guía de Implementación de Agentes de Usuario de WAI-ARIA que ofrece una guía sobre cómo los navegadores y otros agentes de usuario deberían exponer las características de WAI-ARIA a las APIs de accesibilidad de la plataforma. El Borrador de Trabajo actualizado de Buenas Prácticas en WAI-ARIA que ha sido publicado describe como los desarrolladores de contenido Web pueden desarrollar aplicaciones Web enriquecidas accesibles utilizando WAI-ARIA. Estos documentos de WAI-ARIA están descritos en la Introducción a WAI-ARIA. Lee más detalles en el comunicado de la revisión, y sobre la Iniciativa de Accesibilidad Web (WAI).

Otro artículo sobre WAI-ARIA

A través de un comentario que me han hecho a la entrada Introducción WAI ARIA que escribí ayer me han pasado el enlace de otro artículo parecido: WAI-ARIA, una aproximación. El artículo explica qué es WAI-ARIA, sus orígenes, las soluciones que aporta y contiene algunos ejemplos de utilización: la definición de una zona de navegación (la típica barra de navegación o de menú de un sitio web) y cómo hacer que un widget de tipo slider (barra deslizante) sea accesible.

Introducción a WAI ARIA

Acabo de encontrar la página web Introducción a WAI-ARIA, que es una traducción al español del artículo Introduction to WAI ARIA. Este artículo explica de una forma sencilla y con ejemplos concretos las características que se tienen que emplear para que las aplicaciones ricas o enriquecidas (rich internet applications) no tengan problemas de accesibilidad.

WAI-ARIA, the Accessible Rich Internet Applications Suite, es una propuesta del W3C que tiene como objetivo lograr que el contenido web y las aplicaciones web sean más accesibles de cara a las personas con discapacidad. En concreto, se centra en el contenido dinámico y en los interfaces avanzados de usuario basados en JavaScript, Ajax y otras tecnologías similares.