Introduccion a WAI-ARIA

1,910 views

Published on

Ponencia de Adesis Netlife acerca de la Accesibilidad Web. Introducción a la WAI-ARIA. Impartida por Santiago Ares, consultor en Accesibilidad Web de Adesis Netlife.

Published in: Technology
0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,910
On SlideShare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
0
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide

Introduccion a WAI-ARIA

  1. 1. Introducción a WAI-ARIA
  2. 2. WAI-ARIA Las páginas web que solemos utilizar hoy en día se parecen poco o muy poco a aquellas que se utilizaban en los inicios de Internet…ADESIS NETLIFE – noviembre 2012 Introducción a WAI-ARIA 2
  3. 3. WAI-ARIA Páginas antiguas • Escasez de elementos de interacción. • Página como unidad mínima de información. • Recarga completa de la página.ADESIS NETLIFE – noviembre 2012 Introducción a WAI-ARIA 3
  4. 4. WAI-ARIA Páginas modernas • Multitud de elementos de interacción. • Alta interactividad con el usuario. • Similares a las aplicaciones de escritorio. • La unidad mínima de información la deseada por el desarrollador. • Recarga de partes concretas de la página.ADESIS NETLIFE – noviembre 2012 Introducción a WAI-ARIA 4
  5. 5. WAI-ARIA RIA (Rich Internet Applications) Pueden mejoran sustancialmente la experiencia de usuario en la web. Sin embargo, existen como mínimo dos aspectos que conviene tener en cuenta: • Usabilidad • AccesibilidadADESIS NETLIFE – noviembre 2012 Introducción a WAI-ARIA 5
  6. 6. WAI-ARIA RIA (Rich Internet Applications) Usabilidad Con usabilidad entendemos la rapidez y facilidad con que los usuarios realizan sus tareas empleando la aplicación objeto de interés, idea que descansa en tres puntos: • Efectividad: es la precisión y la plenitud con las que los usuarios alcanzan sus objetivos. • Eficiencia: los recursos empleados en relación con la precisión y plenitud con que los usuarios alcanzan sus objetivos. • Satisfacción: el nivel de ausencia de incomodidad y la actitud positiva en el uso de la aplicación.ADESIS NETLIFE – noviembre 2012 Introducción a WAI-ARIA 6
  7. 7. WAI-ARIA RIA (Rich Internet Applications) Accesibilidad Según las nuevas WCAG 2.0 (W3C, 2008), una aplicación será accesible cuando se cumplan los siguientes principios: • Ser perceptible, en el sentido de que cualquier persona debe ser capaz de detectar el contenido que se presenta. • Ser operable, en el sentido de que cualquier persona debe ser capaz de interactuar con los elementos de interacción presentes en la página. • Ser inteligible, en el sentido de que cualquier persona debe ser capaz de entender el significado del contenido. • Ser robusta, en el sentido de que el contenido debe ser compatible con la mayor variedad de agentes de usuarios y tecnologías asistivas.ADESIS NETLIFE – noviembre 2012 Introducción a WAI-ARIA 7
  8. 8. WAI-ARIA RIA (Rich Internet Applications) Accesibilidad Problemas de accesibilidad: • Problemas de operabilidad (acceso). • Problemas de semántica en los elementos de interacción. • Zonas AJAX. Solución a los problemas de accesibilidad: WAI-ARIAADESIS NETLIFE – noviembre 2012 Introducción a WAI-ARIA 8
  9. 9. WAI-ARIA Soluciones a los problemas RIA Acceso mediante teclado • Se requiere un mecanismo que permita seleccionar todos los elementos de interacción de la interfaz mediante tecla de avance. • Definir las teclas que van a permitir operar con el elemento de interacción, una vez ha sido seleccionado. Un punto clave en accesibilidad web es que todas las interfaces deben ser operativas desde el tecladoADESIS NETLIFE – noviembre 2012 Introducción a WAI-ARIA 9
  10. 10. WAI-ARIA Soluciones a los problemas RIA Acceso mediante teclado Elementos HTML que pueden ser seleccionados: <a> <area> <button> <input> <select> <textarea>ADESIS NETLIFE – noviembre 2012 Introducción a WAI-ARIA 10
  11. 11. WAI-ARIA Soluciones a los problemas RIA Acceso mediante teclado Puede recibir foco Navegable por tabulador Sin tabindex Sólo los elementos por defecto Sólo los elementos por defecto (enlaces y elementos formulario). tabindex=”0” Si Si. En el orden en que los elementos aparecen codificados en el documento. tabindex=”-1” Si No. Hay que forzar el foco vía element.focus() al pulsar una flecha u otra tecla. Tabindex positivo Si El valor del tabindex especifica el orden de los (tabindex=”100”) elementos tabulables. Recibirán el foco antes que cualquier tabindex=”0”ADESIS NETLIFE – noviembre 2012 Introducción a WAI-ARIA 11
  12. 12. WAI-ARIA Soluciones a los problemas RIA Acceso mediante teclado <p tabindex="0">Penúltimo párrafo enfocable</p> <p tabindex="0">Último párrafo enfocable</p> <p tabindex="1">Primer párrafo enfocable</p> <p tabindex="2">Segundo párrafo enfocable</p> <p tabindex="-1">Párrafo enfocable por evento js</p>ADESIS NETLIFE – noviembre 2012 Introducción a WAI-ARIA 12
  13. 13. WAI-ARIA Soluciones a los problemas RIA Roles, propiedades y estados WAI-ARIA se basa en tres conceptos: • El rol que adquirirá el componente. • Las propiedades que el componente tiene. • El estado actual de dicho componente. Si puedes usar un elemento o atributo HTML nativo con la semántica y el comportamiento requerido ya integrado, ¡usalo!ADESIS NETLIFE – noviembre 2012 Introducción a WAI-ARIA 13
  14. 14. WAI-ARIAElemento Función (role) Nombre Valor Estado<a> Soluciones a los problemas y/o texto del enlace enlace title RIA atributo href<button> botón texto del botón o title Roles, propiedades y estados (semántica)<fieldset> grupo contenido del <legend><input> (button, botón atributo valuesubmit, reset)<input> (image) botón alt o title<input> (text) texto editable contenido del <label> asociado o title atributo value<input> (password) texto editable contenido del <label> asociado o title<input> (checkbox) check contenido del <label> asociado o title atributo checked<input> (radio) botón radio contenido del <label> asociado o title atributo checked<select> combo, lista o contenido del <label> asociado o title elemento <option> con lista desplegable atributo selected=selected<textarea> texto editable contenido del <label> asociado o title texto dentro del elemento ADESIS NETLIFE – noviembre 2012 Introducción a WAI-ARIA 14
  15. 15. WAI-ARIA Soluciones a los problemas RIA Roles, propiedades y estados Aceptación de condiciones <div role="slider" <span role="checkbox" aria-valuemin="0" aria-checked="true" aria-valuemax="100" aria-labelledby= "acep" aria-valuenow="42"> tabindex="0">ADESIS NETLIFE – noviembre 2012 Introducción a WAI-ARIA 15
  16. 16. WAI-ARIA Roles • Widgets: Pueden ser más o menos complejos: slider, barras de progreso, barras de scroll, menús desplegables, etc. • Estructura: Ayudan a organizar el contenido de una página: separadores, artículos, listas, imágenes, filas, encabezados de columnas, etc. • Landmarks: aportan mayor significado semántico a las principales secciones o zonas en las que se divide y organiza un documento. Categorización de rolesADESIS NETLIFE – noviembre 2012 Introducción a WAI-ARIA 16
  17. 17. WAI-ARIA Roles widget Algunos ejemplos: Listado de roles widgetRole Descripciónbutton Botón para generar acciones o evento.link Enlace a recurso interno o externo (hipervínculo).progressbar Barra de progreso de una tarea.slider Control deslizante.tablist Lista de elementos ‘tab’ que hacen referencia a los ‘tabpanel’.tab Elemento de una lista de pestañas con contenido asociado.tabpanel Contenedor asociado a un ‘tab’.tooltip Pop-up descriptivo de un elementoADESIS NETLIFE – noviembre 2012 Introducción a WAI-ARIA 17
  18. 18. WAI-ARIA Roles de estructura Algunos ejemplos: Listado de roles de estructuraRole Descripcióndocument Región que contiene información que se declara como contenido del documento.row Fila de celdas en un región de datos tabulares.rowheader Celda con información de cabecera para una fila.columnheader Celda con información de cabecera para una columna.list Grupo de elementos de lista no interactivos.listitem Elemento de una lista.heading Encabezado para una sección de la página.separator Separador entre secciones de contenido.ADESIS NETLIFE – noviembre 2012 Introducción a WAI-ARIA 18
  19. 19. WAI-ARIA Roles landmark Algunos ejemplos: Listado de roles landmarkRole Descripciónapplication Región considerada aplicación en contra de otras partes que son de tipo document.banner Región que incluye elementos como el logotipo o identidad del propietario del sitio, buscador, etc.complementary Sección del documento que complementa a una principal del mismo.contentinfo Región que contiene información como el copyright y enlaces a declaraciones de privacidad.main El contenido principal del documento.navigation Grupo de elementos para navegar por el documento o documentos relacionados.ADESIS NETLIFE – noviembre 2012 Introducción a WAI-ARIA 19
  20. 20. WAI-ARIA role="banner" role="main"role="navigation" role="complementary" role="contentinfo" ADESIS NETLIFE – noviembre 2012 Introducción a WAI-ARIA 20
  21. 21. WAI-ARIA Atributos • Widget: • Están orientados a componentes en los que el usuario ha de introducir una entrada de datos para procesarla. • Complementan a roles de la misma familia. • Relaciones y asociaciones: Indican relaciones o asociaciones entre elementos que no se pueden establecer mediante la estructura del documento. • Live region: • Marcan las regiones susceptibles de incorporar contenido dinámico actualizable. • Pueden ser aplicados a cualquier elemento. • Indican que se pueden producir cambios de contenido sin que el elemento o región tenga el foco. • Drag & drop: Proporcionan información sobre elementos "arrastrar y soltar“.ADESIS NETLIFE – noviembre 2012 Introducción a WAI-ARIA 21
  22. 22. WAI-ARIA Atributos widget aria-autocomplete aria-label aria-required aria-checked (estado) aria-level aria-selected (estado) aria-disabled (estado) aria-multiline aria-sort aria-expanded (estado) aria-multiselectable aria-valuemax aria-haspopup aria-orientation aria-valuemin aria-hidden (estado) aria-pressed (estado) aria-valuenow aria-invalid (estado) aria-readonly aria-valuetextADESIS NETLIFE – noviembre 2012 Introducción a WAI-ARIA 22
  23. 23. WAI-ARIA Atributos para relaciones y asociaciones aria-activedescendant aria-labelledby aria-controls aria-owns aria-describedby aria-posinset aria-flowto aria-setsize WAI-ARIA ha creado dos atributos muy parecidos al <label> de los formularios, pero aplicable a cualquier etiqueta de una página WebADESIS NETLIFE – noviembre 2012 Introducción a WAI-ARIA 23
  24. 24. WAI-ARIA Atributos para relaciones y asociaciones aria-labelledby Identifica el elemento (o elementos) que etiqueta el elemento actual. <li id="tab-1" role="tab" aria-controls="panel-1" aria-selected=“true" tabindex="0">Pestaña 1</li> <section id="panel-1" role="tabpanel" aria-labelledby="tab-1" aria-hidden="false">ADESIS NETLIFE – noviembre 2012 Introducción a WAI-ARIA 24
  25. 25. WAI-ARIA Atributos para relaciones y asociaciones aria-describedby Identifica el elemento (o elementos) que describe el objeto. El elemento o elementos que referencian a aria-describedby comprenden toda la descripción. <label for="password">Password: <input type="password" name="password" id="password" ariadescribedby="tp"></label> <p role="tooltip" id="tp">El password debe tener un mínimo de 8 caracteres</p>ADESIS NETLIFE – noviembre 2012 Introducción a WAI-ARIA 25
  26. 26. WAI-ARIA Atributos live region aria-atomic Para gestionar correctamente este tipo de contenido: aria-busy (estado) • Identificar las regiones dinámicas del documento. • Importancia del contenido. Conocer la prioridad con la aria-live que se deberá informar al usuario cuando se produzcan actualizaciones. aria-relevant • Especificar si es necesario volver a informar al usuario de todo el contenido que hay en la región dinámica o solo de los cambios que han tenido lugar.ADESIS NETLIFE – noviembre 2012 Introducción a WAI-ARIA 26
  27. 27. WAI-ARIA Atributos live region aria-live Indica que un elemento se actualizará y la prioridad de la actualización. Tiene tres valores: • off: valor por defecto. No habrá avisos al usuario de cambio de contenido de esa zona, a menos que se tenga el foco en ella en ese preciso momento. • polite: prioridad baja/normal. El cambio de contenido se hace en un segundo plano. De este modo el usuario recibirá el aviso del cambio de contenido una vez termine lo que esté haciendo. • assertive: alta prioridad. El cambio de contenido es anunciado tan pronto como sea posible. Usar en casos estrictamente necesarios.ADESIS NETLIFE – noviembre 2012 Introducción a WAI-ARIA 27
  28. 28. WAI-ARIA Atributos live region aria-busy Indica si un elemento se encuentran actualmente en proceso de actualización. Se puede forzar al lector a no leer los cambios de una zona dinámica hasta que ésta se cargue totalmente añadiendo la propiedad ariabusy="true" a dicha zona. aria-atomic Indica si la ayuda técnica anunciará toda la región o sólo la parte que se ha actualizado. • false: valor por defecto. Solo se anunciará la parte actualizada. • true: La ayudas técnica anunciará toda la región en su conjunto.ADESIS NETLIFE – noviembre 2012 Introducción a WAI-ARIA 28
  29. 29. WAI-ARIA Atributos drag & drop aria-dropeffect Indica qué funciones realiza el destino del objeto al “soltarse”: copy , move, link, execute, popup y none. Pueden ser varias a la vez. aria-grabbed (estado) Cuando el valor es true indica que el elemento se ha seleccionado. Cuando el valor es false, indica que el elemento puede ser arrastrado, pero no está seleccionado en ese preciso instante. Recomendaciones y buenas prácticas para usar los atributos Drag & DropADESIS NETLIFE – noviembre 2012 Introducción a WAI-ARIA 29
  30. 30. WAI-ARIA Usando ARIA en HTML Primera regla de uso Si puedes usar un elemento o atributo HTML nativo con la semántica y el comportamiento requerido ya integrado, ¡usalo! ¿Bajo qué circunstancias puede no ser esto posible? • Si las restricciones de diseño visual descartan el uso de un elemento nativo particular. • Si la función no está actualmente disponible en HTML. • Si la función está disponible en HTML pero no está implementada, o si lo está pero no el soporte de accesibilidad.ADESIS NETLIFE – noviembre 2012 Introducción a WAI-ARIA 30
  31. 31. WAI-ARIA Usando ARIA en HTML Segunda regla de uso No cambies la semántica nativa, a menos que realmente tengas que hacerlo. No hagas esto: <p role="button">text</p> Haz esto: <p><span role="button">text</span></p> O mejor, haz esto: <p><button>text</button></p>ADESIS NETLIFE – noviembre 2012 Introducción a WAI-ARIA 31
  32. 32. WAI-ARIA Usando ARIA en HTML ¿Qué sucede con la semántica nativa al añadir un rol? La adición de un rol ARIA redefine la semántica nativa del elemento. Por ejemplo: <p role="button">text</p> Se convertiría en: <button>text</button>ADESIS NETLIFE – noviembre 2012 Introducción a WAI-ARIA 32
  33. 33. WAI-ARIA Usando ARIA en HTML ¿Qué no sucede al añadir un rol? La adición de un rol ARIA no cambia los comportamientos, estados y propiedades. Por ejemplo: <button role="heading" aria-level="1">text</button> Se convertiría en: <h1>text</h1> Pero todavía se puede presionar, todavía está en el orden de tabulación predeterminado, todavía se ve como un botón y todavía provoca las acciones correspondientes cuando se presiona. Y por esto se trataría de un error de conformidad HTML5 convertir un botón en un encabezado.ADESIS NETLIFE – noviembre 2012 Introducción a WAI-ARIA 33
  34. 34. WAI-ARIA Hojas de estilo y atributos ARIA Es recomendable conectar a través de los selectores CSS los cambios de la interfaz de usuario según los estados de los atributos ARIA. Por ejemplo: [role="treeitem"][aria-selected="true"]{ color: white; background-color: #F00; } [role="treeitem"][aria-selected="false"]{ background-color: #0F0; } [aria-hidden=true]{display:none;} [aria-hidden=false]{display:block;}ADESIS NETLIFE – noviembre 2012 Introducción a WAI-ARIA 34
  35. 35. WAI-ARIA Referencias • WAI-ARIA 1.0 Recommendation http://www.w3.org/TR/wai-aria/ • WAI-ARIA 1.0 Primer http://www.w3.org/TR/wai-aria-primer/ • WAI-ARIA 1.0 Authoring Practices http://www.w3.org/WAI/PF/aria-practices/ • Using ARIA in HTML http://dvcs.w3.org/hg/aria-unofficial/raw-file/tip/index.html • Web Content Accessibility Guidelines (WCAG) 2.0 http://www.w3.org/TR/WCAG/ • The Paciello Group Blog http://www.paciellogroup.com/blog/category/wai-aria/ • Rich Internet Applications (RIA) y Accesibilidad Web http://www.upf.edu/hipertextnet/numero-9/ria-accesibilidad-web.htmlADESIS NETLIFE – noviembre 2012 Introducción a WAI-ARIA 35
  36. 36. WAI-ARIA Ejemplos • ICITA. Aria Examples http://test.cita.illinois.edu/aria/index.php • Open Ajax Accesibility Examples http://oaa-accessibility.org/examples/ • Mozilla Developer Network https://developer.mozilla.org/en/ARIA/ Gracias a Blai Filbà y Antonio Rodríguez por su colaboración y contribución a está presentaciónADESIS NETLIFE – noviembre 2012 Introducción a WAI-ARIA 36
  37. 37. Fin del documentoMUCHAS GRACIAS! :-) ADESIS Netlife Edificio América II - La Florida C/. Proción,7 Portal 3 Bajo 28023 MADRID Tel. (+34) 917 102 423 Fax. (+34) 913 729 783 adesis@adesis.com www.adesis.comADESIS NETLIFE – noviembre 2012 Introducción a WAI-ARIA 37

×