Curso sobre Accesibilidad a la Web Introducción 1
El poder de la web está en su universalidad. Que todo el mundo pueda acceder, sin importar si se tiene o no una discapacidad, es un aspecto esencial. Tim Berners-Lee, Director del W3C e inventor de la World Wide Web La accesibilidad es un derecho, no un privilegio. William Loughborough 2
Un amplio espectro de usuarios Personas mayores Personas con discapacidad Físicas, psíquicas, sensoriales Cognitivas y de lenguaje Situacionales (ruido, mala iluminación, etc.) Personas con dispositivos lentos o antiguos Bajo poder adquisitivo Limitaciones de infraestructura (Lugar inaccesible a la banda ancha) Personas con dispositivos muy modernos 3
4
Múltiples formas de acceso 5
Qué es la accesibilidad Una Web es accesible cuando la pueden usar personas con discapacidad. La accesibilidad implica aspectos como los siguientes: contenido comprensible y fácilmente navegable, reproducibilidad en diversos navegadores y equipos, adecuada separación de forma y contenido, descripción de los elementos no textuales, etiquetado de marcos y tablas... El logro de la accesibilidad requiere de un esfuerzo de integración, que incluye los siguientes componentes: Contenidos Software de acceso (navegadores) Software de creación de contenidos (herramientas de autor) 6
La encomiable teoría... La esencia de la Web es la posibilidad de compartir y relacionar información. La Web no es un medio, sino muchos. Las pantallas gráficas de los ordenadores personales son un medio más, entre muchos otros. La tecnología que yo uso para navegar no es la misma que la que usas tú. Mis limitaciones no son las tuyas. La Web nos permite salvar esas fronteras y construir una inteligencia colectiva. 7
... La dura realidad Después desciendes a los niveles terrenales y te das cuenta de que la Web, esa Web que permite difundir y compartir información a través de cualquier medio concebible de conectarse a Internet, se convierte en un ejercicio de control del usuario: primero tienes que usar este navegador, esta versión, esta resolución, y este número de colores. Y no se te ocurra cambiar el tamaño de las letras ni quites su hoja de estilo porque ya no ves nada. Eso es diseño web? Un verdadero profesional del diseño web haría algo así? 8
La accesibilidad de Internet: Un desafío global No basta con que unas pocas páginas web (las de los organismos públicos competentes en materia de discapacidad y las de algunas organizaciones de discapacitados) sean accesibles Es necesario que cualquier persona, usando cualquier tipo de tecnología de acceso a la web, sea capaz de visitar cualquier sitio y de conseguir una completa comprensión de la información contenida en él, así como una completa capacidad de interacción con el sitio. 9
Pirámide de la población con discapacidad y de la población total en España, 1999 85 y más años 80 a 84 años 75 a 79 años 70 a 74 años 65 a 69 años 60 a 64 años 55 a 59 años 20% Varones con discapacidad Mujeres con discapacidad Varones (Pobl. Total) Mujeres (Pobl. Total) 50 a 54 años 45 a 49 años 40 a 44 años 35 a 39 años 30 a 34 años 25 a 29 años 20 a 24 años 15 a 19 años 10 a 14 años 5 a 9 años 0 a 4 años 2.000.000 1.500.000 1.000.000 500.000 0 500.000 1.000.000 1.500.000 2.000.000 Fuente: Encuesta sobre Discapacidades, Deficiencias y Estado de Salud, 1999. Avance de Resultados. Datos Básicos. 10
Evolución prevista de la población mayor de 65 años en España Proyecciones 1991-2026 9.000.000 8.000.000 7.000.000 6.000.000 5.000.000 4.000.000 3.000.000 2.000.000 80 años y más 65 a 79 años 1.000.000 0 1991 1996 2001 2006 2011 2016 2021 2026 FUENTE: J.A. Fernández Cordón. Proyecciones de la Población Española. (Hipótesis A). FEDEA, Documentos de Trabajo, 98-11 11
Pirámide de la población Española. Diferencias entre 1991 y 2021 90+ Varones 85-89 80-84 75-79 70-74 Mujeres 1991 2021 65-69 60-64 55-59 50-54 45-49 40-44 35-39 30-34 25-29 20-24 15-19 10-14 5-9 0-4 2.000.000 1.500.000 1.000.000 500.000 0 500.000 1.000.000 1.500.000 2.000 FUENTE: J.A. Fernández Cordón. Proyecciones de la Población Española. (Hipótesis A). FEDEA, Documentos de Trabajo, 98-11 12
Las amenazas a la accesibilidad La barrera del idioma La barrera de la jerga Lenguaje claro, preciso y universal La barrera del diseño El control absoluto de la apariencia final de la obra no tiene sentido en la Web Las barreras mentales Ese no es mi problema Lo último es lo mejor Yo no sé como 13
Legislación (USA) La sección 508 de la Ley de Rehabilitación de los Estados Unidos de América Los sitios web federales deben ser accesibles a todos. Las agencias federales sólo podrán adquirir, desarrollar, mantener y utilizar, para su propio uso y para el uso del público, tecnología electrónica y de la información accesible. Este instrumento legal impone obligaciones positivas sobre las agencias federales, que se deben cumplir incluso antes de que pueda tener algún impacto discriminatorio sobre una persona con discapacidad. Esta disposición tiene una incidencia sustancial en la política de contratación pública, ya que las tecnologías de la información que se contratan deben ser accesibles a los discapacitados. 14
Legislación (USA) La Ley de los Estadounidenses con Discapacidad (ADA) Además de la Ley de Rehabilitación, existe otra más amplia, la ley de los Estadounidenses con Discapacidad (Americans with Disabilities Act, ADA), que se ocupa de aspectos más generales de la accesibilidad y provee un sólido marco legislativo. La Ley de Telecomunicaciones (Telecommunications Act), También es importante la sección 255 de la Ley de Telecomunicaciones (Telecommunications Act), que exige a los fabricantes de equipos de telecomunicaciones que sean accesibles para personas con discapacidad, o que, en su defecto, sean compatibles con las ayudas técnicas existentes. 15
Comunicación de la Comisión eeurope 2002: Accesibilidad de los sitios Web públicos y de su contenido COM(2001) 529 final, de 25 de septiembre de 2001 La Comisión Europea apuesta por el desarrollo de una Internet accesible para todos los ciudadanos. Las administraciones públicas deberán mejorar la accesibilidad de sus páginas web y buscar nuevas formas de ofrecer los contenidos y los servicios, a medida que evolucione la tecnología y aparezcan nuevas versiones de las pautas. Debe instarse a las organizaciones que reciban fondos públicos de las instituciones europeas o de los Estados miembros a hacer que sus sitios web sean accesibles Los Estados miembros deben fomentar el cumplimiento de las pautas de accesibilidad no sólo en los sitios web públicos de carácter nacional, sino también en los locales y regionales. 16
Resolución del Consejo de la Unión Europea sobre el Plan de Acción eeuropa 2002: Accesibilidad de los sitios web públicos y su contenido Adoptada el 20 de marzo de 2002 Subraya la necesidad de incrementar los esfuerzos para acelerar la accesibilidad a la Red y a los contenidos que ofrece. Alienta a los Estados miembros a presentar planes y medidas para conseguir la accesibilidad de los sitios web públicos en todos los niveles de la Administración. Insta a los Estados Miembros y a la Comisión a desarrollar un diálogo permanente con organizaciones representantes de los discapacitados y de las personas de edad, con el fin de que pueda tenerse en cuenta su reacción ante estos asuntos. 17
Resolución del Consejo de Europa sobre acceso a la plena ciudadanía de las personas con discapacidad a través de las nuevas tecnologías Adoptada por el Comité de Ministros del Consejo de Europa el 24 de octubre de 2001 Afirma el derecho de todos los individuos, incluidas las personas con discapacidad, a la igualdad de oportunidades, la libertad de elección, la independencia y la plena y activa participación ciudadana en la comunidad. Este derecho incluye el acceso y uso de la tecnología. Recomienda el diseño de estrategias nacionales para asegurar a las personas con discapacidad los beneficios que ofrecen las nuevas tecnologías, particularmente en las áreas de educación, formación vocacional, empleo, integración social y entorno, prevención, identificación y diagnósticos, rehabilitación médica, investigación y desarrollo, y formación de formadores. 18
Resolución del Consejo sobre Accesibilidad electrónica - Mejorar el acceso de las personas con discapacidad a la sociedad del conocimiento Adoptada por el Consejo de la Unión Europea el 14 de enero de 2003 Insta a utilizar, en la medida de lo posible, los mecanismos de financiación ya existentes y a facilitar el enlace con los agentes adecuados, como las ONG para discapacitados y las organizaciones europeas de normalización, a través de medidas concretas, como las siguientes: Creación de un portal internet dedicado a temas de accesibilidad electrónica, que creará y mantendrá la Comisión Europea. Apoyo de la participación de las personas con discapacidad en programas y proyectos tecnológicos, organismos de normalización y comités técnicos, comités sobre medidas legislativas y persuasivas y sobre iniciativas de educación, formación y capacitación. Fomento de métodos comunes y datos comparables en relación con la aplicación de las directrices de accesibilidad en los sitios web públicos de los Estados miembros y de las instituciones europeas. Apoyo, a través del 6.º programa marco de investigación y desarrollo tecnológico 2003-2006, de acciones que fomenten la integración social mediante las tecnologías electrónicas. Estudio de la creación de una "etiqueta de accesibilidad electrónica" para los productos y servicios que cumplan las normas de la accesibilidad electrónica. Fomento del uso de las posibilidades existentes en la legislación europea sobre contratos públicos para que contengan referencias específicas a criterios de accesibilidad para los productos y servicios pertinentes. 19
Iniciativa eeurope Plan de Acción eeurope 2002 Consejo Europeo de Feira (junio de 2000) eeurope 2002 se concentró en la ampliación de la conectividad a Internet en Europa. Plan de Acción eeurope 2005 Consejo Europeo de Sevilla (junio de 2002) La prioridad de eeurope 2005 es estimular los servicios, aplicaciones y contenidos que creen nuevos mercados, reduzcan los costes y, en última instancia, incrementen la productividad en toda la economía. 20
Ley 34/2002, de 11 de julio, de Servicios de la Sociedad de la Información y Comercio Electrónico. (BOE de 12 de julio de 2002) Disposición adicional quinta. Accesibilidad para las personas con discapacidad y de edad avanzada a la información proporcionada por medios electrónicos. Uno. Las Administraciones Públicas adoptarán las medidas necesarias para que la información disponible en sus respectivas páginas de Internet pueda ser accesible a personas con discapacidad y de edad avanzada de acuerdo con los criterios de accesibilidad al contenido generalmente reconocidos antes del 31 de diciembre de 2005. Asimismo, podrán exigir que las páginas de Internet cuyo diseño o mantenimiento financien apliquen los criterios de accesibilidad antes mencionados. Dos. Igualmente, se promoverá la adopción de normas de accesibilidad por los prestadores de servicios y los fabricantes de equipos y software, para facilitar el acceso de las personas con discapacidad o de edad avanzada a los contenidos digitales. 21
Las buenas prácticas en materia de accesibilidad Muchos agentes (no sólo el movimiento de las personas con discapacidad y los organismos que impulsan el desarrollo de Internet, sino también los poderes públicos y las empresas que lideran el sector) han enfrentado este desafío. El creciente compromiso de las administraciones públicas y el descubrimiento por parte de las empresas del valor de la accesibilidad permiten contemplar con optimismo el futuro de la accesibilidad a la web. 22
Temas principales Diseño para todos Cómo crear páginas accesibles Cómo evaluar la accesibilidad de páginas existentes 23
El Curso Vista general Pautas y puntos de comprobación Prácticas Examen final Curso introductorio, tiempo limitado 24
Accesibilidad y Usabilidad 25
Antes de coger el teclado Diseño Estratégico Objetivos del Portal Perfiles de usuario Tareas Objetivo Productos Objetivo Temas Prioritarios Diseño Lógico Portada Navegación / Estructura Contenido / información Facilidad de aprendizaje de uso Diseño Físico 26
Encontrar el sitio Los factores que influyen en que los usuarios encuentren el Portal con facilidad. Aunque no es una característica que influya en la facilidad de uso, si es una variable que afecta a la Usabilidad. Si los usuarios no son capaces de llegar al Portal, si el Portal no aparece como candidato en las búsquedas que realicen, difícilmente van a llegar a utilizarlo muchos usuarios potenciales. 27
Portada La portada es la página de entrada al Portal para la mayor parte de los usuarios. La primera impresión que un usuario reciba en la portada va a determinar en gran medida el uso o el abandono del Portal. 28
Qué debe mostrar la portada? La Portada de un sitio web debe proporcionar respuesta a tres preguntas básicas del usuario: 1. Dónde estoy? 2. Qué puede hacer este sitio por mí? 3. Cómo llego hasta lo que me interesa de este Portal? La portada debe ofrecer respuesta a las tres preguntas anteriores potenciando, además, desde la primera página, el cumplimiento de los Objetivos del Portal. 29
Navegación / Estructura La navegación por el Portal no es un objetivo en si mismo de los usuarios sino un medio de llegar a la información o tarea deseada. Por esta razón el diseño de todas las herramientas de ayuda a la navegación por el Portal se debe realizar priorizando la facilidad de acceso a la información. La estructura del Portal se relaciona íntimamente con la navegación por el mismo, afectándose mutuamente. La estructura del Portal debe servir para presentar al usuario los contenidos estructurados de la forma más compresible, según los perfiles objetivo de usuario y los objetivos del Portal. 30
Contenido / Información El contenido sigue siendo la principal razón por la cual los usuarios visitan los portales de Internet. La presentación de este contenido debe priorizar los objetivos del Portal facilitando su rápida localización, acceso y comprensión. Es importante que el contenido de la página esté dividido en titulares y encabezados lo suficientemente explicativos y que al principio de cada página se muestre un pequeño resumen de la misma. El contenido debe ser fácilmente legible, sin faltas de ortografía, sin errores gramaticales y debe estar permanentemente actualizado. 31
Facilidad de aprendizaje de uso Claridad y orientación al usuario Estandarización Coherencia Diferencia 32
Qué es la accesibilidad de la Web? La Web accesible la pueden usar personas con discapacidad Es un esfuerzo para integrar componentes en la Web Estos componentes incluyen: Contenidos Software de acceso Software de creación de contenidos 33
Usuarios diversos Diseño para todos; discapacitados o no, y en circunstancias variadas 34
Discapacidades Auditiva Visual Motora De aprendizaje Tecnológica 35
Discapacidad auditiva Afecta a la percepción y comprensión dela información sonora 36
Discapacidad visual Navegador de voz Ampliador de pantalla 37
Discapacidad motora Impide la utilización de los sistemas habituales de entrada de información al ordenador 38
Discapacidad de aprendizaje Dificultades para comprender y asimilar la información que muestra la pantalla del ordenador 39
Discapacidad tecnológica Se refiere a la falta de medios técnicos óptimos para acceder a la web 40
Dispositivos de acceso 41
Software de acceso Software de acceso a la Web que puede ser utilizado por personas con discapacidad y que funciona con las tecnologías empleadas por algunas personas con discapacidad 42
Dispositivos de acceso Síntesis de voz Línea Braille Navegadores gráficos Navegadores de texto Dispositivos diversos; móviles Robots 43
JAWS Lector de pantalla Trabajar con el ordenador Solo Microsoft Windows El mas usado en España Alto coste Proporcionado en España por la ONCE Versión de prueba 30 minutos 44
Ampliador de pantalla ZoomText 45
Línea Braille Usuarios sordos no pueden utilizar síntesis de voz Copia impresa Una rejilla de ocho puntos 46
Línea Braille 47
PDA Braille 48
Opera Opera tiene dos "modos" llamados "Modo de autor" y "Modo de usuario". El modo de autor muestra las páginas Web tal y como las diseñó el autor, mientras que el modo de usuario permite personalizar el estilo de visualización. 49
Diseño de sitios web accesibles Cómo abordar un proyecto de accesibilidad? Metodología Definición del nivel de accesibilidad Técnicas de programación y diseño Claridad y orientación al usuario Estandarización Coherencia Diferencia Páginas separadas accesibles 50
Épocas de la World Wide Web 1984-1995 inicios 1995-2000 crecimiento 2000 presente consolidación, racionalización 51
Las tres épocas de la web Inicios Boom comercial Racionalización 52
Las etapas Etapa romántica Etapa del negocio Etapa del diseño 53
Etapa romántica Casi todo era texto Principios del HTML y la Web el e-mail, FTP... Accesible desde sistemas no gráficos Primeros intentos sobre accesibilidad desde sistemas gráficos como Windows 3.1 54
Etapa del negocio Se comienzan a perder logros en materia de accesibilidad Guerras para crear estándares fuera de WWW (MS y Netscape) Pérdidas significativas en contenidos pues ya apunta la tercera etapa 55
Etapa del diseño Todo se hace en base al diseño. No importa lo que se diga tiene que ser animado Se ignora la accesibilidad casi por completo Todo vale: cualquier nuevo plug-ins, códigos revolucionarios, Flash, JavaScript... 56
Páginas separadas accesibles Es discriminación Los contenidos no se actualizan Supone que existe un perfil unificado de discapacitado No es necesario Usuarios invidentes necesitan imágenes Usuarios con discapacidad cognitiva se pierden en el texto 57
Web Accessibility Initiative Fundada en 1997 Apoyada por principales actores en la industria y los gobiernos Publica materiales de soporte Pautas de Accesibilidad a los Contenidos de la Web (WCAG) 58
Definición del nivel de accesibilidad La WAI define tres prioridades: 1, 2, 3 Define tres niveles de cumplimiento: A, doble-a y triple-a Cada organización debe tener en cuenta: El esfuerzo necesario La importancia del servicio o de la información 59
Diseño accesible 60
Pauta 1. Alternativas de contenido visual y auditivo Proporcione un contenido que, presentado al usuario, cumpla esencialmente la misma función o propósito que el contenido visual o auditivo. 61
1.1 Texto equivalente (1) Proporcione un texto equivalente para todo elemento no textual (Ej. a través de "alt", "longdesc" o en el contenido del elemento)... 62
1.1 Texto equivalente (2) Esto incluye: imágenes, representaciones gráficas del texto, mapas de imagen, animaciones (Ej. GIFs animados), "applets" y objetos programados, "ASCII art", marcos, scripts, imágenes usadas como viñetas en las listas, espaciadores, botones gráficos, sonidos (ejecutados con o sin interacción del usuario), archivos exclusivamente auditivos, banda sonora del vídeo y vídeos. [Prioridad 1] 63
Alternativas para contenidos visuales y auditivos (1) Imágenes, video, sonido, Applets Usuarios pueden utilizar la página si tienen equivalentes HTML proporciona técnicas para incluir equivalente textual La información equivalente debe servir el mismo propósito que el elemento original 64
Alternativas para contenidos visuales y auditivos (2) Prioridad a equivalentes textuales para contenidos no textuales El texto se puede interpretar de diversas maneras, para diversas discapacidades Podemos cambiar el estilo de letra, el color y el tamaño Para robots de indexación 65
Alternativas para contenidos visuales y auditivos (3) Es útil también un equivalente no textual de un elemento textual Algunos usuarios tienen dificultad para leer o comprender Por ejemplo, iconos de navegación, diagramas 66
1.2 Enlaces redundantes para mapa de imagen servidor Proporcione enlaces redundantes en formato texto con cada zona activa de un mapa de imagen del servidor [Prioridad 1] 67
1.3 Descripción auditiva de la pista visual Hasta que las aplicaciones de usuario puedan leer automáticamente el texto equivalente de la pista visual, proporcione una descripción auditiva de la información importante de la pista visual de una presentación multimedia. [Prioridad 1] 68
1.4 Sincronizar alternativas equivalentes a multimedia Para toda presentación multimedia tempodependiente (Ej. una película o animación) sincronice alternativas equivalentes (Ej. subtítulos o descripciones de la banda de visual) con la presentación. [Prioridad 1] 69
1.5 Enlaces redundantes para mapa de imagen cliente Hasta que las aplicaciones de usuario interpreten el texto equivalente para los enlaces de los mapas de imagen de cliente, proporcione enlaces en formato texto redundantes para cada zona activa del mapa de imagen de cliente. [Prioridad 3]. 70
Pauta 2. No se base sólo en el color Asegúrese de que los textos y gráficos son comprensibles cuando se vean sin color. 71
2.1 Información disponible sin color Asegure que toda la información transmitida a través de los colores también esté disponible sin color, por ejemplo mediante el contexto o por marcadores. [Prioridad 1]. 72
Daltonismo Dificultad para diferenciar los colores De 10 a 20% de los usuarios varones tiene problema de percepción de color (Daltonismo) 73
Test de percepción de color Técnica Isihara de diagnóstica rápida No sustituye examen por médico Apuntar los números en los seis dibujos 74
Test de percepción de color A 75
Test de percepción de color B 76
Test de percepción de color C 77
Test de percepción de color D 78
Test de percepción de color E 79
Test de percepción de color: respuestas A B C D E F 25 6 45 8 56 29 25 [puntos] [puntos] [puntos] 56 [puntos] 80
Uso de color Navegadores de voz no indican colores El uso de color es bueno Pero no debemos depender solo del color 81
2.2 Contraste de colores Asegure que las combinaciones de los colores de fondo y primer plano tengan suficiente contraste para que sean percibidas por personas con deficiencias de percepción de color o por pantallas en blanco y negro. [Prioridad 2 para las imágenes. Prioridad 3 para los textos] 82
Contraste de colores Usuarios con deficiencias de percepción de colores Usuarios con pantalla blanco y negro Especial importancia para imágenes Usuario puede elegir los colores en el navegador, para texto, no para imágenes Con CSS definimos color de fondo y color de texto 83
Pauta 3. Marcadores y hojas de estilo Marque los documentos con los elementos estructurales apropiados. Controle la presentación con hojas de estilo en vez de con elementos y atributos de presentación. 84
3.1 Marcadores en vez de imágenes Cuando exista un marcador apropiado, use marcadores en vez de imágenes para transmitir la información [Prioridad 2] 85
3.2 Documentos validados Cree documentos que estén validados por las gramáticas formales publicadas. [Prioridad 2] 86
3.3 Hojas de estilo Utilice hojas de estilo para controlar la maquetación y la presentación. [Prioridad 2] 87
3.4 Unidades relativas Utilice unidades relativas en lugar de absolutas al especificar los valores en los atributos del de lenguaje de marcadores y en los valores de las propiedades de las hojas de estilo. [Prioridad 2] 88
Absolutismo, no Unidades fijas: píxeles (px), puntos (pt), milímetros (mm), etc Fijar tamaño de letra en unidades absolutas Muchas personas no pueden leer letra pequeña Web es un medio dinámico, no fijo Sugerir tamaño de letra con unidades relativas 89
Todo es relativo Unidades relativas: porcentaje (%), em (em), ex (ex) Respeta la preferencia del usuario No solo para tamaño de letra Tablas relativas aprovechan todo el espacio 90
3.5 Encabezados Utilice elementos de encabezado para transmitir la estructura lógica y utilícelos de acuerdo con la especificación. [Prioridad 2]. 91
3.6 Listas Marque correctamente las listas y los ítem de las listas. [Prioridad 2] 92
3.7 Citas Marque las citas. No utilice el marcador de citas para efectos de formato tales como sangrías. [Prioridad 2] 93
Pauta 4. Identificar el idioma Use marcadores que faciliten la pronunciación o interpretación de texto abreviado o extranjero 94
4.1 Cambios de idioma Identifique claramente los cambios en el lenguaje natural del texto del documento y en cualquier texto equivalente (Ej. leyendas). [Prioridad 1] 95
4.2 Abreviatura y acrónimos Especifique la expansión de cada abreviatura o acrónimo cuando aparezcan por primera vez en el documento. [Prioridad 3] 96
Por qué marcar abreviaturas El navegador gráfico puede mostrar un texto emergente (tooltip) Google puede indexar el término completo Diseñar para el futuro: se espera que futuras versiones de los lectores de pantalla soporten estas etiquetas 97
Abreviaturas y acrónimos Las abreviaturas terminan con punto, Pta., Pte. Un acrónimo son las letras: ONCE, W3C, ONU 98
No son abreviaturas Símbolos: @ $ + ± Unidades de medida no ambiguas: kg, km Iniciales: J. M. García Acrónimos que se suelen usar sin expansión: ONCE, ONU 99
Técnica: Marcar abreviaturas HTML proporciona las etiquetas <ABBR> y <ACRONYM> WCAG: marcar la expansión primera vez No cuesta trabajo marcar todos 100
4.3 Idioma principal de la página Identifique el idioma principal de un documento. [Prioridad 3] 101
Pauta 5. Tablas que se transformen correctamente Asegure que las tablas tienen los marcadores necesarios para transformarlas mediante navegadores accesibles y otras aplicaciones de usuario. 102
5.1 Identificar los encabezamientos En las tablas de datos, identifique los encabezamientos de fila y columna. [Prioridad 1] 103
Marcar encabezamientos con <th> HTML define la etiqueta <th> para marcar las celdas de encabezamiento En columnas y filas Se emplea como <td> El navegador puede resaltar el texto También punto 5.4 104
5.2 Asociar celdas de encabezamiento y las de datos Para las tablas de datos que tienen dos o más niveles lógicos de encabezamientos de fila o columna, utilice marcadores para asociar las celdas de encabezamiento y las celdas de datos. [Prioridad 1] 105
5.3 Utilizar tablas para maquetar No utilice tablas para maquetar, a menos que tabla tenga sentido cuando se transcriba línea a línea. Por otro lado, si la tabla no tiene sentido, proporcione una alternativa equivalente (la cual debe ser una versión que pueda ser leída línea a línea). [Prioridad 2] 106
5.4 Marcadores estructurales para formateo visual Si se utiliza una tabla para maquetar, no utilice marcadores estructurales para representar un formateo visual. [Prioridad 2] 107
Marcadores estructurales La etiqueta <th> indica un encabezado Con <th> el navegador muestra el texto en negrita El navegador de voz indica un encabezado Si no es un encabezado el usuario se confunde Utilicemos <th> solo para encabezados 108
5.5 Resúmenes de tablas Proporcione resúmenes de las tablas. [Prioridad 3] 109
5.6 Abreviaturas para etiquetas de encabezamiento Proporcione abreviaturas para las etiquetas de encabezamiento. [Prioridad 3] 110
Pauta 6. Tecnologías nuevas Asegure que las páginas son accesibles incluso cuando no se soportan las tecnologías más modernas o éstas estén desconectadas. 111
Lo último en tecnología No todos los usuarios tienen la última versión del navegador elegido No todos tienen el mismo navegador Unos pueden tener un navegador mas moderno que el tuyo No todos tienen conexión T1 112
6.1 Lectura sin hoja de estilo Organice el documento de forma que pueda ser leído sin hoja de estilo. Por ejemplo, cuando un documento HTML es interpretado sin asociarlo a una hoja de estilo, tiene que ser posible leerlo. [Prioridad 1] 113
Documento sin Hoja de estilo Redactar el documento sin hoja de estilo Marcar estructura con con elementos HTML Activar la hoja de estilo después Emplear posicionamiento absoluto CSS 114
6.2 Actualizar equivalentes de contenidos dinámicos Asegure que los equivalentes de un contenido dinámico son actualizados cuando cambia el contenido dinámico. [Prioridad 1] 115
6.3 Páginas utilizables sin scripts y Applets Asegure que las páginas sigan siendo utilizables cuando se desconecten o no se soporten los scripts, Applets u otros objetos de programación. Si esto no es posible, proporcione información equivalente en una página alternativa accesible. [Prioridad 1] 116
Quién no utiliza scripts? Usuarios con línea Braille y navegador como Braillesurf o Lynx Robots de búsqueda (Google, AltaVista) 117
Generar contenido en el servidor, no en el cliente Problema: Generamos contenido en el cliente con JavaScript: document.write( Hola Alan! ); Resultado: Usuarios sin JavaScript no ven nada Solución: Generar el contenidos en el servidor, o Proporcionar una alternativa 118
Evitar vínculos JavaScript Problema: Empleamos vínculos con esquema JavaScript: <a href= javascript:irapagina() > Resultado: Muchos usuarios no pueden seguir el vínculo Solución: Emplear vínculo HTTP y invocar JavaScript en manejador de evento 119
6.4 Manejadores de evento independientes del dispositivo Para los scripts y Applets, asegure que los manejadores de evento sean entradas independientes del dispositivo. [Prioridad 2] 120
6.5 Contenidos dinámicos accesibles Asegure que los contenidos dinámicos son accesibles o proporcione una página o presentación alternativa. [Prioridad 2] 121
Pauta 7. Contenidos tempo-dependientes Asegure que los objetos o páginas que se mueven, parpadean, se desplazan o se actualizan automáticamente, puedan ser detenidos o parados. 122
Pautas sobre cambios tiempodependientes Destello (7.1) Parpadeo (7.2) Movimiento (7.3) Actualización automática (7.4) Redirección (7.5) 123
Destello, punto 7.1 7.1 Hasta que las aplicaciones de usuario permitan controlarlo, evite provocar destello en la pantalla [Prioridad 1] Frecuencias de 3 a 49 Hz 124
Destello, por qué no Epilepsia fotosensitiva Problemas cardiacos Dificultad para leer el resto de la página Por dificultad cognitiva 125
Advertencia La diapositiva siguiente puede provocar ataque epiléptico. Si eres susceptible a epilepsia, no debe visualizarla. 126
Parpadeo de 3Hz 127
Parpadeo, punto 7.2 7.2 Hasta que las aplicaciones de usuario permitan controlarlo, evite el parpadeo del contenido (por ejemplo, cambio de presentación en periodos regulares, tal como el encendido y apagado) [Prioridad 2]. 128
Parpadeo, como hacer Dificultad para leer el resto de la página Dificulta la comprensión El elemento <BLINK> no es HTML Proporcionar una manera de desactivarlo Utilizar atributo CSS text-decoration: blink 129
Deshabilitar animaciones en IE 130
Deshabilitar animaciones en Opera 131
Movimiento, punto 7.3 7.3 Hasta que las aplicaciones de usuario permitan congelar el movimiento de los contenidos, evite los movimientos en las páginas [Prioridad 2] 132
Movimiento, si y no Usuarios con problemas cognitivos o visuales no lo pueden leer Proporcionar una manera de desactivarlo El elemento <MARQUEE> no es HTML Efecto DHTML con CSS y JavaScript, el usuario lo puede desactivar 133
Pauta 8. Interfaces incrustadas Asegure que la interfaz de usuario sigue los principios del diseño accesible: acceso a la funcionalidad independiente del dispositivo, operable con teclado, voz automática, etc. 134
8.1 Elementos de programación Haga los elementos de programación, tales como scripts y applets, directamente accesibles o compatibles con las ayudas técnicas [Prioridad 1 Si la funcionalidad es importante y no se presenta en otro lugar; de otra manera, Prioridad 2]. 135
Pauta 9. Diseñe con independencia del dispositivo Utilice características que permitan la activación de los elementos de la página a través de diversos dispositivos de entrada. 136
9.1 Mapas de imagen cliente Proporcione mapas de imagen controlados por el cliente en lugar de por el servidor, excepto donde las zonas sensibles no puedan ser definidas con una forma geométrica [Prioridad 1]. 137
9.2 Manejo con distintos dispositivos Asegure que cualquier elemento que tiene su propia interfaz pueda manejarse de forma independiente del dispositivo [Prioridad 2]. 138
9.3 Manejadores de evento Para los "scripts", especifique manejadores de evento lógicos en vez de manejadores de evento dependientes de dispositivos [Prioridad 2] 139
9.4 Orden de tabulación Cree un orden lógico para navegar con el tabulador a través de vínculos, controles de formulario y objetos [Prioridad 3] 140
9.5 Atajos de teclado Proporcione atajos de teclado para los vínculos más importantes (incluidos los de los mapas de imagen de cliente), los controles de formulario y los grupos de controles de formulario [Prioridad 3]. 141
Pauta 10. Soluciones provisionales Utilice soluciones de accesibilidad provisionales de forma que las ayudas técnicas y los antiguos navegadores operen correctamente. 142
10.1 Ventanas Hasta que las aplicaciones de usuario permitan desconectar la apertura de nuevas ventanas, no provoque apariciones repentinas de nuevas ventanas y no cambie la ventana actual sin informar al usuario. [Prioridad 2] 143
10.2 Cada etiqueta junto con su control Hasta que las aplicaciones de usuario soporten explícitamente la asociación entre control de formulario y etiqueta, para todos los controles de formularios con etiquetas asociadas implícitamente, asegure que la etiqueta está colocada adecuadamente. [Prioridad 2] Formularios 144
10.3 Texto contiguo Hasta que las aplicaciones de usuario (incluidas las ayudas técnicas) interpreten correctamente los textos contiguos, proporcione un texto lineal alternativo (en la página actual o en alguna otra) para todas las tablas que maquetan texto en paralelo, columnas con ajuste de línea. [Prioridad 3] 145
Texto en columnas 146
10.4 Controles vacíos Hasta que las aplicaciones de usuario manejen correctamente los controles vacíos, incluya caracteres por defecto en los cuadros de edición y áreas de texto. [Prioridad 3] Formularios 147
10.5 Caracteres entre vínculos contiguos Hasta que las aplicaciones de usuario (incluidas las ayudas técnicas) interpreten claramente los vínculos contiguos, incluya caracteres imprimibles (rodeados de espacios), que no sirvan como vínculo, entre los vínculos contiguos. [Prioridad 3] 148
Pauta 11. Tecnologías y pautas W3C Utilice tecnologías W3C (de acuerdo con la especificación) y siga las pautas de accesibilidad. Donde no sea posible utilizar una tecnología W3C, o usándola se obtienen materiales que no se transforman correctamente, proporcione una versión alternativa del contenido que sea accesible. 149
11.1 Utilice tecnologías W3C Utilice tecnologías W3C cuando estén disponibles y sean apropiadas para la tarea, y use las últimas versiones cuando sean soportadas. [Prioridad 2] 150
11.2 Evite características desfasadas Evite características desfasadas de las tecnologías W3C. [Prioridad 2]. 151
11.3 Respetar la preferencias del usuario Proporcione la información de modo que los usuarios puedan recibir los documentos según sus preferencias (Ej. lenguaje, tipo de contenido, etc.). [Prioridad 3] 152
11.4 Página alternativa Si, después de los mayores esfuerzos, no puede crear una página accesible, proporcione un vínculo a una página alternativa que use tecnologías W3C, sea accesible, tenga información equivalente (o funcional) y sea actualizada tan a menudo como la página (original) inaccesible. [Prioridad 1] 153
Pauta 12. Información de contexto y orientación Proporcione información de contexto y orientativa para ayudar a los usuarios a entender páginas o elementos complejos. 154
12.1 Títulos de los marcos Titule cada marco para facilitar la identificación y navegación de los mismos. [Prioridad 1] 155
12.2 Marcos, propósito y relaciones Describa el propósito de los marcos y como estos se relacionan entre sí, si no resulta obvio solamente con el título del marco. [Prioridad 2] 156
12.3 Divida bloques de información Divida los bloques largos de información en grupos más manejables donde sea natural y apropiado. [Prioridad 2] 157
12.4 Asociar etiquetas con sus controles Asocie explícitamente las etiquetas con sus controles. [Prioridad 2]. Formularios 158
Pauta 13. Mecanismos claros de navegación Proporcione mecanismos de navegación claros y consistentes, (información orientativa, barras de navegación, un mapa del sitio, etc.) para incrementar la probabilidad de que una persona encuentre lo que está buscando en un sitio. 159
13.1 Identifique el objetivo de cada vínculo Identifique claramente el objetivo de cada vínculo. [Prioridad 2] 160
13.2 Metadatos Proporcione metadatos para añadir información semántica a las páginas y sitios. [Prioridad 2] 161
13.3 Estructura del sitio Proporcione información sobre la estructura general del sitio (por ejemplo, mapa del sitio o tabla de contenidos). [Prioridad 2] 162
13.4 Uso consistente de mecanismos de navegación Utilice los mecanismos de navegación de forma consistente. [Prioridad 2]. 163
13.5 Barra de navegación Proporcione barras de navegación para destacar y dar acceso al mecanismo de navegación. [Prioridad 3] 164
13.6 Agrupar vínculos relacionados Agrupe los vínculos relacionados, identifique el grupo (para las aplicaciones de usuario) y, hasta que lo proporcionen las aplicaciones de usuario, proporcione una manera de evitar el grupo. [Prioridad 3] 165
13.7 Funciones de búsqueda Si proporciona funciones de búsqueda, permita diferentes tipos de búsquedas para diversos niveles de habilidad y preferencias. [Prioridad 3] 166
13.8 Destacar información importante Localice la información destacada al principio de los encabezamientos, párrafos, listas, etc. [Prioridad 3] 167
13.9 Información sobre colecciones de documentos Proporcione información sobre las colecciones de documentos (por ejemplo, los documentos que comprendan múltiples páginas). [Prioridad 3] 168
13.10 Saltar sobre ASCII art Proporcione un medio para saltar sobre un ASCII art de varias líneas [Prioridad 3] 169
Pauta 14. Documentos claros y simples Asegure que los documentos son claros y simples para que puedan ser más fácilmente comprendidos. 170
14.1 Lenguaje apropiado claro y simple Utilice el lenguaje apropiado más claro y simple para el contenido de un sitio [Prioridad 1] 171
14.2 Complementar el texto gráficos o sonido Complemente el texto con presentaciones gráficas o auditivas donde ello facilite la comprensión de la página. [Prioridad 3] 172
14.3 Estilo consistente Cree un estilo de presentación que sea consistente en todas las páginas. [Prioridad 3] 173
Técnicas de programación y diseño Técnicas fundamentales Técnicas HTML Técnicas CSS Herramientas de desarrollo Comportamiento y uso de Navegadores Ayudas técnicas 174
Técnicas fundamentales Equivalentes textuales El uso del color Internacionalización 175
Técnicas HTML Marcos Tablas Formularios 176
Marcos Son necesarios los marcos? Navegar por marcos con el navegador de voz Soluciones para marcos 177
Tablas Estructuran la información de forma visual Presentan problemas especiales para usiuarios no visuales Pauta 5. Tablas que se transformen correctamente Punto 10.3 178
Tablas en forma lineal Se leen correctamente mientras las celdas no tienen relación entre si Las tablas anidadas también Cada tabla anidada se lee en sitio, antes de seguir con la celda siguiente 179
Una tabla anidada Celda 1 2 4 3 5 Celda 6 Celda 7 Celda 8 Celda 9 180
Formularios Imprescindibles para interactividad en aplicaciones Web El usuario no solo accede a datos, sino los proporciona Puede implicar un compromiso por parte del usuario Pautas 10.2, 12.4, 10.4 181
Accesibilidad de los formularios Accesibilidad para: Comprender el propósito del formulario Navegar por los controles Dar los datos sin equivocarse 182
Porqué colocar bien las etiquetas Usuarios ciegos pueden rellenar formularios con dispositivos de voz. Queda claro el significado de cada control. Dispositivos especiales pueden relacionar control con etiqueta. 183
Dicen las pautas WCAG Colocar cada etiqueta junto a su control Asociar explícitamente etiqueta y control Pero Asociar las etiquetas cuesta trabajo Si la etiqueta está bien colocada, es suficiente 184
Un formulario inaccesible Formateado con tablas anidadas Controles separados de sus etiquetas No se asocia explícitamente la etiqueta con el control 185
Un formulario accesible Formateado con una sola tabla Cada control junto a su etiqueta Tipo radiobutton la etiqueta a la derecha Todos los demás, con la etiqueta a la izquierda No hace falta asociar explícitamente la etiqueta con el control 186
Formularios especiales Pauta 12.4 Etiquetas mal colocadas por motivos de diseño El usuario no visual se confunde HTML 4 proporciona la etiqueta <label for= id_control > Expresa la semántica etiqueta para control 187
Técnicas CSS Importancia de la separación de contenido y formato Unidades de medida relativas Posicionamiento absoluto 188
Script en el cliente Aspectos de accesibilidad de script JavaScript, ECMA Script y VBScript Usuarios que no ejecutan scripts Experiencia equivalente: Validación de formularios Vínculos y formularios con script Contenidos generados con script 189
Elementos incrustados Applets ActiveX Multimedia Macromedia Flash Adobe PDF (Acrobat) 190
Macromedia Flash Puede considerarse Flash accesible? Como mejorar la accesibilidad de Flash 191
Accesibilidad con Flash MX (1) Flash Player 6. Windows. Lector de pantalla. Objetos accesibles (Texto, campos de texto, botones, clips y movies) Permitir acceso desde Flash Nombrar elementos Descripción Métodos abreviados 192
Accesibilidad con Flash MX (2) Anidamiento de objetos Objetos secundarios accesibles Anidamiento lógico Etiquetado automático y Tabindex Método: *Accessibility.isActive(), *System.capabilities.Accesibility 193
Flash MX (3): Sugerencias a tener en cuenta Tenga en cuenta el texto gráfico Se puede agregar texto adicional Mantenga estables texto, botones y campos de texto Entrar en la película o descripción de conjunto? Tenga muy en cuenta el sonido. Acoples con el lector. Volumen. Voz en off. 194
Accesibilidad con Flash MX (4) Navegación lógica. Capturas de teclas. Pruebas específicas. Cuidado con las escenas tempo-dependientes, botones de control. 195
Flash MX (5): Publicación; tipos de movies Páginas exclusivas Flash Banners y movies tempo-dependientes. Descripciones conjuntas y alternativas con html. Aplicaciones mixtas. Entrar y salir de una movie. FSCommand. 196
Software de creación de contenidos, definición Puede ser utilizados por personas con discapacidad Permite la creación de contenidos Web accesibles 197
Software de creación de contenidos WAI: Authoring Tools Accesibility Grupo de trabajo y pautas ATAG Requisito legal en EEUU para compra por administración En transición: implementan algunos aspectos, pero queda mucho por hacer 198
Pautas ATAG 1. Apoyar prácticas de autor accesibles 2. Generar marcas estándar 3. Apoyar la creación de contenidos accesibles 4. Proporcionar métodos de comprobación y corrección de contenidos inaccesibles 5. Integrar soluciones de accesibilidad en el interfaz de usuario 6. Promover accesibilidad en la ayuda y documentación 7. Asegurar que la herramienta de autor resulte accesible para autores discapacitados 199
Evaluación y corrección Metodologías Técnicas manuales Técnicas semiautomáticas Comparación de técnicas manuales y semiautomáticas Muestreo de páginas 200
Metodologías Concretar los procedimientos de validación Ejemplo de la WAI 201
Técnicas semiautomáticas Herramientas: Bobby, TAW, AccVerify Ventajas: rapidez, automatización, consistencia Problemas: Solo detectan errores; la no detección de errores no significa que el sitio es accesible No entienden el significado de los contenidos 202
Promoción de la accesibilidad El marco normativo Iniciativas en el sector público Buenas prácticas Diseño para el futuro 203
La declaración de accesibilidad Declaración pública Publicada en el mismo sitio web Difundir entre clientes y la prensa 204
Una declaración mínima Esta organización se compromete a asegurar la accesibilidad de este sitio web para las personas con discapacidad. Todas las páginas cumplirán las Pautas de Accesibilidad al Contenido de la Web 1.0 W3C/WAI Doble A 205
Página de accesibilidad Se publica en el sitio web objetivo Incorpora la declaración de accesibilidad Manifiesta el esfuerzo realizado Reconoce las carencias, tranquiliza los usuarios Solicita sugerencias de los usuarios Enlace en la barra de navegación Accesibilidad máxima 206
WAI SIDAR Recursos de información sobre accesibilidad Fundosa Teleservicios 207
Iniciativa por la Accesibilidad de la Web (WAI) Fundada en 1997 Patrocinado por importantes empresas y la Comunidad Europea Nueve grupos de trabajo Numerosos documentos y otros recursos En la web www.w3.org/wai Libro Diseño Accesible de Páginas Web 208
SIDAR Seminario Iberoamericano sobre Discapacidad y Accesibilidad en la Red Sede en España En la web www.sidar.org 209
Fundosa Teleservicios Consultoría de Accesibilidad Servicios de Formación Certificación de accesibilidad Desarrollo de sitios web Hosting Empleo para discapacitados www.teleservicios.com 210
Diseño Accesible de Páginas Web Textos de la WAI Traducidos al castellano Primera edición agotada Nueva edición en 2003 211
Otros recursos Web Unidad de Investigación ACCESO acceso.psievo.uv.es/accesibilidad/ Accesoweb es.groups.yahoo.com/group/accesoweb/ Test de Accesibilidad Web (TAW) www.tawdis.net/ Bobby bobby.watchfire.com/ 212