Los elementos dinámicos cambian de estado, por ejemplo un elemento de un árbol puede estar plegado o desplegado. WAI-ARIA permite definir las propiedades y estados de los elementos.

role="treeitem" aria-expanded="false" tabindex="0" onclick="a()" onkeypress="a()"

En este ejemplo se indica que el elemento del árbol "Apples" está plegado. Cuando el usuario lo despliegue deberás cambiar dinámicamente su estado mediante javascript para que los productos de apoyo puedan transmitir el cambio al usuario.

$id.attr('aria-expanded', 'true');

Destacados

aria-live Permite identificar una zona dinámica de nuestro contenido que se actualiza automáticamente, de esta manera los cambios se anunciarán al usuario de los productos de apoyo. En función de su valor (off, polite, assertive) indicaremos cuándo queremos que se anuncie la actualización.
aria-live="off": los cambios NO se anunciarán al usuario a no ser que el foco esté en esa región. Será adecuado usarlo cuando la actualización no es relevante, por ejemplo una rotación de imágenes en la cabecera.
aria-live="polite": los cambios se anunciarán al usuario pero sin interrumpirle, anunciará el cambio cuando termine de escribir o termine de leer.
aria-live="assertive": los cambios se anuncian de inmediato, independientemente de lo que el usuario esté haciendo. Teniendo en cuenta que la actualización puede desorientar a los usuarios o que estos no terminen la tarea que están realizando, solo debe utilizarse para mensajes y advertencias importantes, por ejemplo de validación en un formulario.


aria-atomic:Con aria-atomic especificamos si queremos que se anuncie toda la región o solo las partes que han cambiado. Si el valor del atributo es "true" el lector de pantalla anunciará la región como un todo, por el contrario, si es "false" (el valor por defecto) solo anunciará el nodo que ha cambiado. En este ejemplo el valor es "true" por tanto nos anuncia la región. JAWS nos lee todas las noticias. ChromeVox sin embargo nos anuncia el título de la región: como está asociada al título "Últimas noticias" mediante el atributo aria-labelledby nos anuncia que se ha modificado "Últimas noticias".


aria-busy: Por defecto su valor es "false". Este atributo se utiliza cuando muchas partes de un mismo elemento van a ser modificadas.

aria-facturado:Indica estado de casillas de verificación, botones de radio, y otros reproductores . si el elemento está marcado ( true ), sin marcar ( false ).

aria-multiselectable:Indica que el usuario puede seleccionar más de un elemento de los descendientes actuales seleccionables.

aria-describedby: Proporcionan una información adicional, también se puede utilizar para clarificar enlaces, botones, abreviaturas, widgets o descripciones de imágenes. Pero es importante advertir que antes de aplicarlo como única técnica valores si existe una alternativa accesible con mayor soporte.

aria-label indicas directamente el texto, proporcionar indicios suficientes para determinar el propósito con aria-labelledby:Establece relaciones entre los objetos y sus etiquetas. La tecnología de asistencia, tales como lectores de pantalla, utilizan este atributo para catalogar los objetos en un documento para que los usuarios pueden navegar entre ellos


aria-labelledby es muy similar al aria-describedby: Esta proporciona información esencial acerca de un objeto, mientras que aria-describedby proporciona información extendida de que el usuario pueda necesitar. La diferencia es que con aria-label indicas directamente el texto y con aria-labelledby el id/ids del elemento/s de la página que actúa/n como etiqueta.

Ejemplo de aria-label

div id="leftnav" role="navigation" aria-label="Menú principal"> ul>li>...una lista de enlaces ...li>/ul>/div> div id="rightnav" role="navigation" aria-label="Menú secundario"> ul>li>...una lista de enlaces ...li> /ul>/div>

Ejemplo de aria-labelledby:

p id="report-title">Download 2012 Sales Report: a aria-labelledby="report-title pdf" href="pdf.pdf" id="pdf"PDFa | a aria-labelledby="report-title doc" href="word.doc" id="doc"Worda | a aria-labelledby="report-title ppt" href="ppt.ppt" id="ppt"Powerpointa>

Hay que tener cuidado con su uso. aria-label pueden ser desatendida si se usa con aria-labelledby y anula otras formas nativas de etiquetado como ALT en las imágenes o label en los campos de formulario.Una de las novedades en la versión WAI-ARIA 1.1 es la inclusión de aria-describedat que permite incluir la URL de la página que describe al elemento.

aria-hidden = "true" para elementos no visibles "false" para elementos visibles.

Formularios

aria-expanded = "true","false"true esta estendido, false no esta extendido

aria-required = "true"es para todos los campos requeridos en el formulario.

aria-pressed = "true","false","mixed"."undefined" Indica el estado del boton de envio.

Enlaces rotos

aria-haspopup="true"

Tabulación de articulos

aria-flowtoEl objetivo de esta técnica es especificar las órdenes de lectura,es usado por las tecnologías de apoyo y es ignorado por el navegador

aria-placeholderDefine una breve sugerencia (una palabra o frase corta) destinada a ayudar al usuario con la entrada de datos cuando el control no tiene ningún valor. Una sugerencia podría ser un valor de muestra o una breve descripción del formato esperado. Los autores NO DEBEN utilizar en aria-placeholderlugar de una etiqueta ya que sus propósitos son diferentes: la etiqueta indica qué tipo de información se espera. El texto del marcador de posición es una pista sobre el valor esperado. Ver relacionados aria-labelledbyy aria-label.