Successfully reported this slideshow.

Accesibilidad web

504 views

Published on

Presentación hoy en la Universidad de Extremadura (27/10
Slides of my presentation at University of Extremadura today (27/10/2010) about We accesibility.

Published in: Technology
  • Be the first to comment

Accesibilidad web

  1. 1. Marino Linaje - Universidad de Extremadura - Homeria Open Solutions S.L.
  2. 2.  Deficiencia: pérdida o anormalidad de una estructura o función psicológica, fisiológica o anatómica  Discapacidad: restricción o ausencia (causada por una deficiencia) de la capacidad de realizar una actividad normalmente  Diversidad Funcional Marino Linaje - Universidad de Extremadura - Homeria Open Solutions S.L.
  3. 3. 1. ¿Por qué preocuparnos por la Accesibilidad Web?  Vuestras 4 razones + importantes (resumida en una palabra cada una)  ¿por qué? 2. Principales tipos de Diversidad Funcional que afectan a la interacción con laWeb  Detectarlas y agruparlas (e.g., grupo D.F. visual: ceguera…)  Ej. de barreras en la Web (e.g., imágenes sin texto asociado…) ▪ Al menos 2 por grupo D.F. Marino Linaje - Universidad de Extremadura - Homeria Open Solutions S.L.
  4. 4. Marino Linaje - Universidad de Extremadura - Homeria Open Solutions S.L.
  5. 5. … aquella en la cual las tecnologías que facilitan la creación, distribución y manipulación de la información juegan un papel importante en las actividades sociales, culturales y económicas Marino Linaje - Universidad de Extremadura - Homeria Open Solutions S.L.
  6. 6. Marino Linaje - Universidad de Extremadura - Homeria Open Solutions S.L.
  7. 7. Section 508 EU Commision on eAccesibility JIS X 8341-3-2004 Disability DiscriminationAct (1995) State of Kansas WebAccessibility Requirements Implementation GuidanceVersion 2.0 (Agosto, 10) WCAG,WAI- ARIA (W3C) Ley de Igualdad de oportunidades y no discriminación de las personas con discapacidad Ley contratos sector público (2007) Ley acceso electrónico a servicios públicos +Personas mayores Marino Linaje - Universidad de Extremadura - Homeria Open Solutions S.L.
  8. 8. Origen: EuroStat Year +65 años 2010 17% 2020 20% 2030 25% 2040 31% 2050 36% Situación en España (más pronunciada en e.g., Japón) De las personas en edad de trabajar 1 de cada 6! tiene un trastorno de salud o discapacidad no temporal. Entre los 25 paises del estudio, cerca de 45 millones de personas (EuroStat 2002) Situación en EU Marino Linaje - Universidad de Extremadura - Homeria Open Solutions S.L.
  9. 9. (Que afectan a la interacción con laWeb) Marino Linaje - Universidad de Extremadura - Homeria Open Solutions S.L.
  10. 10. DF visual ceguera visión parcial daltonismo DF auditiva sordera sordera parcial DF física DF motora DF del habla trastornos múltiples del habla DF cognitivas y neurológicas dislexia y disgrafía trastorno por déficit de atención trastorno intelectual deterioro de la memoria trastorno de salud mental trastornos convulsivos DF múltiple Relacionadas con el envejecimiento Marino Linaje - Universidad de Extremadura - Homeria Open Solutions S.L.
  11. 11. Hagamos el esfuerzo durante la presentación Marino Linaje - Universidad de Extremadura - Homeria Open Solutions S.L.
  12. 12. Marino Linaje - Universidad de Extremadura - Homeria Open Solutions S.L.
  13. 13.  Daltonismo  A la izquierda filtro “protanopia” (verde- rojo)  A la derecha filtro “tritanopia” (azul- amarillo) www.michelf.com/img/icon/sim-daltonism-512.jpg. Marino Linaje - Universidad de Extremadura - Homeria Open Solutions S.L.
  14. 14. Glaucoma Cataratas http://www.stlukeseye.com/ , http://www.lowvisionclub.com/ Marino Linaje - Universidad de Extremadura - Homeria Open Solutions S.L.
  15. 15. Degeneración macular Retinopatía diabética http://www.stlukeseye.com/Conditions/MacularDegeneration.asp , http://www.stlukeseye.com/Conditions/DiabeticRetinopathy.asp Marino Linaje - Universidad de Extremadura - Homeria Open Solutions S.L.
  16. 16.  imagenes  sin texto alternativo  imágenes complejas (e.g., gráficas de barras) no descritas de otro modo  video  no descrito en texto o en audio  tablas  sin sentido cuando se leen línea a línea (e.g., para maquetar)  frames  carecen de alternativa "NOFRAME"  tienen nombres no útiles para su identificación  formularios  que no pueden recorrerse lógicamente con el teclado  campos no etiquetados o mal etiquetados  usar colores como única marca de texto enfatizado  mal contraste entre fondo y texto (e.g., en moviles)  documentos no estándar que dificultan la lectura  herramientas de autor  que no permiten el uso de teclado para todas sus acciones  que no usan la API del S.O. Marino Linaje - Universidad de Extremadura - Homeria Open Solutions S.L.
  17. 17. Marino Linaje - Universidad de Extremadura - Homeria Open Solutions S.L.
  18. 18.  Falta de subtítulos o transcripciones de audio  Webcasts, podcasts,…  Transcribir un podcast de 20 min = 4,5€!!  Falta de imagenes relacionadas con el texto en páginas llenas de contenido textual  Puede reducir la comprensión en personas cuyo lenguaje principal puede ser el de signos  Lenguaje excesivamente complejo cuando no es idispensable  Estímulos auditivos sin alternativas Marino Linaje - Universidad de Extremadura - Homeria Open Solutions S.L.
  19. 19. Marino Linaje - Universidad de Extremadura - Homeria Open Solutions S.L.
  20. 20.  Páginas con tiempo límite de respuesta  Cuestionarios online en, e-learning,…  Comunicación por chat,… ▪ todo lo que requiera interacción en “tiempo real” en personas sin trastornos  Formularios que no se navegan en un orden lógico  Falta de navegación por teclado (tab, etc.)  Excesivos “clicks” de ratón (3 max)  Navegadores y herramientas de autor:  que no soportan alternativas de teclado al uso del ratón Marino Linaje - Universidad de Extremadura - Homeria Open Solutions S.L.
  21. 21. Marino Linaje - Universidad de Extremadura - Homeria Open Solutions S.L.
  22. 22.  asistente virtual que asiste por chat de voz  charlas y presentaciones online que solo pemiten la interacción por medio de voz  videochat no acompañado de entrada de texto alternativo  e.g., chat textual  en algunas ocasiones puede ser insuficiente (e.g., multiples diversidades funcionales) Marino Linaje - Universidad de Extremadura - Homeria Open Solutions S.L.
  23. 23. Marino Linaje - Universidad de Extremadura - Homeria Open Solutions S.L.
  24. 24.  Dislexia y disgrafía  Textos largos y excesivamente complejos sin necesidad  Falta de gráficos que ayuden a la comprensión del texto  Soporte incompleto a la multimodalidad  Trastorno por déficit de atención  Elementos que distraen (animaciones, sonido…) que no se pueden apagar  Falta de claridad en la organización de un sitioWeb  Diversidad Funcional intelectual  Textos largos y excesivamente complejos sin necesidad  Falta de gráficos que ayuden a la comprensión del texto  Falta de claridad en la organización de un sitioWeb  Deterioro de la memoria  Falta de claridad en la organización de un sitioWeb  Trastornos de salud mental  Elementos que distraen (animaciones, sonido…) que no se pueden apagar  Web pages with absolute font sizes that do not enlarge easily  Trastornos convulsivos  Uso de frecuencias visuales y auditivas que pueden disparar las convulsiones Marino Linaje - Universidad de Extremadura - Homeria Open Solutions S.L.
  25. 25. Marino Linaje - Universidad de Extremadura - Homeria Open Solutions S.L.
  26. 26. Marino Linaje - Universidad de Extremadura - Homeria Open Solutions S.L.  Impacto:  Decremento en la habilidad para fijar objetivo en tareas cercanas  Cambios en la percepción y sensibilidad al color y al contraste  Frecuencia:  16% en personas 65 - 74 years  19% en personas 75 – 84 years  46% en personas 85+ years Developed with material fromW3C Web Accessibility Initiative (WAI) www.w3.org/WAI/ Traducción: Marino Linaje
  27. 27. Marino Linaje - Universidad de Extremadura - Homeria Open Solutions S.L.  Impacto:  El audio puede ser difícil de discernir  Los tonos más altos se pueden perder  Frecuencia:  47% en personas 61 - 80 años  93% en persona 81+ años Developed with material fromW3C Web Accessibility Initiative (WAI) www.w3.org/WAI/ Traducción: Marino Linaje
  28. 28.  Impacto:  Dificultad en el uso del ratón y teclado ▪ Difficultad para interactuar con elementos pequeños.  Tensión ante tareas “no ergonómicas”  Frecuencia: (más habituales)  Artritis ▪ + 50% en personas + 65 años  Temblores ▪ Hasta 20% en people + 65 años  Parkinson ▪ 4% en personas + 85 años Marino Linaje - Universidad de Extremadura - Homeria Open Solutions S.L. Developed with material fromW3C Web Accessibility Initiative (WAI) www.w3.org/WAI/ Traducción: Marino Linaje
  29. 29.  Impacto: La navegación, comprensión y completado de tareas se ve afectada por:  Problemas de memoria a corto plazo  Dificultad de concentración  Dificultad tratando con grandes volúmenes de información  Frecuencia: (más habituales)  Demencia: ▪ 1.4% en personas 65 - 69 años ▪ 24% of people 85+ yrs  Deterioro cognitivo leve: ▪ 20% en personas + 70 años Marino Linaje - Universidad de Extremadura - Homeria Open Solutions S.L. Developed with material fromW3C Web Accessibility Initiative (WAI) www.w3.org/WAI/ Traducción: Marino Linaje
  30. 30.  Chats y otros sistemas sin alternativa modal  TODO EN MAYÚSCULAS o en cursiva,… (para indicar emociones)  … pero lo + importante es… Marino Linaje - Universidad de Extremadura - Homeria Open Solutions S.L.
  31. 31. BARRERAS =ACCESS4All Marino Linaje - Universidad de Extremadura - Homeria Open Solutions S.L.
  32. 32.  Multi-modalidad  Móviles (pantallas pequeñas, contextos de mucha luz…), Web-TV, kioskos, navegadores GPS,…  texto/audio/video redudante puede proporcionar:  Diferentes estilos de aprendizaje; acceso a la información a través de otros idiomas distinto del original  Las hojas de estilo pueden proporcionar:  Adecuación del contenido a pantallas de diferentes tamaños (móviles),....  Subtítulos a todo el audio/audio+video:  Mejora la indexación de contenidos (pagerank,…)  Al usuario le facilita la búsqueda de contenido Marino Linaje - Universidad de Extremadura - Homeria Open Solutions S.L.
  33. 33. Miércoles Jueves Viernes Sábado Despejado Lluvia Lluvia Muxo Caló  Imaginemos que es una página de previsión meteorológica  ¿Qué tiempo hará el jueves? Miércoles Jueves Viernes Sábado <img src=“rain.jpg” alt=“Lluvia”/> Marino Linaje - Universidad de Extremadura - Homeria Open Solutions S.L.
  34. 34. (Algunos ejemplos) Marino Linaje - Universidad de Extremadura - Homeria Open Solutions S.L.
  35. 35.  ZoomText  http://www.youtube.com/watch?v=_YpNrOkW0Mw  Lectores de pantalla  http://www.youtube.com/watch?v=noPhYemsp7c  EjemploApoyo a D.F. motriz  http://www.youtube.com/watch?v=kGt9yzWacuw Marino Linaje - Universidad de Extremadura - Homeria Open Solutions S.L.
  36. 36.  El Software de Apoyo no está limitado a productos  También puede ser un servicio!!!  Y para todos!!! Marino Linaje - Universidad de Extremadura - Homeria Open Solutions S.L.
  37. 37. (Como técnicos, responsables de planificación de proyectosWeb,…) Marino Linaje - Universidad de Extremadura - Homeria Open Solutions S.L.
  38. 38. Tres pilares fundamentales: 1. Claridad de contenido  ‘muy importante’ 88% 2. Buena navigación  ‘muy importante’ 65% 3. Enlaces claros y autoexplicativos  ‘muy importante’ 63% http://www.out-law.com/default.aspx?page=6314 (208 usuarios de internet con alguna discapacidad en UK) Marino Linaje - Universidad de Extremadura - Homeria Open Solutions S.L.
  39. 39.  En los desarrollos:  Seguir estándares (siempre que se pueda)  Separar contentido, presentación y comportamiento  Utilizar markup semántico (Cabeceras, listas..)  Los lectores de pantalla saben interpretarlos!  Auditorías: 1. Fallos típicos en las auditorías (si la hay) 2. Uso de herramientas automatizadas 3. Revisión manual Marino Linaje - Universidad de Extremadura - Homeria Open Solutions S.L.
  40. 40.  suelen ser planificadas sobre el terreno  i3 (informales, incompletos e inexactos)  Técnicas habituales:  Al website se le pasan una serie de test automatizados ▪ Se pueden pasar por alto errores graves (websites modernos)  Lista de requisitos técnicos, se prueba [i3] elWebsite con software de apoyo mediente test a medida ▪ No repetibles (son a medida y no planificados) ▪ A veces se repite la misma comprobación de manera innecesaria Marino Linaje - Universidad de Extremadura - Homeria Open Solutions S.L.
  41. 41.  Herramientas de escritorio  web  parsean el marcado del documento para chequear problemas potenciales de accesibilidad  Las más avanzadas:  usan “spiders” para recorrer todo el website desde la página  permiten automatizar la repetición de tests y sus reportes Marino Linaje - Universidad de Extremadura - Homeria Open Solutions S.L.
  42. 42. VENTAJAS  Gran volumen de páginas en un corto periodo de tiempo  Reportes automáticos  Amplio nº de tareas repetitivas y sistemáticas que realizan correctamente  Las más avanzadas:  Incluir o excluir guías específicas de accesibilidad DESVENTAJAS  Elementos que deberían pasar el test y fallan, e.g.:  <label> no dispobile para un <input> tipo ‘hidden’  La mayoría usan “spiders” que tienden a fallar en:  Autenticación  Flujo guiado por formularios  Páginas que usan JavaScript para renderizar el contenido. Marino Linaje - Universidad de Extremadura - Homeria Open Solutions S.L.
  43. 43. • WebAccessibilityToolbar • WAVE (Tb. Como Extension Firefox) • Deque WorldSpace • Functional Accessibility Evaluator (FAE) • HiSoftware Cynthia Says • TotalValidator • Paciello GroupWAT • Web Accessibility Inspector • Hera-XP • W3CValidator • TAW… Marino Linaje - Universidad de Extremadura - Homeria Open Solutions S.L.
  44. 44.  No pueden chequear todos los requisitos funcionales de leyes o estándares (e.g., Secc. 508 o WCAG 2.0 ) Marino Linaje - Universidad de Extremadura - Homeria Open Solutions S.L.
  45. 45.  Puede ser más inteligente (o no  )  Un error se propaga rápidamente Localizado se arregla en un solo lugar Marino Linaje - Universidad de Extremadura - Homeria Open Solutions S.L.
  46. 46. VENTAJAS  Localizar errores no automatizables [hoy día]  Encontrar errores  recomendar soluciones  Configurar Soft/Hard  Usar Software de apoyo en simulaciones de color, zoom,… DESVENTAJAS  Depende de la expertise  Costoso en recursos  Especialmente tiempo  A veces se revisan innecesariamente cosas ya revisadas de manera automática  A veces involuntariamente Marino Linaje - Universidad de Extremadura - Homeria Open Solutions S.L.
  47. 47.  Fundacionctic  representanteW3C en España  certificación está basada en la norma UNE 139803:2004 desarrollada en colaboración con el European Software Institute y AENOR ▪ tiene por referencia las especificaciones delW3CWCAG 1.0 Marino Linaje - Universidad de Extremadura - Homeria Open Solutions S.L.
  48. 48. Marino Linaje - Universidad de Extremadura - Homeria Open Solutions S.L.
  49. 49. Marino Linaje - Universidad de Extremadura - Homeria Open Solutions S.L.
  50. 50. Determinar ámbito de evaluación y objetivo a cubrir • (e.g., Sección 508,…) • Seleccionar páginas representativas (+ visitadas, variedad en layout y funcionalidad) • Si dinámicas: evaluar plantillas y contenido por separado y después en representativas • Identificar and preparar la evaluación automática y semi-automatica del website entero (o sección) Usar herramientas de accesibilidad Web • Validar marcado (sintáxis y estilo) usando todos los validadores aplicables sobre representativas • Usar al menos dos herramientas de accesibilidadWeb sobre representativas y al menos una sobre el website entero Evaluar manualmente páginas representativas • Aplicar la lista de revisión al conjunto de páginas representativas Marino Linaje - Universidad de Extremadura - Homeria Open Solutions S.L.
  51. 51. Examinar páginas usando navegador gráfico • Examinar representativo con navegador gráfico: seleccionar al menos 3 configuraciones diferentes: diferentes navegadores, versiones y plataformas y hacer los siguientes ajustes Examinar las páginas con navegadores específicos • Examinar representativo con un navegador de texto y otro de voz y comprobar: • Contenido y funcionalidad equivalentes y presentadas en un orden correcto Leer y evaluar el contenido de las páginas • Sobre el grupo representativo examinar: ¿es el texto claro y simple para el proposito del website? Marino Linaje - Universidad de Extremadura - Homeria Open Solutions S.L.
  52. 52.  Resumir y documentar lo encontrado  Resumir cualquier problema y buenas prácticas identificada para cada tipo de página y URL, así como el método por el que fueron identificados Recomendar pasos a seguir, e.g.,: ▪ Reparar las barreras de accesibilidad ▪ Explotar los aspectos positivos del sitio  Mantenimiento y monitorización  Incluir usuarios en la evaluación del website Marino Linaje - Universidad de Extremadura - Homeria Open Solutions S.L.
  53. 53. Marino Linaje - Universidad de Extremadura - Homeria Open Solutions S.L.
  54. 54. http://www.nics.gov.uk/acc/developers/intro/accessibilityprimer_4.html Marino Linaje - Universidad de Extremadura - Homeria Open Solutions S.L.
  55. 55. PERCEPTIBLE Alternativa textual a contenido no textual Subtítulos y alternativas para audio/video Contenido adaptable y disponible para prod. apoyo Suficiente contraste para hacer contenido fácil de ver y oir ROBUSTO Maximizar la compatibilidad con navegadores y ayudas técnicas OPERABLE Accesible por teclado Evitar tareas con tiempo límite Evitar causar convulsiones Ayudar a navegar y localizar contenido COMPRENSIBLE Textos legibles y comprensibles Apareción y funcionamiento previsible Ayudar usuarios a corregir y eliminar fallos Marino Linaje - Universidad de Extremadura - Homeria Open Solutions S.L.
  56. 56. WCAG 1.0  2.2 Ensure that foreground and background color combinations provide sufficient contrast when viewed by someone having color deficits…  Más clara para tecnologías relacionadas con HTML en muchos aspectos WCAG 2.0  1.4.3The visual presentation of text and images of text has a contrast ratio of at least 4.5:1…  Aplicable a muchas tecnologías - actuales, futuras, no-W3C Marino Linaje - Universidad de Extremadura - Homeria Open Solutions S.L.
  57. 57. Concepto Web 1.0 Web 2.0 Quiénes publican Los productores de los sitios productores y usuarios Información Centralizada Dispersa en miles de sitios Publicidad Sólo grandes presupuestos Cualquier persona Dueño de la inform. El sitio web Los usuarios Tecnología HTML 4.0 XHTML y CSS Disponibilidad Al final de cada proyecto Beta perpetuo Posibilidad de usar Ninguna Sitios con APIs servicios de otros Marino Linaje - Universidad de Extremadura - Homeria Open Solutions S.L.
  58. 58. Marino Linaje - Universidad de Extremadura - Homeria Open Solutions S.L.
  59. 59.  WCAG 2 difícil de comprender y evaluar  No sirve para las RIA  Evaluación limitada a “capturas” estáticas de la página  Webapp corre en cliente y servidor  No testea la estructura/comportamiento de los nuevos componentes ricos  No es sencillo auditar la accesibilidad de un código JS (ofuscaciones y minificaciones…)  No se están realizando evaluaciones a lo largo del ciclo de desarrollo! Marino Linaje - Universidad de Extremadura - Homeria Open Solutions S.L.
  60. 60.  Estructuras más semánticas para las zonas funcionales (role)  Mejora de la navegación mediante el teclado (tabindex )  Controles complejos más accesibles (rol, state, aria-valuenow…)  Identificar contenido actualizado de forma dinámica (aria-live). $(document).ready(function() { $('#logo').attr('role', 'banner'); $('#nav').attr('role', 'navigation'); $('#searchform').attr('role', 'search'); $('#main').attr('role', 'content'); $('#footer').attr('role', 'contentinfo'); $('.required').attr('aria-required', 'true'); }); Marino Linaje - Universidad de Extremadura - Homeria Open Solutions S.L.
  61. 61.  Principal problemática de JS:  algunos navegadores [especiales] no tienen soporte para JS o bien está deshabilitado (seguridad,…) ▪ No es cierto que todos los usuarios discapacitados lo tengan deshabilitado, las últimas estadísticas hablan de 75% activo  Desarrollos que proporcionan funcionalidad en JS no disponible de otro modo  Este motivo origina que cierta páginas Web no sean accesibles por todos los navegadores Marino Linaje - Universidad de Extremadura - Homeria Open Solutions S.L.
  62. 62.  No incluir JS directamente en el documento.  Entender JS como mejora, no como necesidad.  asegurar que la página funciona sin JS activado  Revisar la disponibilidad de un objeto antes de acceder a él. Marino Linaje - Universidad de Extremadura - Homeria Open Solutions S.L.
  63. 63. EN HTML 4 EN HTML5 Datalist Input type="number" Marino Linaje - Universidad de Extremadura - Homeria Open Solutions S.L.
  64. 64. Marino LinajeTrigueros mlinaje@unex.es Marino Linaje - Universidad de Extremadura - Homeria Open Solutions S.L.

×