Accesibilidad en la Web: de WCAG 1.0 a WCAG 2.0
Lugar de impartición: Laboratorio de Medios Didácticos de la
Universidad de Colima (México)
Fecha: Abril 2008
Profesores: Sergio Luján Mora
Materiales:
RUA: Accesibilidad en la Web: de WCAG 1.0 a WCAG 2.0
Objetivos
- Principales:
- Que el alumno reconozca la necesidad de crear sitios web accesibles.
- Que el alumno conozca las normas de accesibilidad en la Web que existen en la actualidad.
- Que el alumno sea capaz de crear un sitio web accesible.
- Que el alumno sea capaz de evaluar el grado de accesibilidad de un sitio web.
- Secundarios:
- Que el alumno conozca los distintos tipos de discapacidad que existen y su repercusión en el acceso a la Web.
- Que el alumno conozca las ayudas técnicas que emplean las personas con discapacidad para utilizar un ordenador.
- Que el alumno conozca las hojas de estilo en cascada (CSS).
- Que el alumno conozca las herramientas que le pueden ayudar a desarrollar un sitio web accesible.
Apuntes
A partir de las notas sobre el curso de accesibilidad (por J. Román Herrera, SIABUC-Telematica, Universidad de Colima)
Sesión 1
- Presentación (PDF):
Presentación del curso
- Presentación (PDF):
¿Qué es la accesibilidad?
- Definición de accesibilidad (Wikipedia):
La accesibilidad es el grado con el que algo puede ser usado, visitado o accedido por todas las personas,
independientemente de sus capacidades técnicas o físicas.
- Los 7 Principios del
Diseño Universal o Diseño para Todos:
- Uso equiparable
- Uso flexible
- Simple e intuitivo
- Información perceptible
- Con tolerancia al error
- Que exija poco esfuerzo físico
- Tamaño y espacio para el acceso y uso
- Normativa legal:
- Presentación (PDF): Accesibilidad en la Web
- Definición de accesibilidad web: ¿Qué es la Accesibilidad Web?
- ¿Cómo afectan las diferentes discapacidades al acceso a la Web? El W3C ha publicado el documento
How People with Disabilities Use the Web
donde trata esta cuestión en el apartado
3. Different Disabilities that Can Affect Web Accessibility:
- Discapacidad visual: imágenes o elementos multimedia sin texto alternativo; el tamaño del texto
muy reducido; combinaciones de colores con poco contraste.
- Discapacidad auditiva: ausencia de transcripciones y descripciones sonoras del audio o de la banda sonora
de los vídeos; textos largos y complejos.
- Discapacidad física: interfaces de usuario que sólo se pueden utilizar con ratón; enlaces y controles
de formulario muy pequeños.
- Discapacidad del habla: no supone un grave problema en la navegación por la Web hoy en día, ya que
no se emplea el reconocimiento de la voz en los sitios web.
- Discapacidad cognitiva y neurológica: textos largos y complejos; ausencia de un mapa del sitio web; ausencia
de descripciones y ayudas para interpretar los controles de un formulario; inconsistencias entre distintas páginas
de un mismo sitio web.
- Múltiples discapacidades: cualquiera de las anteriormente citadas.
- Situaciones relacionadas con el envejecimiento: normalmente, problemas relacionados con la discapacidad visual,
la discapacidad auditiva y la discapacidad física.
- Discapacidad tecnológica: sistemas operativos antiguos; navegadores alternativos; ancho de banda de comunicación
por Internet bajo; aunsencia de un plugin para reproducir ciertos contenidos; dispositivo de visualización de
pequeño tamaño.
- Recurso de información: Fundación SIDAR
- Presentación informal de las
Pautas de Accesibilidad al Contenido en la Web 1.0
del W3C:
- Proporcione alternativas equivalentes para el contenido visual y auditivo
- No se base sólo en el color
- Utilice marcadores y hojas de estilo y hágalo apropiadamente
- Identifique el idioma usado
- Cree tablas que se transformen correctamente
- Asegúrese de que las páginas que incorporen nuevas tecnologías se transformen correctamente
- Asegure al usuario el control sobre los cambios de los contenidos tempo-dependientes
- Asegure la accesibilidad directa de las interfaces incrustadas
- Diseñe para la independencia del dispositivo
- Utilice soluciones provisionales
- Utilice las tecnologías y pautas W3C
- Proporcione información de contexto y orientación
- Proporcione mecanismos claros de navegación
- Asegúrese de que los documentos sean claros y simples
- No es correcto realizar una versión accesible alternativa.
¿Por qué?
Versión accesible: utilizar sólo en caso de emergencia.
- Pauta 11: Utilice las tecnologías y pautas W3C.
11.4 Si, tras todos los esfuerzos aplicados, no puede crear una página accesible, proporcione un enlace a una página Web alternativa
que use tecnologías W3C, sea accesible, tenga información (o funcionalidad) equivalente y se actualice a la par que la página original no accesible [Prioridad 1].
- Ejercicio: creación de páginas de prueba que cumplen las pautas de accesibilidad
- Uso del validador de XHTML del W3C: Markup Validation Service.
Validar el XHTML y colocar los logos del W3C de XHTML correcto.
- La situación en México:
Manifiesto Nuevo León sobre Usabilidad y Accesibilidad para los Portales Gubernamentales Mexicanos
Sesión 2
- Ejemplos de página con estilos alternativos que son reconocidos por el Firefox:
- Declaracion de Accesibilidad en Sitios Web:
es una página que se incorpora a los sitios web donde se describen las caracteristicas
de accesibilidad que tiene el sitio.
Ejemplos:
- Ejercicio: creación de una barra (menú) de navegación como una lista en forma horizontal con CSS.
- Recursos sobre CSS:
- Pauta 2: No se base sólo en el color.
2.1 Asegúrese de 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].
2.2 Asegúrese de 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 en pantallas en blanco y negro [Prioridad 2 para las imágenes. Prioridad 3 para texto].
- Recursos sobre el contraste de los colores:
- Pauta 13: Proporcione mecanismos claros de navegación.
13.1 Identifique claramente el objetivo de cada vínculo [Prioridad 2].
¿Qué problema exite si el texto de los enlaces es incorrecto? Las personas que emplean un lector de pantalla
utilizan mucho la lista de enlaces. El texto tiene que ser significativo fuera del contexto, no hay que utilizar
"pulsa aquí", "más" o "más información".
-
Recursos sobre el texto de los enlaces:
- Presentación (PDF): Cómo navegan los discapacitados
Ejemplos de software y de varios dispositivos de entrada y de salida
para auxiliar en la navegacion, lectores de pantalla, magnificadores, sintetizadores de voz,
teclados y ratones especiales, mouses, prótesis, lectura de la mente, etc.
Sesión 3
- Presentación (PDF): WAI: Web Accessibility Initiative
- W3C: qué es, quienes lo integran, socios fundardores.
- WAI: qué es, estructuración en grupos de trabajo (G1, ..., G5),
los pilares de la accesibilidad web.
- Pautas de accesibilidad:
- Guía breve para crear sitios web accesibles:
10 consejos rapidos de accesibilidad para diseños de sitios web.
- Imágenes y animaciones: Use el atributo alt para describir la función de cada elemento visual.
- Mapas de imagen: Use el elemento map y texto para las zonas activas.
- Multimedia: Proporcione subtítulos y transcripción del sonido, y descripción del vídeo.
- Enlaces de hipertexto: Use texto que tenga sentido leído fuera de contexto. Por ejemplo, evite "pincha aquí".
- Organización de las páginas: Use encabezados, listas y estructura consistente. Use CSS para la maquetación donde sea posible.
- Figuras y diagramas: Describalos brevemente en la pagina o use el atributo longdesc.
- Scripts, applets y plug-ins: Ofrezca contenido alternativo si las funciones nuevas no son accesibles.
- Marcos: Use el elemento noframes y títulos con sentido.
- Tablas: Facilite la lectura línea a línea. Resuma.
- Revise su trabajo: Verifique. Use las herramientas, puntos de comprobación y pautas de http://www.w3.org/TR/WCAG/.
- Uso del validador de CSS del W3C: CSS Validation Service.
Validar los CSS de los ejercicios hecho y colocar los logos del W3C de CSS correcto.
- Descripcion de las Pautas de Accesibilidad al Contenido:
cómo están estructuradas las pautas, los documentos que la componen, las tecnicas y los 3 niveles
de prioridad.
- Presentación (PDF):
Pautas de accesibilidad al contenido en la Web 1.0: paso a paso
- Ejemplos de prioridad 1:
equivalentes en texto de lementos no textuales (alt y longdesc),
proporcionar información alternativa para datos marcados con un color
(ejemplo: lista de productos con código de colores para el descuento existente).
- Ejemplos de prioridad 2:
asegurar que las combinaciones de color de fondo y primer plano poseen suficiente contraste,
usar unidades relativas en vez de absolutas.
- Ejemplos de prioridad 3:
especificar el significado de las abreviaturas,
proporcionar un orden lógico a los elementos (tabindex),
proporcionar teclas de acceso rápido para ciertos elementos (accesskey).
- Las pautas se pueden agrupar en 2 grupos:
- Asegurar una transformacion correcta: de la 1 a la 11, más tecnicas.
- Hacer comprensible y navegable el contenido: de la 12 a la 14, más generales.
- La estructura generica de las pautas contiene:
- Número de la pauta
- Exposicion
- Fundamento
- Puntos de verificacion
- Prioridad
- Técnicas: Fundamentales, HTML, CSS
- Traducción al español de las pautas:
Pautas de Accesibilidad al Contenido en la Web 1.0
- Ejercicios con el JAWS:
demostración de las características basicas de JAWS, ejercicio de como lee las paginas web,
creación de una pagina accesible pequeña para ser usada con el JAWS.
- Pauta 9: Diseñe para la independencia del dispositivo.
9.5 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]
Para definir un atajo de teclado en HTML se emplea el atributo accesskey que se puede emplear
con las siguientes etiquetas: a, area, button, input, label, legend, textarea.
No existe un estándar, pero en el Reino Unido existe una guía del gobierno:
2.4.4 UK Government accesskeys standard
- Ejercicio: revisar individualmente las pautas y comentarlas con el resto de los compañeros.
Sesión 4
- Pautas de Accesibilidad: Niveles de Conformidad
- A, cumple con todos los puntos de verificación de prioridad 1
- AA, cumple con todos los puntos de verificación de prioridades 1 y 2
- AAA, cumple con los 3 niveles de prioridad
- Análsis del informe del Reino Unido que indica
los "8 puntos más violados" de las Pautas de Accesibilidad del W3C.
- Ejemplos de sitios web con ayudas de vídeo con el lenguaje de signos para personas sordas:
- ¿Cómo validar la accesibilidad? Método propuesto por el W3C en
Apéndice A: Validación:
- Utilice una herramienta de accesibilidad automática y una herramienta de validación del navegador. Por favor, compruebe que el software de las herramientas trata todos los problemas de accesibilidad, como la significación del texto del vínculo, la aplicabilidad de un equivalente textuale, etc.
- Valide la sintaxis (Por ejemplo, HTML, XML, etc.).
- Valide las hojas de estilo (Por ejemplo, CSS).
- Utilice un navegador sólo-texto o un emulador.
- Utilice varios navegadores gráficos con:
- Sonidos y gráficos cargados.
- Gráficos no cargados.
- Sonidos no cargados.
- Sin ratón.
- Marcos, scripts, hojas de estilo y applets no cargados.
- Utilice varios navegadores, antiguos y nuevos.
- Utilice un navegador por voz, un lector de pantalla, un software de magnificación, un visualizador pequeño, etc.
- Utilice verificadores de ortografía y gramática. Quien lea la página con un sintetizador de voz puede no ser capaz de descifrar lo que reproduce el sintetizador por un error ortográfico. Eliminando problemas gramaticales se incrementa la comprensión.
- Revise el documento para obtener claridad y simplicidad. Las estadísticas de legibilidad, tales como las generadas por algunos procesadores de textos, pueden ser útiles indicadores de claridad y simplicidad. Mejor aún, pida a un experimentado editor (humano) que revise la claridad del texto escrito. Los editores pueden también incrementar la utilidad de un texto identificando potenciales problemas interculturales que pueden surgir a causa del lenguaje o los iconos usados.
- Invite a personas con discapacidad a revisar los documentos. Usuarios discapacitados expertos y noveles proporcionarán una retroalimentación valiosa sobre la accesibilidad o los problemas de uso y su gravedad.
- Recursos:
- Navegador Opera
- Navegador de solo texto Lynx
- Página web para probar una página web en distintos navegadores Browsershots
- Diferencias entre la seccion 508 y las pautas de accesibilidad del W3C: son mínimas.
Mapping Comparison Between
U.S. Section 508 Standards (Combined Subparts B,C & D) and
UAAG 1.0 Requirements & Priorities
- Presentación (PDF):
Herramientas
- Herramientas de autor: Macromedia Dreamweaver MX o superior
- Activar opciones de validacion y de accesibilidad
- Informes (seleccion de pautas y puntos a averificar): de enlaces rotos, de caracteristicas de accesibildad
- Plantillas de accesibilidad cuando se crea un nuevo documento
- Conversores de recursos a paginas web:
- Situacion actual de los navegadores web: poco soporte a la accesibilidad, incluyen aumento del texto
(algunos aumento de toda la página) y navegación por teclado
- Comparación de características de accesibilidad de los navegadores actuales:
- Internet Explorer 7: zoom de página completa y acceso por teclado
- Mozilla Firefox: zoom de texto, activación/desactivación de estilos (CSS)
- Opera: sintetizador de voz, control por voz, listas de enlaces, zoom de página completa, estilos alternativos
- Safari: zoom de texto, definición del tamaño mínimo del texto
- Extensiones de desarrollo para los navegadores:
- Revisores de la accesibilidad:
para hacer una revision automatica; es necesario efectuar tambien una revision manual por un experto.
- Ejercicio: realizar una pagina web sencilla que contenga tablas accesibles
- Pauta 5. Cree tablas que se transformen correctamente.
5.1 En las tablas de datos, identifique los encabezamientos de fila y columna. [Prioridad 1]
5.2 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]
- Con JAWS, pulsar Ctr+Ins+T para ver el lista de tablas de una página;
para moverse entre las celdas, pulsar Alt+Ctrl+Flechas de dirección.
- Recurso de información: consejos sobre usabilidad, la página de
Jakob Nielsen useit.com.
Sesión 5
- Ejercicio: desarrollo de formularios accessibles
- Puntos de verificación:
9.4 Cree un orden lógico para navegar con el tabulador a través de vínculos, controles de formulario y objetos. [Prioridad 3]
9.5 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]
10.2 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, asegúrese de que la etiqueta está colocada adecuadamente. [Prioridad 2]
12.3 Divida los bloques largos de información en grupos más manejables cuando sea natural y apropiado. [Prioridad 2]
12.4 Asocie explícitamente las etiquetas con sus controles. [Prioridad 2]
- Ejercicio: utilización de la versión descargable de
TAW
- Presentación (PDF):
Problemas de WCAG 1.0
- Problemas de las
Pautas de Accesibilidad al Contenido en la Web 1.0:
- WCAG 1.0 fue publicado en 1999
- WCAG 2.0 no acaba de llegar, lleva un retraso de varios años
- Solución: WCAG Samurai,
iniciativa particular de un grupo de desarrolladores que define una serie de correcciones para WCAG 1.0
- Presentación (PDF):
WCAG 2.0
- Presentación (PDF):
WAI-ARIA
- Las aplicaciones ricas en Internet
(RIA, Rich Internet Application)
son el nuevo paradigma de página web. Se basan en el empleo de diversas tecnologías:
Adobe Flash y Adobe Flex de Adobe, AJAX, OpenLaszlo, Silverlight de Microsoft, JavaFX Script de Sun Microsystems y Bindows de MB Technologies.
- Problema de RIA: son muy poco accesibles, los lectores de pantalla tienen graves problemas
para detectar los cambios dinámicos en el contenido HTML
- Caso concreto: AJAX
- Accesibilidad y AJAX:
