integración de wai-aria en html5
TRANSCRIPT
INTEGRACIÓN DE WAI-ARIA
EN HTML5
Accessible Rich Internet
Applications
José Ramón Hilera
Contenido
• Introducción
• Estructura de la sección 3.2.7 de HTML5 sobre WAI-
ARIA
• Ejemplos 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”
– 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 3.2.7
de HTML5 sobre WAI-ARIA
• 3.2.7.1 ARIA Role Attribute
• 3.2.7.2 State and Property Attributes
• 3.2.7.3 Strong Native Semantics
• 3.2.7.4 Implicit ARIA Semantics
• 3.2.7.5 Allowed ARIA roles, states and properties
4
3.2.7.1 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 <li> con rol de checkbox
<li id=“opcion1“ role="checkbox“>
5
3.2.7.2 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 <li> con rol, estado y propiedad
<li id=“opcion1“ role="checkbox“
aria-checked="false“ aria-describedby="desc1" > 6
3.2.7.3 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 HTML SEMÁNTICA WAI-ARIA POR DEFECTO
<datalist> role=“listbox” con propiedad aria-multiselectable=“false”
<head> Ninguna semántica por defecto asociada
<nav> role=“navigation”
<textarea> role=“textbox” con aria-multiline=“true”, y aria-readonly=“true” si el elemento contiene un atributo readonly
3.2.7.4 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
HTML WAI-ARIA POR DEFECTO RESTRICCIONES
<article> role=“article” Si se indica role, sólo puede tener como valores: “article”, “document”, “application”, o “main”
<audio> Ningún rol por defecto Si se indica role, debe ser “application”
<img> role=“img” Ninguna restricción
3.2.7.5 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
ROLE DESCRIPCIÓN PROPIEDADESOBIGATORIAS
PROPIEDADES POSIBLES
alert Un mensaje con Información importante, y habitualmentedependiente del tiempo.
Ninguna aria-expanded (estado)
combobox Presentación similar a una cajade texto, donde el usuario puedeteclear para seleccionar unaopción, o escribir cualquier textocomo un nuevo elemento en la lista.
aria-expanded(estado)
aria-autocompletearia-requiredaria-activedescendant