INTEGRACIÓN DE WAI-ARIA EN HTML5 Accessible Rich Internet Applications José Ramón Hilera

Contenido Introducción Estructura de la sección de HTML5 sobre WAI- ARIAEstructura de la sección de HTML5 sobre WAI- ARIA Ejemplos de aplicación de WAI-ARIA. Con código HTML, CSS y JavaScriptEjemplos de aplicación de WAI-ARIA. Con código HTML, CSS y JavaScript 2

Introducción HTML5 establece en su sección “3.2.7 WAI-ARIA”3.2.7 WAI-ARIA –Los autores de páginas HTML pueden usar roles y atributos establecidos por la especificación WAI-ARIA, excepto cuando haya conflictos con la semántica nativa de HTML –Estas excepciones tienen como objetivo pevenir a los autores de originar que los productos de apoyo (como lectores de pantalla) reporten estados erróneos que no representen el estado real de una página web –Los navegadores deben implementar la semántica de WAI- ARIA en todos los elementos HTML, tal y como se define en la especificación WAI-ARIA. 3

Estructura de la sección de HTML5 sobre WAI-ARIA ARIA Role Attribute State and Property Attributes Strong Native Semantics Implicit ARIA Semantics Allowed ARIA roles, states and properties 4

ARIA Role Attribute Esta sección es una reafirmación de que todo los relativo a los roles establecido por WAI-ARIA es asumido por HTML5 Los elementos HTML pueden tener asociados roles definidos por WAI-ARIA. Ejemplo: –Elemento de lista con rol de checkbox 5

State and Property Attributes Esta sección es una reafirmación de que todo los relativo a los estados y propiedades establecido por WAI-ARIA es asumido por HTML5 Cada elemento HTML puede tener asociados propiedades y estados definidos por ARIA. Ejemplo: –Elemento de lista con rol, estado y propiedad 6

Strong Native Semantics Incluye una tabla que relaciona los elementos de HTML con los roles, propiedades y estados de WAI-ARIA que se aplican por defecto a ese elemento HTML y su valor En esos elementos HTML, el rol, propiedad o estado indicado en la tabla, sólo puede tener el valor que se indica en la tabla. –Realmente no sería necesario asigarle valor, pues los navegadores deben dárselo por defecto. Ejemplos: 7 ELEMENTO HTMLSEMÁNTICA WAI-ARIA POR DEFECTO role=“listbox” con propiedad aria-multiselectable=“false” Ninguna semántica por defecto asociada role=“navigation” role=“textbox” con aria-multiline=“true”, y aria-readonly=“true” si el elemento contiene un atributo readonly

Implicit ARIA Semantics Incluye una tabla que relaciona los elementos de HTML con los roles, propiedades y estados de WAI-ARIA que se aplican por defecto a ese elemento HTML y su valor Pero en este caso, en esos elementos HTML, esa semántica WAI- ARIA puede ser modificada, bajo las condiciones que se indican en la tercera columna de la tabla. Ejemplos: 8 HTMLWAI-ARIA POR DEFECTORESTRICCIONES role=“article”Si se indica role, sólo puede tener como valores: “article”, “document”, “application”, o “main” Ningún rol por defectoSi se indica role, debe ser “application” role=“img”Ninguna restricción

Allowed ARIA roles, states and properties Incluye una tabla informativa con los roles (y sus propiedades y estados) que se pueden utilizar en HTML5 Y en la tercera columna si alguna propiedad es obligatoria Ejemplos: 9 ROLEDESCRIPCIÓNPROPIEDADES OBIGATORIAS PROPIEDADES POSIBLES alertUn mensaje con Información importante, y habitualmente dependiente del tiempo. Ningunaaria-expanded (estado) comboboxPresentación similar a una caja de texto, donde el usuario puede teclear para seleccionar una opción, o escribir cualquier texto como un nuevo elemento en la lista. aria-expanded (estado) aria-autocomplete aria-required aria-activedescendant