Accesibilidad Web

De Por un Mundo Accesible

Según Wikipedia "la accesibilidad web se refiere a la capacidad de acceso a la Web y a sus contenidos por todas las personas independientemente de la discapacidad (física, intelectual o técnica) que presenten o de las que se deriven del contexto de uso (tecnológicas o ambientales). Esta cualidad está íntimamente relacionada con la usabilidad."

Tabla de contenidos 1 Estándares 1.1 WCAG 1.0 1.1.1 Prioridades 1.1.2 Pautas 1.1.3 Validación 1.1.3.1 Validación automática 1.1.3.2 Validación manual

[editar] Estándares

La W3C (World Wide Web Consortium) ha escrito una serie de recomendaciones a seguir por los desarrolladores web para permitir la accesibilidad de las cuales existen dos versiones.

[editar] WCAG 1.0

En la pagina Web Content Accessibility Guidelines 1.0 (Traducción al español) donde se exponen 14 pautas con tres tipos de prioridades.

[editar] Prioridades

1. Prioridad 1: el desarrollador TIENE que satisfacer este punto de verificación, de lo contrario uno o mas grupos de personas no podran ver la información de la página, satisfacer este punto es un requerimiento básico para que algunos grupos puedan ver el contenido.
2. Prioridad 2: el desarrollador DEBE satisfacer este punto de verificación, de lo contrario uno o mas grupos de personas tendran dificultades para ver la información de la página, satisfacer este punto eliminará barreras de acceso a los documentos web.
3. Prioridad 3: el desarrollador PUEDE satisfacer este punto de verificación, de lo contrario uno o más grupos de personas tendran alguna dificultad para ver la información de la pagina, satisfacer este punto mejorará la accesibilidad del contenido.

[editar] Pautas

• Pauta 1: Proporcione alternativas equivalentes para el contenido visual y auditivo. Es necesario proporcionar contenido textual que cumpla la misma función del las imagenes, audio o videos presentes en el documento. Esta pauta tiene 5 puntos de comprobación:

1. Colocar texto alternativo a las imagenes, sonidos o videos que se muestran en las paginas web [prioridad 1].
2. Colocar enlaces redundantes en formato texto para cada zona activa de un mapa de imágenes [prioridad 1].
3. Colocar una descripción auditiva de las presentaciones multimedia [prioridad 1].
4. Para toda presentación multimedia basada en tiempo(como una película o una animación) deben sincronizar alternativas equivalentes (subtitulos o descripciones) [prioridad 1].
5. Hasta que las aplicaciones de usuario interpreten el texto equivalente a los vinculos de mapa de imagen del cliente, proporcione vinculos de texto redundantes [prioridad 3].

• Pauta 2: No se base sólo en el color. Debe asegurarse que los gráficos y el texto se vean sin color. Esta pauta tiene 2 puntos de comprobación:

1. Asegurese que todas la información transmitida por colores tambien se muestre sin color [prioridad 1].
2. Asegurese que el contenido de la pagina y el fondo de la misma tengan un buen contraste, a fin de que puedan ser vistas por personas con dificultades para distinguir colores o por monitores monócromos [prioridad 2 pra las imágenes y 3 para texto].

• Pauta 3. Utilice etiquetas y hojas de estilo y hágalo apropiadamente. marque los elementos de la página apropiadamente y diseñe la página con hojas de estilo en vez de etiquetas. Esta pauta tiene 7 puntos de comprobación:

1. Cuando exista una etiqueta apropiada, usela en vez de imágenes [prioridad 2].
2. Cree documentos validados por gramaticas formales publicadas [prioridad 2].
3. Haga la maquetación del documento con hojas de estilo [prioridad 2].
4. Utilice valores relativos (como em o porcaentuales) en lugar de absolutos (como centimetros o pixeles) en las hojas de estilo o etiquetas [prioridad 2].
5. Utilice los encabezados para crear una estructura lógica de acuerdo a las especificaciones [prioridad 2].
6. Etiquete correctamente las listas y sus items correctamente. Use las etiquetas OL, UL y DL de manera adecuada [prioridad 2].
7. Etiquete las citas con los elementos Q y BLOCKQUOTE [prioridad 2].

• Pauta 4. Identifique el idioma usado. use etiquetas que faciliten la interpretación de texto abreviado o extranjero. Esta pauta tiene tres puntos de comprobación:

1. Idantifique claramente los cambios en el idioma de un texto introducido con el atributo lang [prioridad 1].
2. Especifique las expansiones de las abreviaturas usando el atributo title de los elementos ABBR y ACRONYM [prioridad 3].
3. Identifique el idioma principal de un documento, con el atributo lang de la etiqueta HTML o xml:lang en lod documentos XML [prioridad 3].

• Pauta 5. Cree tablas que se transformen correctamente. asegurese que las tablas tienen las etiquetas necesarias para que puedan ser transformadas por navegadores accesibles u otras aplicaciones. Esta pauta tiene 6 puntos de comprobación:

1. En las tablas de datos, identifique los encabezamientos de fila y columna [prioridad 1].
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].
3. No utilice tablas para maquetar, a menos que la tabla tenga sentido cuando se alinee. Por otro lado, si la tabla no tiene sentido, proporcione una alternativa equivalente (la cual debe ser una versión alineada) [prioridad 2].
4. Si se utiliza una tabla para maquetar, no utilice marcadores estructurales para realizar un efecto visual de formato [prioridad 2].
5. Proporcione resúmenes de las tablas [prioridad 3].
6. Proporcione abreviaturas para las etiquetas de encabezamiento [prioridad 3].

• Pauta 6. Asegúrese de que las páginas que incorporan nuevas tecnologías se transformen correctamente. Asegúrese de que las páginas son accesibles incluso cuando no se soportan las tecnologías más modernas o éstas estén desconectadas. Esta pauta tiene 5 puntos de comprobación:

1. Organice el documento de forma que pueda ser leído sin hoja de estilo [prioridad 1].
2. Asegúrese de que los equivalentes de un contenido dinámico son actualizados cuando cambia el contenido dinámico [prioridad 1].
3. Asegúrese de que las páginas sigan siendo utilizables cuando se desconecten o no se soporten los scripts, applets u otros objetos programados [prioridad 1].
4. Para los scripts y applets, asegúrese de que los manejadores de evento sean independientes del dispositivo de entrada [prioridad 2].
5. Asegúrese de que los contenidos dinámicos son accesibles o proporcione una página o presentación alternativa [prioridad 2].

• Asegure al usuario el control sobre los cambios de los contenidos tempo-dependientes. Asegúrese de que los objetos o páginas que se mueven, parpadean, se desplazan o se actualizan automáticamente, puedan ser detenidos o parados. Esta pauta tiene 5 puntos de comprobación:

1. Hasta que las aplicaciones de usuario permitan controlarlo, evite provocar destellos en la pantalla [prioridad 1].
2. Hasta que las aplicaciones de usuario permitan controlarlo, evite el parpadeo del contenido [prioridad 2].
3. Hasta que las aplicaciones de usuario permitan congelar el movimiento de los contenidos, evite los movimientos en las páginas [prioridad 2].
4. Hasta que las aplicaciones de usuario proporcionen la posibilidad de detener las actualizaciones, no cree páginas que se actualicen automáticamente de forma periódica [prioridad 2].
5. Hasta que las aplicaciones de usuario proporcionen la posibilidad de detener el redireccionamiento automático, no utilice marcadores para redirigir las páginas automáticamente [prioridad 2].

• Pauta 8. Asegure la accesibilidad directa de las interfaces de usuario incrustadas. Asegure que la interfaz de usuario sigue los principios de un diseño accesible: funcionalidad de acceso independiente del dispositivo, teclado operable, voz automática, etc. esta pauta tiene 1 punto de comprobación:

1. 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.].

• Pauta 9. Diseñe para la 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. Esta pauta tiene 5 puntos de comprobación:

1. 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].
2. Asegúrese de que cualquier elemento que tiene su propia interfaz pueda manejarse de forma independiente del dispositivo [prioridad 2].
3. Para los "scripts", especifique manejadores de evento lógicos en vez de manejadores de evento dependientes de dispositivos [prioridad 2].
4. Cree un orden lógico para navegar con el tabulador a través de vínculos, controles de formulario y objetos [prioridad 2].
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].

• Pauta 10. Utilice soluciones provisionales. Utilice soluciones de accesibilidad provisionales de forma que las ayudas técnicas y los antiguos navegadores operen correctamente. Esta pauta tieie 5 puntos de comprobación:

1. 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].
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].
3. 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 envoltorio de palabras [prioridad 3].
4. 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].
5. 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].

• Pauta 11. Utilice las tecnologías y pautas W3C. Utilice tecnologías W3C (de acuerdo con las especificaciones) y siga las pautas de accesibilidad. Esta pauta tiene 4 puntos de comprobación:

1. Utilice tecnologías W3C cuando estén disponibles y sean apropiadas para la tarea y use las últimas versiones que sean soportadas [prioridad 2].
2. Evite características desaconsejadas por las tecnologías W3C [prioridad 2].
3. Proporcione la información de modo que los usuarios puedan recibir los documentos según sus preferencias [prioridad 3].
4. 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 (o funcionalidad) equivalente y sea actualizada tan a menudo como la página (original) inaccesible [prioridad 1].

• Pauta 12. Proporcione 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. Esta pauta tiene 4 puntos de comprobación:

1. Titule cada marco para facilitar su identificación y navegación [prioridad 1].
2. Describa el propósito de los marcos y como éstos se relacionan entre sí, si no resulta obvio solamente con el título del marco [prioridad 2].
3. Divida los bloques largos de información en grupos más manejables cuando sea natural y apropiado [prioridad 2].
4. Asocie explícitamente las etiquetas con sus controles [prioridad 2].

• Pauta 13. Proporcione mecanismos claros de navegación. Proporcione mecanismos de navegación claros y coherentes para incrementar la probabilidad de que una persona encuentre lo que está buscando en un sitio. Esta pauta tiene 10 puntos de comprobación:

1. Identifique claramente el objetivo de cada vínculo [prioridad 2].
2. Proporcione metadatos para añadir información semántica a las páginas y sitios [prioridad 2].
3. Proporcione información sobre la maquetación general de un sitio [prioridad 2].
4. Utilice los mecanismos de navegación de forma coherente [prioridad 2].
5. Proporcione barras de navegación para destacar y dar acceso al mecanismo de navegación [prioridad 3].
6. Agrupe los vínculos relacionados, identifique el grupo (para las aplicaciones de usuario) y, hasta que las aplicaciones de usuario lo hagan, proporcione una manera de evitar el grupo [prioridad 3].
7. Si proporciona funciones de búsqueda, permita diferentes tipos de búsquedas para diversos niveles de habilidad y preferencias [prioridad 3].
8. Localice al principio de los encabezamientos, párrafos, listas, etc, la información que los diferencie [prioridad 3].
9. Proporcione información sobre las colecciones de documentos [prioridad 3].
10. Proporcione una manera de saltar sobre un ASCII art de varias líneas [prioridad 3].

• Pauta 14. Asegúrese de que los documentos sean claros y simples. Asegure que los documentos son claros y simples para que puedan ser más fácilmente comprendidos. Esta pauta tiene 3 puntos de comprobación:

1. Utilice el lenguaje apropiado más claro y simple para el contenido de un sitio [prioridad 1].
2. Complemente el texto con presentaciones gráficas o auditivas cuando ello facilite la comprensión de la página [prioridad 3].
3. Cree un estilo de presentación que sea coherente para todas las páginas [prioridad 3].

[editar] Validación

La validadción de un documento web se miden con tres puntos de conformidad

• Nivel de Conformidad "A": todos los puntos de verificación de prioridad 1 se satisfacen.
• Nivel de Conformidad "Doble A": todos los puntos de verificación de prioridad 1 y 2 se satisfacen.
• Nivel de Conformidad "Triple A": todos los puntos de verificación de prioridad 1,2 y 3 se satisfacen.

El documento da varias tecnicas para validar un documento web, en este link se dan varias tecnicas para validar los documentos.

[editar] Validación automática

La W3C recomienda:

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

Para ello existen los siguientes validadores automaticos:

• TAW es un sistema creado por La [ http://www.fundacionctic.org/web/contenidos/es Fundación CTIC] (Centro Tecnológico de la Información y de la Comunicación) el cual hace un análisis de las páginas web basados en las WCAG 1.0, TAW tiene varias versiones de su sistemas:

1. TAW3 es una aplicación descargable que permite analizar desde una pagina hasta un sitio web completo.
2. TAW3 Online te permite realizar la comprobación introduciendo directamente el sitio web, te da un reporte general de la accesibilidad de dicha pagina.
3. TAW3 WebStart es igual a la aplicación TAW3 pero que trabaja con la tecnojogía Java Web Start el cual permite tener siempre la ultima version disponible.
4. TAW3 en un click es una extensión de firefox que te permite analizar la pagina a travez de un simple click en el ícono ubicado en la barra de estado.

• HERA es un sistema web de codigo abierto que analiza las paginas web de acuerdo a las WCAG 1.0.

[editar] Validación manual

La validacion automatica no es suficiente para para verificar que todo el documento sea accesible, los mismos validadores automaticos mencionaran algunos sectores del documento que se debera verificar manualmente algunos sectores del documento; la W3C recomienda

• Valide la sintaxis (Por ejemplo, HTML, XML, etc.).

1. http://validator.w3.org/ valida automaticamente la sintaxis HTML de un documento.
2. http://www.w3.org/2001/03/webdata/xsv valida la sintaxis XML de un documento.

• Valide las hojas de estilo (Por ejemplo, CSS).

1. http://jigsaw.w3.org/css-validator/ valida las hojas de estilo de un documento.

• Utilice un navegador sólo-texto o un emulador.

1. Lynx es un navegador web basado en texto, libre y multiplataforma.
2. http://www.yospace.com/spedemo.html Emula mas de 30 navegadores web para celulares.

* Utilice varios navegadores gráficos con:

1. Sonidos y gráficos cargados.
2. Gráficos no cargados.
3. Sonidos no cargados.
4. Sin ratón.
5. Marcos, scripts, hojas de estilo y applets no cargados.

WebDeveloper es una extension para firefox que permite entre otras cosas deshabilitar varios elementos de la pagina y asi comprobar si es aun accesible.

• Utilice varios navegadores, antiguos y nuevos.

1. http://browsershots.org/ muestra el resultado del diseño de las paginas web en distintas versiones de navegadores para distintos sistemas operativos.

• Utilice un navegador por voz, un lector de pantalla, un software de magnificación, un visualizador pequeño, etc.

1. http://wiki.tiflolinux.org/index.php?title=Orca/Firefox Integrando Orca en Firefox 3.

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