Revisión del libro "Pro HTML5 Accessibility"

Revisión del libro en el grupo meetup Madrid Accesibilidad TICs

Transcript

1. REVISIÓN DEL LIBRO "PRO HTML5 ACCESSIBILITY" @felixzapata @MadAccTIC / #MadAccTIC
2. UN RESUMEN RÁPIDO DEL LIBRO (1 DE 2) Es un libro sobre HTML5 y sobre Accesibilidad principalmente (y en ocasiones habla sobre la Acccesibilidad en HTML5). Otro de los capítulos finales está dedicado a la usabilidad Los dos primeros capítulos se habla sobre qué consiste la Accesibilidad, principales problemas de acceso por parte de los usuarios y uso de las herramientas de ayuda ¿Qué es un lector de pantalla? ¿Cómo se usa JAWS? ¿Cómo se usa VoiceOver? ¿Cómo se usa un magnificador de pantalla?,etc. Ejemplos del uso de WAI-ARIA. Pero recomiendo mejor este otro libro para eso Designing with Progressive Enhancement: Building the Web that Works for Everyone
3. UN RESUMEN RÁPIDO DEL LIBRO (2 DE 2) Accesibilidad de las nuevas etiquetas de estructura de contenido Debate sobre si usar un < h 1 > o varios por página No menciona los problemas de JAWS a la hora de acceder correctamente a los encabezados que se encuentran dentro de una etiqueta como < s e c t i o n > o < a r t i c l e > aunque sí menciona el problema existente cuando existen estos elementos anidados: JAWS, IE and Headings in HTML5 Cómo interactúan las herramientas de ayuda con los navegadores Multimedia, formularios y tablas accesibles Describe los 7 principios del diseño universal
4. COSAS QUE ME HAN LLAMADO LA ATENCIÓN (1 DE 2) El rol de presentación: < i m g s r c = " u n a i m a g e n c o n f i n e s d e c o r a t i v o s . p n g " r o l e = " p r e s e n t a t i o n " / > Diferentes usos de descripciones de imágenes para por ejemplo fotos, o gráficos estadísticos < f i g u r e > < i m g s r c = " u n a i m a g e n c u a l q u i e r a . p n g " / > < f i g u r e c a p t i o n > u n a d e s c r i p c i ó n d e l a i m a g e n < / f i g u r e c a p t i o n > < / f i g u r e > < i m g s r c = " u n a i m a g e n c o n f i n e s d e c o r a t i v o s . p n g " a l t = " e s t e a t r i b u t o l e s i g o u s a n d o " a r i a - d e s c r i b e d b y = " u n _ I D _ d e _ m i _ p a g i n a " / >
5. COSAS QUE ME HAN LLAMADO LA ATENCIÓN (2 DE 2) Concepto: Semantic Ninjas "So don´t think in absolutes; there are many relative considerations when it comes to HTML5 and accessibility" "Having some heading structure, rather than one, on a web document is far more important than merely ensuring the headings are ordered in the correct way" Tabla de etiquetas y su correspondiente versión en WAI-ARIA Construyendo un reproductor de videos accesible
6. NUEVAS MANERAS DE DESCRIBIR LAS TABLAS MEDIANTE HTML5 (1 DE 2) Antes de hacer una tabla (al margen de si usamos HTML5 o no) las preguntas de rigor: Ayuda que la tabla que construyamos sea simple. Evitar celdas o columnas que agrupen varias celdas o columnas (es decir, celdas con valores r o w s p a n o c o l s p a n ¿Realmente necesitamos presentar los datos como tabla? Método 1: describir la tabla en el propio contexto en que se encuentra. Por ejemplo mediante un párrafo por encima de ésta perteneciendo ambos a una etiqueta s e c t i o n Método 2: Usar el atributo a r i a - d e s c r i b e d b y similar al ejemplo anterior de la imagen Método 3: Usar la etiqueta c a p t i o n . Tal vez no demasiado útil según que casos de tablas
7. NUEVAS MANERAS DE DESCRIBIR LAS TABLAS MEDIANTE HTML5 (2 DE 2) Método 4: Usar la etiqueta d e t a i l s y la etiqueta s u m m a r y . La especificación de HTML5 recomienda que la etiqueta c a p t i o n sea combinada con la etiqueta d e t a i l s . Éste elemento representa un bloque adicional donde el usuario puede obtener información extra. La etiqueta s u m m a r y es hija siempre de d e t a i l s . Vale, ¿y el atributo s u m m a r y ? < t a b l e > < c a p t i o n > < s t r o n g > u n t í t u l o p a r a d e s c r i b i r e s t a t a b l a < / s t r o n g > < d e t a i l s > < s u m m a r y > E l t í t u l o d e l a d e s c r i p c i ó n a d i c i o n a l < / s u m m a r y > < p > L a d e s c r i p c i ó n m á s c o m p l e t a d e l a t a b l a q u e p o d a m o s d a r e n e s t e c a s o a p r o v e c h a n d o l a n u e v a e s p e c i f i c a c i ó n < / p > < / d e t a i l s > < / c a p t i o n >
8. JAVASCRIPT (1 DE 2) Útil cuando se usa correctamente HTML5 contiene numerosas etiquetas que son accesibles mediante teclado (y pueden recibir el foco) en últimas versiones de navegadores más allá de los enlaces y la etiqueta de formulario: a u d i o d a t a l i s t c o l o r d a t e ... Lo cual no significa que por ser accesibles mediante teclado ya son completamente accesibles. Ahí es donde entran en juego los roles
9. JAVASCRIPT (2 DE 2) WAI-ARIA: proporciona un mecanismo para que el desarrollador puede describir nuevas estructuras de navegación así como funcionalidades de tal modo que puedan ser reconocidos por herramientas de ayuda. Pero cuidado con añadir más accesibilidad de la necesaria provocando redundancias: Algunos de lo roles son similares a elementos y/o controles existentes en HTML5. La razón de su utilización redundante es que puede ser más fácil que una herramienta de ayuda soporte un rol de WAI-ARIA que alguno de los controles y/o elementos nuevos. Tabla de roles que JAWS reconoce < l a b e l > f o r = " a d d r e s s 1 " > D i r e c c i ó n [ C a m p o o b l i g a t o r i o ] : < / l a b e l > < i n p u t i d = " a d d r e s s 1 " t y p e = " t e x t " n a m e = " a d d r e s s 1 " a r i a - r e q u i r e d = " t r u e " / >
10. FORMULARIOS Básicamente, se aplican las mismas consideraciones para crear formularios accesibles en HTML5 que en HTML4 El capítulo dedicado a los formularios cuenta básicamente las etiquetas y atributos nuevos y explica buenas maneras de creación de formularios
11. ENLACES DE INTERÉS (1 DE 2) Enlaces míos que recopilo sobre accesibilidad Accessible Design with HTML5 Screen Readers and details/summary Notes on applying multiple labels for a control using the label element JAWS, IE and Headings in HTML5 Make sure your HTML5 document outline is backwards compatible Proyecto de fin de carrera sobre HTML5 y la accesibilidad web
12. ENLACES DE INTERÉS (2 DE 2) HTML 5 y accesibilidad de Olga Carreras Accessibility of HTML5 and Rich Internet Applications ARIA Landmark role support tests - 21/11/2011 HTML5 accessibility. Muy útil para saber el cómo interpretan los navegadores aquellas etiquetas que no soportan Semantic Automation: "When computers guess, the results are often not very good. But guessing is usually better than nothing." Videos: Accessibility, Progressive Enhancement and HTML5