Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Integración de WAI-ARIA en HTML5

315 visualizaciones

Publicado el

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

Publicado en: Internet
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

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

×