Introducción. Curso sobre Accesibilidad a la Web. Fundación ONCE para la cooperación e integración social de personas con discapacidad

Transcripción

1 Curso sobre Accesibilidad a la Web Introducción 1

2 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

3 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 4

5 Múltiples formas de acceso 5

6 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

7 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

8 ... 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

9 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

10 Pirámide de la población con discapacidad y de la población total en España, 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 Fuente: Encuesta sobre Discapacidades, Deficiencias y Estado de Salud, Avance de Resultados. Datos Básicos. 10

11 Evolución prevista de la población mayor de 65 años en España Proyecciones años y más 65 a 79 años FUENTE: J.A. Fernández Cordón. Proyecciones de la Población Española. (Hipótesis A). FEDEA, Documentos de Trabajo,

12 Pirámide de la población Española. Diferencias entre 1991 y Varones Mujeres FUENTE: J.A. Fernández Cordón. Proyecciones de la Población Española. (Hipótesis A). FEDEA, Documentos de Trabajo,

13 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

14 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

15 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

16 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

17 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

18 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

19 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 , 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

20 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

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

22 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

23 Temas principales Diseño para todos Cómo crear páginas accesibles Cómo evaluar la accesibilidad de páginas existentes 23

24 El Curso Vista general Pautas y puntos de comprobación Prácticas Examen final Curso introductorio, tiempo limitado 24

25 Accesibilidad y Usabilidad 25

26 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

27 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

28 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

29 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

30 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

31 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

32 Facilidad de aprendizaje de uso Claridad y orientación al usuario Estandarización Coherencia Diferencia 32

33 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

34 Usuarios diversos Diseño para todos; discapacitados o no, y en circunstancias variadas 34

35 Discapacidades Auditiva Visual Motora De aprendizaje Tecnológica 35

36 Discapacidad auditiva Afecta a la percepción y comprensión dela información sonora 36

37 Discapacidad visual Navegador de voz Ampliador de pantalla 37

38 Discapacidad motora Impide la utilización de los sistemas habituales de entrada de información al ordenador 38

39 Discapacidad de aprendizaje Dificultades para comprender y asimilar la información que muestra la pantalla del ordenador 39

40 Discapacidad tecnológica Se refiere a la falta de medios técnicos óptimos para acceder a la web 40

41 Dispositivos de acceso 41

42 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

43 Dispositivos de acceso Síntesis de voz Línea Braille Navegadores gráficos Navegadores de texto Dispositivos diversos; móviles Robots 43

44 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

45 Ampliador de pantalla ZoomText 45

46 Línea Braille Usuarios sordos no pueden utilizar síntesis de voz Copia impresa Una rejilla de ocho puntos 46

47 Línea Braille 47

48 PDA Braille 48

49 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

50 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

51 Épocas de la World Wide Web inicios crecimiento 2000 presente consolidación, racionalización 51

52 Las tres épocas de la web Inicios Boom comercial Racionalización 52

53 Las etapas Etapa romántica Etapa del negocio Etapa del diseño 53

54 Etapa romántica Casi todo era texto Principios del HTML y la Web el , FTP... Accesible desde sistemas no gráficos Primeros intentos sobre accesibilidad desde sistemas gráficos como Windows

55 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

56 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

57 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

58 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

59 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

60 Diseño accesible 60

61 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

62 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

63 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

64 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

65 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

66 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

67 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

68 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

69 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

70 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

71 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

72 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

73 Daltonismo Dificultad para diferenciar los colores De 10 a 20% de los usuarios varones tiene problema de percepción de color (Daltonismo) 73

74 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

75 Test de percepción de color A 75

76 Test de percepción de color B 76

77 Test de percepción de color C 77

78 Test de percepción de color D 78

79 Test de percepción de color E 79

80 Test de percepción de color: respuestas A B C D E F [puntos] [puntos] [puntos] 56 [puntos] 80

81 Uso de color Navegadores de voz no indican colores El uso de color es bueno Pero no debemos depender solo del color 81

82 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

83 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

84 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

85 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

86 3.2 Documentos validados Cree documentos que estén validados por las gramáticas formales publicadas. [Prioridad 2] 86

87 3.3 Hojas de estilo Utilice hojas de estilo para controlar la maquetación y la presentación. [Prioridad 2] 87

88 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

89 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

90 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

91 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

92 3.6 Listas Marque correctamente las listas y los ítem de las listas. [Prioridad 2] 92

93 3.7 Citas Marque las citas. No utilice el marcador de citas para efectos de formato tales como sangrías. [Prioridad 2] 93

94 Pauta 4. Identificar el idioma Use marcadores que faciliten la pronunciación o interpretación de texto abreviado o extranjero 94

95 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

96 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

97 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

98 Abreviaturas y acrónimos Las abreviaturas terminan con punto, Pta., Pte. Un acrónimo son las letras: ONCE, W3C, ONU 98

99 No son abreviaturas $ + ± Unidades de medida no ambiguas: kg, km Iniciales: J. M. García Acrónimos que se suelen usar sin expansión: ONCE, ONU 99

100 Técnica: Marcar abreviaturas HTML proporciona las etiquetas <ABBR> y <ACRONYM> WCAG: marcar la expansión primera vez No cuesta trabajo marcar todos 100

101 4.3 Idioma principal de la página Identifique el idioma principal de un documento. [Prioridad 3] 101

102 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

103 5.1 Identificar los encabezamientos En las tablas de datos, identifique los encabezamientos de fila y columna. [Prioridad 1] 103

104 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

105 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

106 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

107 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

108 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

109 5.5 Resúmenes de tablas Proporcione resúmenes de las tablas. [Prioridad 3] 109

110 5.6 Abreviaturas para etiquetas de encabezamiento Proporcione abreviaturas para las etiquetas de encabezamiento. [Prioridad 3] 110

111 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

112 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

113 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

114 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

115 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

116 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

117 Quién no utiliza scripts? Usuarios con línea Braille y navegador como Braillesurf o Lynx Robots de búsqueda (Google, AltaVista) 117

118 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

119 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

120 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

121 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

122 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

123 Pautas sobre cambios tiempodependientes Destello (7.1) Parpadeo (7.2) Movimiento (7.3) Actualización automática (7.4) Redirección (7.5) 123

124 Destello, punto Hasta que las aplicaciones de usuario permitan controlarlo, evite provocar destello en la pantalla [Prioridad 1] Frecuencias de 3 a 49 Hz 124

125 Destello, por qué no Epilepsia fotosensitiva Problemas cardiacos Dificultad para leer el resto de la página Por dificultad cognitiva 125

126 Advertencia La diapositiva siguiente puede provocar ataque epiléptico. Si eres susceptible a epilepsia, no debe visualizarla. 126

127 Parpadeo de 3Hz 127

128 Parpadeo, punto 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

129 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

130 Deshabilitar animaciones en IE 130

131 Deshabilitar animaciones en Opera 131

132 Movimiento, punto Hasta que las aplicaciones de usuario permitan congelar el movimiento de los contenidos, evite los movimientos en las páginas [Prioridad 2] 132

133 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

134 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

135 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

136 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

137 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

138 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

139 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

140 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

141 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

142 Pauta 10. Soluciones provisionales Utilice soluciones de accesibilidad provisionales de forma que las ayudas técnicas y los antiguos navegadores operen correctamente. 142

143 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

144 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

145 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

146 Texto en columnas 146

147 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

148 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

149 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

150 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

151 11.2 Evite características desfasadas Evite características desfasadas de las tecnologías W3C. [Prioridad 2]. 151

152 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

153 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

154 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

155 12.1 Títulos de los marcos Titule cada marco para facilitar la identificación y navegación de los mismos. [Prioridad 1] 155

156 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

157 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

158 12.4 Asociar etiquetas con sus controles Asocie explícitamente las etiquetas con sus controles. [Prioridad 2]. Formularios 158

159 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

160 13.1 Identifique el objetivo de cada vínculo Identifique claramente el objetivo de cada vínculo. [Prioridad 2] 160

161 13.2 Metadatos Proporcione metadatos para añadir información semántica a las páginas y sitios. [Prioridad 2] 161

162 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

163 13.4 Uso consistente de mecanismos de navegación Utilice los mecanismos de navegación de forma consistente. [Prioridad 2]. 163

164 13.5 Barra de navegación Proporcione barras de navegación para destacar y dar acceso al mecanismo de navegación. [Prioridad 3] 164

165 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

166 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

167 13.8 Destacar información importante Localice la información destacada al principio de los encabezamientos, párrafos, listas, etc. [Prioridad 3] 167

168 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

169 13.10 Saltar sobre ASCII art Proporcione un medio para saltar sobre un ASCII art de varias líneas [Prioridad 3] 169

170 Pauta 14. Documentos claros y simples Asegure que los documentos son claros y simples para que puedan ser más fácilmente comprendidos. 170

171 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

172 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

173 14.3 Estilo consistente Cree un estilo de presentación que sea consistente en todas las páginas. [Prioridad 3] 173

174 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

175 Técnicas fundamentales Equivalentes textuales El uso del color Internacionalización 175

176 Técnicas HTML Marcos Tablas Formularios 176

177 Marcos Son necesarios los marcos? Navegar por marcos con el navegador de voz Soluciones para marcos 177

178 Tablas Estructuran la información de forma visual Presentan problemas especiales para usiuarios no visuales Pauta 5. Tablas que se transformen correctamente Punto

179 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

180 Una tabla anidada Celda Celda 6 Celda 7 Celda 8 Celda 9 180

181 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,

182 Accesibilidad de los formularios Accesibilidad para: Comprender el propósito del formulario Navegar por los controles Dar los datos sin equivocarse 182

183 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

184 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

185 Un formulario inaccesible Formateado con tablas anidadas Controles separados de sus etiquetas No se asocia explícitamente la etiqueta con el control 185

186 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

187 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

188 Técnicas CSS Importancia de la separación de contenido y formato Unidades de medida relativas Posicionamiento absoluto 188

189 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

190 Elementos incrustados Applets ActiveX Multimedia Macromedia Flash Adobe PDF (Acrobat) 190

191 Macromedia Flash Puede considerarse Flash accesible? Como mejorar la accesibilidad de Flash 191

192 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

193 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

194 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

195 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

196 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

197 Software de creación de contenidos, definición Puede ser utilizados por personas con discapacidad Permite la creación de contenidos Web accesibles 197

198 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

199 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

200 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

201 Metodologías Concretar los procedimientos de validación Ejemplo de la WAI 201

202 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

203 Promoción de la accesibilidad El marco normativo Iniciativas en el sector público Buenas prácticas Diseño para el futuro 203

204 La declaración de accesibilidad Declaración pública Publicada en el mismo sitio web Difundir entre clientes y la prensa 204

205 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

206 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

207 WAI SIDAR Recursos de información sobre accesibilidad Fundosa Teleservicios 207

208 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 Libro Diseño Accesible de Páginas Web 208

209 SIDAR Seminario Iberoamericano sobre Discapacidad y Accesibilidad en la Red Sede en España En la web 209

210 Fundosa Teleservicios Consultoría de Accesibilidad Servicios de Formación Certificación de accesibilidad Desarrollo de sitios web Hosting Empleo para discapacitados 210

211 Diseño Accesible de Páginas Web Textos de la WAI Traducidos al castellano Primera edición agotada Nueva edición en

212 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) Bobby bobby.watchfire.com/ 212