SlideShare una empresa de Scribd logo
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 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

Más contenido relacionado

PPTX
Mejora tus US con UX y modelos de satisfacción
PPTX
Desarrollo de webapps 1
PPTX
Accesibilidad, hojas estilo cascada, y tu
PDF
Desarrollo de Mobile Web Apps
PDF
Tools and Frameworks
PPTX
Ejemplo de corrección de errores de accesibilidad WCAG 2.0 en una página web
PDF
REST, jQuery y otros Frameworks JS
PDF
Uso de html5 + webcomponents
Mejora tus US con UX y modelos de satisfacción
Desarrollo de webapps 1
Accesibilidad, hojas estilo cascada, y tu
Desarrollo de Mobile Web Apps
Tools and Frameworks
Ejemplo de corrección de errores de accesibilidad WCAG 2.0 en una página web
REST, jQuery y otros Frameworks JS
Uso de html5 + webcomponents

Destacado (20)

PDF
Workflow para volar con el CSS
PDF
Introducción a Google Dart + HTML5
PDF
Casper JS - Asegurando la calidad en front-end Drupal
PPTX
PAUTAS W3C DE ACCESIBILIDAD PARA HERRAMIENTAS DE EDICIÓN WEB (ATAG 2.0)
PPTX
Introducción a HTML - CSS - JS
PPTX
Ejemplos WAI-ARIA con HTML, CSS y JavaScript
PPTX
Flujos de interaccion
PDF
Desarrollo de aplicaciones web 3.0 (linked data + bpm + cloud)
PDF
Depurando Java Script - Programador PHP
PDF
Herramientas Frontend - Betabeers Salamanca - Enero 2015
PPTX
Herramientas de evaluación de accesibilidad web WCAG 2.0
PDF
Taller de Maquetacion web | Jorge Callalle Torres
PDF
Mejores practicas front end
PPTX
Maquetacion de pagina
PDF
Automatización de tareas con Gulp
PDF
Agile Product Management
PPTX
Flujos de trabajo para la web moderna
PDF
Front-end: Diseñar webs rápidas, flexibles y potentes
PPTX
Hacia la Internet del Futuro: Web 3.0, Parte 1
ODP
Desarrollo Web Ágil con Symfony, Bootstrap y Angular
Workflow para volar con el CSS
Introducción a Google Dart + HTML5
Casper JS - Asegurando la calidad en front-end Drupal
PAUTAS W3C DE ACCESIBILIDAD PARA HERRAMIENTAS DE EDICIÓN WEB (ATAG 2.0)
Introducción a HTML - CSS - JS
Ejemplos WAI-ARIA con HTML, CSS y JavaScript
Flujos de interaccion
Desarrollo de aplicaciones web 3.0 (linked data + bpm + cloud)
Depurando Java Script - Programador PHP
Herramientas Frontend - Betabeers Salamanca - Enero 2015
Herramientas de evaluación de accesibilidad web WCAG 2.0
Taller de Maquetacion web | Jorge Callalle Torres
Mejores practicas front end
Maquetacion de pagina
Automatización de tareas con Gulp
Agile Product Management
Flujos de trabajo para la web moderna
Front-end: Diseñar webs rápidas, flexibles y potentes
Hacia la Internet del Futuro: Web 3.0, Parte 1
Desarrollo Web Ágil con Symfony, Bootstrap y Angular
Publicidad

Similar a Integración de WAI-ARIA en HTML5 (6)

PDF
Pensando en Accesibilidad - Shift7 - Córdoba, Argentina
PDF
Accesibilidad Web 101 - WWC Santiago
PDF
Introduccion a WAI-ARIA
PDF
WAI-ARIA en 5 minutos
PPT
Accesibilidad práctica con HTML5, CSS3 y WAI-ARIA
Pensando en Accesibilidad - Shift7 - Córdoba, Argentina
Accesibilidad Web 101 - WWC Santiago
Introduccion a WAI-ARIA
WAI-ARIA en 5 minutos
Accesibilidad práctica con HTML5, CSS3 y WAI-ARIA
Publicidad

Más de Jose R. Hilera (17)

PPTX
Tema 3. Herramientas para laInteligencia Tecnológica
PPTX
Tema 2. Sistema de Inteligencia Tecnológica: Norma UNE 166006:2018
PPTX
Tema 1. Conceptos básicos sobre Inteligencia Tecnológica
PPTX
Tema 4. Aprendizaje a lo largo de la vida
PPTX
Tema 5. Evaluación y comparación de tecnologías
PPTX
Patrón de diseño Modelo-Vista-Controlador (MVC)
PPTX
Evaluación de la accesibilidad de aplicaciones para dispositivos móviles apli...
PPTX
Aspectos generales sobre accesibilidad de aplicaciones móviles (apps)
PPTX
Accesibilidad de aplicaciones para dispositivos móviles aplicando el RD 1112/...
PPTX
Desarrollo dirigido por modelo de servicios web REST
PPTX
Perfiles UML
PPTX
Contenidos accesibles para las redes sociales
PPTX
Ejemplos de WCAG 2.0
PPTX
Resumen de las pautas WCAG 2.0 de W3C
PPTX
Estándares de accesibilidad web
PPTX
Metodologías de ingeniería Web dirigida por modelos
PPT
Ontologies in Ubiquitous Computing
Tema 3. Herramientas para laInteligencia Tecnológica
Tema 2. Sistema de Inteligencia Tecnológica: Norma UNE 166006:2018
Tema 1. Conceptos básicos sobre Inteligencia Tecnológica
Tema 4. Aprendizaje a lo largo de la vida
Tema 5. Evaluación y comparación de tecnologías
Patrón de diseño Modelo-Vista-Controlador (MVC)
Evaluación de la accesibilidad de aplicaciones para dispositivos móviles apli...
Aspectos generales sobre accesibilidad de aplicaciones móviles (apps)
Accesibilidad de aplicaciones para dispositivos móviles aplicando el RD 1112/...
Desarrollo dirigido por modelo de servicios web REST
Perfiles UML
Contenidos accesibles para las redes sociales
Ejemplos de WCAG 2.0
Resumen de las pautas WCAG 2.0 de W3C
Estándares de accesibilidad web
Metodologías de ingeniería Web dirigida por modelos
Ontologies in Ubiquitous Computing

Último (17)

PPTX
presentación sobre Programación SQL.pptx
PPT
redes.ppt unidad 2 perteneciente a la ing de software
PPTX
PRESENTACION NIA 220 idhsahdjhJKSDHJKSHDJSHDJKHDJHSAJDHJKSAHDJkhjskdhasjdhasj...
PDF
COSMIC_DANCER_ORACLE.pdf tarot oráculo cartas
PDF
[Ebook gratuito] Introducción a la IA Generativa, Instalación y Configuración...
PPTX
FUNCIONES DE CLASSROOM EN EL FUNCIONAMIENTO ESCOLAR
PDF
Libro de Oraciones guia virgen peregrina
PPTX
Evolución de la computadora ACTUALMENTE.pptx
PDF
LA INTELIGENCIA ARTIFICAL SU HISTORIA Y EL FUTURO
PPTX
Qué es Google Classroom Insertar SlideShare U 6.pptx
PDF
Herramientaa de google google keep, maps.pdf
DOCX
ESTRATEGIA DE APOYO TECNOLOGÍA 2 PERIODO
PDF
.GUIA DE GUIA DE TRABAJO NUEVO TESTAMENTO.pdf
PPTX
Informática e inteligencia artificial (2).pptx
PPTX
presentacion_energias_renovables_renovable_.pptx
PDF
CAPACITACIÓN MIPIG - MODELO INTEGRADO DE PLANEACIÓN Y GESTIÓN
PPTX
Plantilla-Hardware-Informático-oficce.pptx
presentación sobre Programación SQL.pptx
redes.ppt unidad 2 perteneciente a la ing de software
PRESENTACION NIA 220 idhsahdjhJKSDHJKSHDJSHDJKHDJHSAJDHJKSAHDJkhjskdhasjdhasj...
COSMIC_DANCER_ORACLE.pdf tarot oráculo cartas
[Ebook gratuito] Introducción a la IA Generativa, Instalación y Configuración...
FUNCIONES DE CLASSROOM EN EL FUNCIONAMIENTO ESCOLAR
Libro de Oraciones guia virgen peregrina
Evolución de la computadora ACTUALMENTE.pptx
LA INTELIGENCIA ARTIFICAL SU HISTORIA Y EL FUTURO
Qué es Google Classroom Insertar SlideShare U 6.pptx
Herramientaa de google google keep, maps.pdf
ESTRATEGIA DE APOYO TECNOLOGÍA 2 PERIODO
.GUIA DE GUIA DE TRABAJO NUEVO TESTAMENTO.pdf
Informática e inteligencia artificial (2).pptx
presentacion_energias_renovables_renovable_.pptx
CAPACITACIÓN MIPIG - MODELO INTEGRADO DE PLANEACIÓN Y GESTIÓN
Plantilla-Hardware-Informático-oficce.pptx

Integración de WAI-ARIA en HTML5

  • 1. INTEGRACIÓN DE WAI-ARIA EN HTML5 Accessible Rich Internet Applications José Ramón Hilera
  • 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. 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. 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. 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. 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. 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. 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. 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