Presentación de Pedro Monerris

2,087 views
2,008 views

Published on

Published in: Education, Technology, Design
0 Comments
8 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,087
On SlideShare
0
From Embeds
0
Number of Embeds
466
Actions
Shares
0
Downloads
0
Comments
0
Likes
8
Embeds 0
No embeds

No notes for slide

Presentación de Pedro Monerris

  1. 1. Introducción y consejos de Accesibilidad Web Pedro Vicente Monerris Cabrera www.nitsnets.com
  2. 2. Introducción y consejos de Accesibilidad Web INDICE -¿Qué es Accesibilidad y Accesibilidad Web? -Normativas. -¿Quién se beneficia? -¿Cómo navegan? -Pautas. -Validación. -Consejos. Pedro V. Monerris
  3. 3. Introducción y consejos de Accesibilidad Web ¿Qué es “Accesibilidad”? La accesibilidad es el grado en el que todas las personas pueden utilizar un objeto, visitar un lugar o acceder a un servicio, independientemente de sus capacidades técnicas, cognitivas o físicas. ¿ENTONCES “ACCESIBILIDAD WEB”? + Pedro V. Monerris
  4. 4. Introducción y consejos de Accesibilidad Web Accesibilidad Web Accesibilidad+web es igual a la posibilidad de un sitio web pueda ser visitado y utilizado por el mayor número de personas independientemente de las limitaciones personales o del mismo entorno. Pedro V. Monerris
  5. 5. Introducción y consejos de Accesibilidad Web ¿Es obligada la Accesibilidad Web? Actualmente se encuentra regulada por el Real decreto 1494/2007 “Reglamento sobre las condiciones básicas para el acceso de las personas con discapacidad a las tecnologías, productos y servicios relacionados con la sociedad de la información y medios de comunicación social”. Las páginas de internet de las administraciones públicas deberán ser accesibles para personas mayores y con discapacidad, cumpliendo las prioridades 1 y 2 de la norma UNE 139803:2004 Pedro V. Monerris
  6. 6. Introducción y consejos de Accesibilidad Web Accesibilidad Web También lo regula la LMISI Medidas de Impulso de la Sociedad de la Información, en la cual nos dice que no sólo la administración pública esta sujeta a cumplir las prioridades 1 y 2 sino las de “especial trascendencia económica”. Empresas que agrupen a más de cien trabajadores o su volumen anual de operaciones exceda de 6.010.121,04 euros y que operen en: ● Servicios de comunicaciones electrónicas a consumidores. ● Servicios financieros destinados a consumidores. ● Servicios de suministro de agua a consumidores. ● ... Servicios... Pedro V. Monerris
  7. 7. Introducción y consejos de Accesibilidad Web Accesibilidad Web es para ciegos, ¿No? NO!!!!!!! Pedro V. Monerris
  8. 8. Introducción y consejos de Accesibilidad Web ¿Quién se beneficia? Si cumplimos con la accesibilidad, nuestra web la podrán visitar: Personas con discapacidades visuales: ● Ceguera ● Baja Visión ● Daltonismo Pedro V. Monerris
  9. 9. Introducción y consejos de Accesibilidad Web ¿Quién se beneficia? Personas con discapacidades auditivas: ● Sordera ● Hipoacusia (sordera parcial -ligera o moderada-) Pedro V. Monerris
  10. 10. Introducción y consejos de Accesibilidad Web ¿Quién se beneficia? Personas con discapacidades motrices: ● Distrofia muscular (debilidad músculo-esquelético) ● Distonía muscular (contracciones involutariar) ● Parkinson Pedro V. Monerris
  11. 11. Introducción y consejos de Accesibilidad Web ¿Quién se beneficia? Personas con discapacidades neurológicas y cognitivas Discapacidades relacionadas con el envejecimiento (suelen ser una mezcla de todas las anteriores) Limitaciones derivadas del entorno. ¿Entorno? Navegadores antiguos, conexiones lentas, pantallas pequeñas, ausencia del ratón... Pedro V. Monerris
  12. 12. Introducción y consejos de Accesibilidad Web ¿Quién se beneficia? Y Google Pedro V. Monerris
  13. 13. Introducción y consejos de Accesibilidad Web Y ¿Cómo navegan? Lectores de pantalla Pedro V. Monerris
  14. 14. Introducción y consejos de Accesibilidad Web Y ¿Cómo navegan? Navegadores de texto http://www.yellowpipe.com/yis/tools/lynx/lynx_viewer.php Pedro V. Monerris
  15. 15. Introducción y consejos de Accesibilidad Web Y ¿Cómo navegan? Ampliadores Pedro V. Monerris
  16. 16. Introducción y consejos de Accesibilidad Web Y ¿Cómo navegan? Teclados y artilugios de ayuda Pedro V. Monerris
  17. 17. Introducción y consejos de Accesibilidad Web Y ¿Cómo navegan? A continuación un video de estudiante de informática ciego de nacimiento que nos enseña un par de lectores de pantalla. http://www.youtube.com/watch?v=noPhYemsp7c Maximiliano Vazquez http://mgvazquez.blogspot.com/ Antonio Sacco http://www.antoniosacco.net Pedro V. Monerris
  18. 18. Introducción y consejos de Accesibilidad Web Las pautas a cumplir Las Pautas de Accesibilidad para Agentes de Usuario UAAG 1.0 que estudia lo referente a las aplicaciones software que se emplean para acceder al contenido de la Web. Las Pautas de Accesibilidad para Herramientas de Autor 1.0 ATAG 1.0 que estudia las aplicaciones usadas por los desarrolladores para la creación de páginas Web. Editores HTML, WYSIWYG, CMS, Blogs... para que estos produzcan contenido accesible y que puedan ser usados por personas que necesiten de la accesibilidad. Pedro V. Monerris
  19. 19. Introducción y consejos de Accesibilidad Web Las pautas a cumplir La que abordaremos hoy: Las Pautas de Accesibilidad para el Contenido Web WCAG 2.0 Relativo a la accesibilidad del contenido de los sitios web (formularios, aplicaciones, multimedia...) permitan interactuar con la web Pedro V. Monerris
  20. 20. Introducción y consejos de Accesibilidad Web WCAG 2.0. Principio 1 PERCEPTIBLE La información y la interfaz de usuario tienen que ser presentados de forma que los puedan percibir. Pauta 1.1 Alternativas textuales El objetivo es proporcionar un contenido equivalente y accesible en el caso de que no se pueda mostrar el contenido no textual. Pedro V. Monerris
  21. 21. Introducción y consejos de Accesibilidad Web WCAG 2.0. Principio 1 PERCEPTIBLE Pauta 1.1 Alternativas textuales. Imágenes. Descripción corta suficiente: Utilizaremos el atributo alt=”” de <img> para representar lo que intentamos transmitir. En el caso de que no queramos que transmita información o sea meramente decorativa poner el alt=” ”. Aunque lo mejor es usar CSS para posicionar dichas imágenes. Pedro V. Monerris
  22. 22. Introducción y consejos de Accesibilidad Web WCAG 2.0. Principio 1 PERCEPTIBLE Pauta 1.1 Alternativas textuales. Imágenes. Descripción corta suficiente: Utilizaremos el atributo alt=”” de <img> para representar lo que intentamos transmitir. En el caso de que no queramos que transmita información o sea meramente decorativa poner el alt=” ”. Aunque lo mejor es usar CSS para posicionar dichas imágenes. Pedro V. Monerris
  23. 23. Introducción y consejos de Accesibilidad Web WCAG 2.0. Principio 1 PERCEPTIBLE Pauta 1.1 Alternativas textuales. Imágenes+enlaces. No repetir información, es decir completar uno con lo otro. Pedro V. Monerris
  24. 24. Introducción y consejos de Accesibilidad Web WCAG 2.0. Principio 1 PERCEPTIBLE Pauta 1.1 Alternativas textuales. Descripciones largas. Podemos utilizar en el atributo longdesc=”” y en el podemos incluir la url de dicha descripción, en el caso que veamos que sea necesaria. Pedro V. Monerris
  25. 25. Introducción y consejos de Accesibilidad Web WCAG 2.0. Principio 1 PERCEPTIBLE Pauta 1.1 Alternativas textuales. Otros. Utilizar la etiqueta <label> en los formularios o incluir los atributos title en los input de los formularios. Colocar correctamente el <label>: Antes -> text, file, password, textarea y select. Después -> checkbox y radio. Pedro V. Monerris
  26. 26. Introducción y consejos de Accesibilidad Web WCAG 2.0. Principio 1 PERCEPTIBLE Pauta 1.2 Subtítulos y alternativas Son los elementos que muestran su contenido según una línea temporal (animaciones, canciones, películas) habrá que realizar para estos transcripciones textuales, subtitulado o lenguaje de signos. Pedro V. Monerris
  27. 27. Introducción y consejos de Accesibilidad Web WCAG 2.0. Principio 1 PERCEPTIBLE Pauta 1.3 Adaptable y disponible a los productos de apoyo. Nuestro contenido debe ser independiente de la forma de presentación, es decir independiente del software (presentar contenido sin hojas de estilo). Esto lo conseguimos respetando una estructura lógica, y proporcionar información de características sensoriales (colores, enfásis...) Pedro V. Monerris
  28. 28. Introducción y consejos de Accesibilidad Web WCAG 2.0. Principio 1 PERCEPTIBLE Pauta 1.3 Adaptable y disponible a los productos de apoyo. Usar correctamente las etiquetas <h1>...<h6> Para las listas usar los <ol>, <ul>, <dl> Usar tablas solo para representar datos! Pedro V. Monerris
  29. 29. Introducción y consejos de Accesibilidad Web WCAG 2.0. Principio 1 PERCEPTIBLE Pauta 1.3 Adaptable. Tablas. <th> para los encabezados de las tablas. scope=”” para relacionar las filas y las columnas de datos. Con los <caption> y el atributo summary no representar la misma información, el caption sería el título y el summary es una breve descripción de la organización de los datos y lo que representan. Pedro V. Monerris
  30. 30. Introducción y consejos de Accesibilidad Web WCAG 2.0. Principio 1 PERCEPTIBLE Pauta 1.3 Adaptable. Tablas. Ejemplo. <table> <caption>Estudiantes de informática</caption> <tr> <th scope=”col”>A&ntilde;o</th> <th scope=”col”>ITIG & ITIS</th> <th scope=”col”>II</th> </tr> <tr> <td scope=”row”>2003</td> <td>10000</td> <td>9000</td> </tr> .... Pedro V. Monerris
  31. 31. Introducción y consejos de Accesibilidad Web WCAG 2.0. Principio 1 PERCEPTIBLE Pauta 1.4 Distinguible Uso adecuado del color entre la información de primer plano y la del fondo, esto se aplica también al sonido. Pedro V. Monerris
  32. 32. Introducción y consejos de Accesibilidad Web WCAG 2.0. Principio 1 PERCEPTIBLE Pauta 1.4 Distinguible. Contraste suficiente. Contrast Analyser http://www.paciellogroup.com/resources/contrast-analyser.html Pedro V. Monerris
  33. 33. Introducción y consejos de Accesibilidad Web WCAG 2.0. Principio 1 PERCEPTIBLE Pauta 1.4 Distinguible. Texto y fuentes. Tener especial cuidado con la modificación de los tamaños de la fuente utilizada, para que no rompa o descuadre la web. A poder ser evitar los textos justificados. Ya que a las personas con problemas cognitivos les cuesta mantener la lectura. Pedro V. Monerris
  34. 34. Introducción y consejos de Accesibilidad Web WCAG 2.0. Principio 2 OPERABLE La información y la interfaz de usuario tienen que ser presentados de forma que los puedan percibir. Pauta 2.1 Accesible mediante teclado Toda la funcionalidad debe ser accesible desde teclado. Si nuestra web es accesible desde teclado podrá ser utilizada por los productos de apoyo. Pedro V. Monerris
  35. 35. Introducción y consejos de Accesibilidad Web WCAG 2.0. Principio 2 OPERABLE Pauta 2.1 Accesible mediante teclado Evitar trampas para el foco del teclado, esto va sobretodo para los flash's. Habrá que poner algún listener en el teclado (sin tener que utilizar el ratón) para poder salir de la trampa. Otro ejemplo de trampa es cuando realizamos un evento con algún checkbox y se nos abren más opciones en este momento se suele perder el focus. Mediante el javascript que lanza el evento de mostrar las nuevas opciones podemos también indicarle donde posicionar el focus. Pedro V. Monerris
  36. 36. Introducción y consejos de Accesibilidad Web WCAG 2.0. Principio 2 OPERABLE Pauta 2.2 Tiempo suficiente Algunas personas necesitan más tiempo que la mayoría de los usuarios para completar tareas. Lo mejor sería no tener tiempo. Pero en el caso que tenga debería existir algún botón para pausar, reanudar o ajustar. Existen algunas excepciones como pueden ser las actuales pujas por ejemplo de los productos de e-Bay en ese caso ampliar el tiempo sería beneficiar a un rango de usuarios. Pedro V. Monerris
  37. 37. Introducción y consejos de Accesibilidad Web WCAG 2.0. Principio 2 OPERABLE Pauta 2.3 Efectos dañinos. Evitar contenido que se sepa que podría causar ataques, espasmos o convulsiones (epilepsia). Cumplir la regla de los tres destellos o menos en nuestra web. En el caso que sea inevitable que tenga destellos dejar el área lo más pequeña posible (25% de un campo de visión de 10º a una distancia normal de visionado). Pedro V. Monerris
  38. 38. Introducción y consejos de Accesibilidad Web WCAG 2.0. Principio 2 OPERABLE Pauta 2.4 Navegable Ayudar en la medida de lo posible a encontrar lo que necesiten a los usuarios. Pedro V. Monerris
  39. 39. Introducción y consejos de Accesibilidad Web WCAG 2.0. Principio 2 OPERABLE Pauta 2.4 Navegable. Títulos, migas de pan y sitemap. Utilizar un <title> descriptivo sin ser muy largo. Ayudar al usuario a saber en que ubicación se encuentra, esto lo podemos conseguir con el uso de migas de pan. También ayudaremos teniendo un sitemap con la organización del sitio. Pedro V. Monerris
  40. 40. Introducción y consejos de Accesibilidad Web WCAG 2.0. Principio 2 OPERABLE Pauta 2.4 Navegable. Otros consejos. Utilizar enlaces para saltar los bloques repetitivos de la web (menú o cabeceras) estos pueden ser sólo visibles cuando tengan el foco. Intentar que el orden del foco tenga sentido, siguiendo la misma estructura de la web. Pedro V. Monerris
  41. 41. Introducción y consejos de Accesibilidad Web WCAG 2.0. Principio 3 COMPRENSIBLE La información y la interfaz de usuario deben ser comprensibles. Pauta 3.1 Legible y comprensible. Hacer nuestro contenido comprensible tanto para los usuarios como para sus productos de apoyo. Por ejemplo especificando el idioma de nuestra web, los lectores de pantalla tienen diferentes pronuncaciones según el idioma. Pedro V. Monerris
  42. 42. Introducción y consejos de Accesibilidad Web WCAG 2.0. Principio 3 COMPRENSIBLE Pauta 3.1 Legible y comprensible. Idiomas. Para identificarlos XHTML 1.0 y 1.1 en la etiqueta html xml:lang=”es” o en, fr, de, it, ru Si sólo queremos referirnos a una palabra o a un trozo de texto lo podemos identificar con el mismo atributo. Pedro V. Monerris
  43. 43. Introducción y consejos de Accesibilidad Web WCAG 2.0. Principio 3 COMPRENSIBLE Pauta 3.1 Legible y comprensible. Abreviaturas. El uso de <abbr> y de <acronym> para obtener la expansión o explicación, únicamente la primera vez que aparece en nuestro contenido. <abbr title=”Asociación de Desarrolladores Web de Alicante>ADWA</abbr> Pedro V. Monerris
  44. 44. Introducción y consejos de Accesibilidad Web WCAG 2.0. Principio 3 COMPRENSIBLE Pauta 3.2 Predecible. Evitar los cambios de estructura en nuestra web mientras navegamos (menús primero en un lado y luego en el otro). También es recomendable que los cambios de contexto (envíos de formulario, nuevas ventana, cambios de foco) no los hagan al recibir el foco sino con una acción (submit, button, onclick). Pedro V. Monerris
  45. 45. Introducción y consejos de Accesibilidad Web WCAG 2.0. Principio 3 COMPRENSIBLE Pauta 3.3 Evitar y corregir errores Los usuarios con discapacidad son más propensas a cometer errores y encuentran gran dificultad para corregir estos errores. Debemos proporcionar información sobre las restricciones de los campos bien mediante el label o el title del mismo input. A pesar de ayudar al usuario a rellenar los campos es inevitable equivocarse, dado el caso deberemos advertir al usuario mediante alertas (alert javascript) posicionando el foco sobre el elemento erroneo y si lo vemos oportuno sugerir formas correctas de rellenarlo. Pedro V. Monerris
  46. 46. Introducción y consejos de Accesibilidad Web WCAG 2.0. Principio 4 ROBUSTO Maximizar la compatibilidad con los agentes de usuario y productos de apoyo. Evitar malas practicas que provoquen que los productos de apoyo no interpreten bien el contenido. Validar nuestras webs y usar el lenguaje de acuerdo a la especificación. Pedro V. Monerris
  47. 47. Introducción y consejos de Accesibilidad Web WCAG 2.0. Validación. Automática. Validador de código HTML y CSS del W3C. http://validator.w3.org/ Pedro V. Monerris
  48. 48. Introducción y consejos de Accesibilidad Web WCAG 2.0. Validación. Automática. Validadores de Accesibilidad (recomendable dos mínimo). http://tawdis.net/ TAW – Fundación CTIC http://achecker.ca ATRC Checker http://www.contentquality.com/ Cynthia says Pedro V. Monerris
  49. 49. Introducción y consejos de Accesibilidad Web WCAG 2.0. Validación. Evaluación manual. Hemos podido ver que existen pautas que resultan imposibles detectar automáticamente. Deberemos evaluar la web por nuestra cuenta. Por ejemplo. Que el texto alternativo sea el apropiado. Pedro V. Monerris
  50. 50. Introducción y consejos de Accesibilidad Web WCAG 2.0. Validación Manual Herramientas que nos ayudarán (Firefox): Web developer toolbar. Firebug. Usar diferentes navegadores, usar la web con el teclado, probar que los lectores de pantalla tienen sentido. Esto es más complicado de lo que parece. Pedro V. Monerris
  51. 51. Introducción y consejos de Accesibilidad Web WCAG 2.0. Validación. Pruebas de usuario. Esta es la parte más difícil, realizar test con usuarios con discapacidades reales. Nos darán una visión real de la Accesibilidad. Monitorización. En caso de sitios web dinámicos llevaremos un control para que la accesibilidad se siga cumpliendo. TAW Monitor Pedro V. Monerris
  52. 52. Introducción y consejos de Accesibilidad Web Consejos finales No hemos hablado de AJAX & accesibilidad. Existen unas “pautas” llamadas WAI-Aria http://www.w3.org/WAI/intro/aria Pero pueden resultar un poco complicadas. Para evitar problemas con AJAX podemos utilizar el patrón MVC. De este modo podemos diferenciar la petición AJAX de una Accesible. Pedro V. Monerris
  53. 53. Introducción y consejos de Accesibilidad Web MUCHAS GRACIAS!!!!!! Pedro Vicente Monerris Cabrera http://www.nitsnets.com http://www.twitter.com/websmonerris http://www.facebook.com/websmonerris http://www.websmonerris.com Pedro V. Monerris

×