PDF de programación - WAI-ARIA - Accesibilidad en la Web

Accesibilidad en la Web

Universidad de Colima

México

Departamento de Lenguajes y
Sistemas Informáticos

WAI-ARIA
WAI ARIA

Departamento de Lenguajes y Sistemas Informáticos

Sergio Luján Mora

Universidad de Alicante

DLSI - Universidad de Alicante

1

AJAX

• Según la Wikipedia:

AJAX acrónimo de Asynchronous JavaScript And
– AJAX, acrónimo de Asynchronous JavaScript And
XML (JavaScript asíncrono y XML), es una técnica
de desarrollo web para crear aplicaciones
interactivas o RIA (Rich Internet Applications).
Estas aplicaciones se ejecutan en el cliente, es
decir, en el navegador de los usuarios mientras se
mantiene la comunicación asíncrona con el
servidor en segundo plano. De esta forma es
posible realizar cambios sobre las páginas sin
necesidad de recargarlas, lo que significa
aumentar la interactividad, velocidad y usabilidad
en las aplicaciones.

id

D

d

l

t

f

WAI-ARIA

• Ajax: A New Approach to Web Applications
– Famoso artículo del 2005 donde Jesse James

Garrett acuñó el término AJAX

– http://www.adaptivepath.com/ideas/essays/archive

s/000385.php

• AJAX un nuevo acercamiento a Aplicaciones

WebWeb
– Traducción al español del artículo anterior
– http://www.uberbin.net/archivos/internet/ajax-un-

nuevo-acercamiento-a-aplicaciones-web.php

DLSI - Universidad de Alicante

2

AJAX

• Ajax emplea:

– HTML: para definir la página web
HTML: para definir la página web
– JavaScript: para incorporar script en la página

web

– DOM: para acceder a la estructura y contenido de

la página web (consulta y modificación)

– XMLHttpRequest: para realizar las peticiones

asíncronas al servidor
asíncronas al servidor

– XML: para la transmisión de datos de forma

asíncrona entre el servidor y el cliente

AJAX

• Problemas:

El navegador debe soportar JavaScript y debe
– El navegador debe soportar JavaScript y debe
estar activo

– El navegador debe soportar el objeto

XMLHttpRequest

– Cualquier parte de la página puede cambiar sin
avisar al usuario (un cambio pequeño puede ser
muy difícil de detectar, incluso para un usuario
visual)
• Ejemplo:

p

y

,

– Calculadora creada con AJAX:

• http://www.standards-schmandards.com/exhibits/ajax/

DLSI - Universidad de Alicante

3

AJAX

• Problemas:

– AJAX and Accessibility

• http://www.standards-

schmandards.com/2005/ajax-and-accessibility/

– Accessibility of AJAX Applications

• http://www.webaim.org/techniques/ajax/
AJAX and Screenreaders: When Can it
– AJAX and Screenreaders: When Can it
Work?
• http://www.sitepoint.com/article/ajax-

screenreaders-work

DLSI - Universidad de Alicante

4

AJAX

• Solución básica:

Informar previamente al usuario de los requisitos necesarios
– Informar previamente al usuario de los requisitos necesarios
(JavaScript, XMLHttpRequest)

– Informar previamente al usuario de que el contenido de la
página es dinámico y puede cambiar en cualquier momento

– Informar al usuario de que el contenido ha cambiado

(ejemplo, “The Yellow Fade Technique”)

– Situar el foco sobre el contenido que ha cambiado

• Ejemplo:

– Calculadora creada con AJAX accesible:

• http://www.standards-schmandards.com/exhibits/ajax/v2.php

Avisos cuando el contenido cambia

DLSI - Universidad de Alicante

5

AJAX

• Soluciones más efectivas:

– Making Ajax Work with Screen Readers

• http://juicystudio.com/article/making-ajax-work-

with-screen-readers.php

– Improving Ajax applications for JAWS

users
• Actualiza el buffer virtual de JAWS desde

JavaScript para que los cambios estén
disponibles

• http://juicystudio.com/article/improving-ajax-

applications-for-jaws-users.php

AJAX

• Solución:

– Hijax: se basa en progressive enhancement
1. Primero, diseñar un sitio web al "estilo antiguo", con

enlaces y acciones de formularios que envían información
al servidor y este devuelve una página completa con cada
petición.

2. A continuación, emplear JavaScript para capturar todos
los enlaces y las acciones de los formularios para enviar
la infomación mediante XMLHttpRequest. De este modo
se puede seleccionar que parte de la página se pueden
actualizar de forma individual en vez de tener que recargar
toda la página.
• http://accesibilidadenlaweb.blogspot.com/2007/10/hijax-

ajax-accesible.html

DLSI - Universidad de Alicante

6

AJAX

• Solución:

– AxsJAX (Access-Enabling AJAX):

• Librería JavaScript de código abierto destinada a

mejorar la accesibilidad de las aplicaciones Web 2.0

• Hace uso de las características definidas por WAI-ARIA
• http://code.google.com/p/google-axsjax/

WAI-ARIA

• Según la Wikipedia:

– RIA, acrónimo de Rich Internet Applications

(Aplicaciones Ricas de Internet) son un nuevo tipo
de aplicaciones con más ventajas que las
tradicionales aplicaciones Web. Esta surge como
una combinación de las ventajas que ofrecen las
aplicaciones Web y las aplicaciones tradicionales.

DLSI - Universidad de Alicante

7

WAI-ARIA

• Según la Wikipedia:
li

t

l

l

i

– Normalmente en las aplicaciones Web, hay una recarga

N
continua de páginas cada vez que el usuario pulsa sobre un
enlace. De esta forma se produce un tráfico muy alto entre
el cliente y el servidor, llegado muchas veces, a recargar la
misma página con un mínimo cambio.

W b h

– Otra de las desventajas de las tradicionales aplicaciones

Web es la poca capacidad multimedia que posee. Para ver
un vídeo es necesario usar un programa externo para su
un vídeo es necesario usar un programa externo para su
reproducción.

WAI-ARIA

• Según la Wikipedia:

t

bi

RIA

– Los entornos RIA, en cambio, no se producen recargas de

L
página, ya que desde el principio se carga toda la aplicación
y sólo se produce comunicación con el servidor cuando se
necesitan datos externos como datos de una Base de Datos
o de otros ficheros externos.

d

d

– Las capacidades multimedia son totales gracias a que estos

entornos tienen reproductores internos y no hace falta
ningún reproductor del Sistema Operativo del usuario
ningún reproductor del Sistema Operativo del usuario.

DLSI - Universidad de Alicante

8

WAI-ARIA

• Problema:

– HTML + CSS + script: permite crear componentes

a medida (widget) que no incluyen información
semántica sobre su comportamiento

– HTML carece de un mecanismo para incluir

metadatos sobre la estructura del documento (qué
es un menú, qué es el contenido principal, qué es
un elemento de navegación, etc.)
)

ió

l

d

– Los componentes a medida no son accesibles a

través del teclado

WAI-ARIA

• Ejemplo:

– Menús desplegables
– Árboles
– Barras de desplazamiento
– …

DLSI - Universidad de Alicante

9

DLSI - Universidad de Alicante

10

WAI-ARIA

• Solución:

– Extensión para HTML y XHTML llamada

Roles, States, and Properties Module for
Accessible Rich Internet Applications
1.0 del W3C

– El objetivo es que forme parte de HTML 5

DLSI - Universidad de Alicante

11

WAI-ARIA

• Solución:

– Para utilizar esta extensión en los

navegadores actuales necesitamos instalar
iCITA Firefox Accessibility Extension:
• http://firefox.cita.uiuc.edu/

– Añade una barra de herramientas al

navegador con múltiples opciones

DLSI - Universidad de Alicante

12

WAI-ARIA

• ¿Por dónde empezar a leer?
• WAI-ARIA Overview

– http://www.w3.org/WAI/intro/aria.php

• Permite acceder a los distintos

documentos desarrollados

DLSI - Universidad de Alicante

13

WAI-ARIA

• WAI-ARIA define:

Roles para describir el tipo de widget como menu
– Roles para describir el tipo de widget, como menu,
treeitem, slider y progessmeter

– Roles para describir la estructura de la página web, como

encabezados, regiones y tablas (rejillas)

– Propiedades para describir el estado de los widgets, como
checked para una casilla de verificación o haspopup para
un menú
P
i
pueden ser actualizadas

– Propiedades para definir regiones activas (live regions) que

i d d

d fi

i

)

i

ti

(li

– Propiedades para operaciones drag-and-drop que describen

el origen y el destino

– Un modo para poder navegar por los objetos de la página y

activar los eventos asociados

WAI-ARIA

• WAI-ARIA Primer

– W3C Working Draft 4 February 2008
– http://www.w3.org/TR/wai-aria-primer/
– Explica el problema, los conceptos

fundamentales y las soluciones técnicas
que WAI-ARIA proporciona
q

p p

DLSI - Universidad de Alicante

14

WAI-ARIA

• WAI-ARIA Best Practices

– W3C Working Draft 4 February 2008
– http://www.w3.org/TR/wai-aria-practices/
– Destinado a desarrolladores de aplicaciones web
– Proporciona recomendaciones para crear

contenido accesible mediante WAI-ARIA (roles,
estados y propiedades)
)

y p p

– Muestra paso por paso como crear un widget

accesible con ARIA

WAI-ARIA
• Accessible Rich Internet

Applications (WAI-ARIA) Version 1.0
– W3C Working Draft 4 February 2008
– http://www.w3.org/TR/wai-aria/
– Futura recomendación del W3C
– Define roles estados y propiedades
– Define roles, estados y propiedades

DLSI - Universidad de Alicante

15

DLSI - Universidad de Alicante

16

WAI-ARIA

DEFINICIÓN
Indicates whether a live region is finished updating.

The checked state indicates something has been rendered as being chosen by the
user in the sense that it is a binary or tertiary operation. An example is a checkbox.

Indicates that the widget is present, but the value cannot be set and it cannot be
internally navigated.
Indicates whether an expandable/collapsible group of elements is currently
expanded or collapsed.

h

bj

h h

This property is set to show an object's state in drag and drop.
D fi
Defines whether or not the object is visible to the user.
Indicates that the element's value is currently invalid, which discourages the form
from being submitted.
Used for buttons that are toggleable to indicate their current pressed state.
Sets whether the user has selected an item or not.

i

i

ibl

h

ESTADO
busy

checked

disabled

expanded

grab
hidd
hidden

invalid

pressed
selected

WAI-ARIA

DEFINICIÓN
An element which has focus may