Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Integración de WAI-ARIA en HTML5

313 views

Published on

Resumen de la sección “3.2.7 WAI-ARIA” del estándar HTML5, sobre elementos de accesibilidad para para aplicaciones web cliente.
Video de la presentacion disponible en:
https://youtu.be/YP1KJPgLoRI

Published in: Internet
  • Be the first to comment

  • Be the first to like this

Integración de WAI-ARIA en HTML5

  1. 1. INTEGRACIÓN DE WAI-ARIA EN HTML5 Accessible Rich Internet Applications José Ramón Hilera
  2. 2. 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
  3. 3. 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
  4. 4. 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
  5. 5. 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
  6. 6. 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
  7. 7. 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
  8. 8. 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
  9. 9. 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 PROPIEDADES OBIGATORIAS PROPIEDADES POSIBLES alert Un mensaje con Información importante, y habitualmente dependiente del tiempo. Ninguna aria-expanded (estado) combobox Presentació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

×