Presentación de Pedro Monerris

Introducción y consejos de Accesibilidad Web Pedro Vicente Monerris Cabrera www.nitsnets.com

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

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

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

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

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

Introducción y consejos de Accesibilidad Web Accesibilidad Web es para ciegos, ¿No? NO!!!!!!! Pedro V. Monerris

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

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

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

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

Introducción y consejos de Accesibilidad Web ¿Quién se beneficia? Y Google Pedro V. Monerris

Introducción y consejos de Accesibilidad Web Y ¿Cómo navegan? Lectores de pantalla Pedro V. Monerris

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

Introducción y consejos de Accesibilidad Web Y ¿Cómo navegan? Ampliadores Pedro V. Monerris

Introducción y consejos de Accesibilidad Web Y ¿Cómo navegan? Teclados y artilugios de ayuda Pedro V. Monerris

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

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

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

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

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

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

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

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

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

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

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

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

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ñ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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

http://www.desarrolloweb.com	244
http://www.lostiemposcambian.com	55
http://www.adwa.es	35
http://blog.bahiastudios.com	14
http://www.tucamon.es	7
http://www.slideshare.net	5
http://desarrolloweb.com	4
http://static.slidesharecdn.com	1

Presentación de Pedro Monerris

by Andrés Karp on May 17, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

8 Embeds 365

Statistics

Presentación de Pedro Monerris — Presentation Transcript