Tabla de Contenido
Revisando la accesibilidad: Los 12 fallos más comunes
Cuando las barbas de tu vecino...
Informe sobre la accesibilidad web de la Disability Right Comission (DRC) del Reino Unido. Presenta los 8 fallos más comunes:
- Texto equivalente para todo elemento no textual
- combinaciones de color del fondo y del primer plano.
- Páginas que no pueden seguir siendo usadas cuando los scripts, applets u otros objetos de programación se desconectan o no son soportados.
- Contenido en movimiento, que no puede detener el usuario a voluntad.
- Generación de ventanas, sin informar antes al usuario.
- Falta de estructuración. Uso incorrecto de elementos de encabezado y bloques de información largos, no divididos en grupos manejables de forma natural y apropiada.
- Objetivo de cada enlace que no se identifica claramente.
- lenguaje poco claro o complejo, y abreviaturas y acrónimos sin marcar.
A estos podemos añadir los siguientes:
- Resolución mínima definida por el autor.
- Diseño heterogéneo en los sistemas de navegación o presentación de los contenidos
- Formularios mal etiquetados.
- Marcado espurio: tablas, citas, listas, encabezados, usados para efectos de disposición o presentación. Atajos de teclado mal definidos. Metadatos inexistentes o usados para efectos de posicionamiento.
Utilizaremos como ejemplo el sitio: El camino de Santiago
No puede tomarse la lista del informe como la lista "esencial", "definitiva", o "de oro", de la accesibilidad. No creo que pudiese reemplazar a la "Guía Breve" del W3C, aunque tampoco parece que esa guía sea especialmente útil en estos momentos. Evidentemente ese no es un dato muldiamente extrapolable y debemos entenderlo como extrictamente relacionado con la muestra tomada, que se refiere a un tipo de sitios web determinados y de un espacio geográfico concreto. Pero de todas maneras es interesante pues, sobretodo, indica cuáles son los errores más comunes, encontrados en esa muestra.
Para tener más información sobre su contenido y las propuestas que hace, véase el análisis del informe que hice para el programa de radio "el tren".
El sitio El camino de Santiago ha sido creado por Ricardo Fernández especialmente para el Seminario "Rampas en la Web" y para esta Conferencia, de manera que incluyera determinados fallos y sirviera para los ejemplos y prácticas.
Textos alternativos
¡Pero si todas las imágenes tienen alt!
Hoy en día la mayoría de los desarrolladores incluyen el atributo "alt", pero la cuestión es si el valor del atributo es, o no, apropiado como equivalente de la imagen.
Ejemplo: Sección "Historia"
Las herramientas de revisión NO pueden determinar si en una página los textos alternativos son correctos o no.
- Usuarios:
- No sólo las personas ciegas,
- también personas que navegan sin descargarse las imágenes debido al ancho de banda o dispositivo que utilizan (pda, teléfono móvil, etc.)
- y personas con algunos tipos de deficiencias cognitivas.
Puede consultarse la ayuda extensa de HERA para conocer otros casos de utilización del texto alternativo de manera correcta. Por ejemplo, qué hacer con la viñetas, elementos decorativos, vídeos, etc.
Combinaciones de color
¡Yo lo veo perfectamente!
Ejemplo: Sección "Historia"
- Falta de contraste en imágenes
- Falta de contraste en textos
Algunas herramientas de revisión automática pueden detectar algunos fallos de contraste de color, pero siempre es necesario utilizar herramientas complementarias y hacer una revisión manual de cada elemento que contenga color.
- Usuarios:
- No sólo personas con deficiencias de percepción del color (+ 10% población),
- también personas con monitores monocromos o de baja resolución (pda, teléfono móvil, - antiguos- etc.)
- y en determinadas circunstancias de iluminación.
HERA proporciona una herramienta adicional para la comprobación del contraste de color definido en las hojas de estilo, en el momento en que se revisa el punto 2.2. Pero hay otras herramientas que pueden usarse para hacer esa comprobación, por ejemplo:
Scripts, applets, objetos...
¡Pero si todo el mundo tiene Java y Flash!
Ejemplo: Sección "Caminos", "Enlaces" e "Historia"
La revisión manual es imprescindible, porque también hay que determinar si la funcionalidad proporcionada por el script no se presenta por otro medio. Caso típico: botón para imprimir la página.
- Usuarios:
- No sólo personas que utilizan determinadas ayudas técnicas,
- también personas con equipos antigüos,
- y personas que por razones de seguridad navegan sin permitir la ejecución de scripts.
Las herramientas de revisión automática pueden detectar algunos fallos, como el uso de eventos dependientes del tipo de dispositivo, pero no pueden determinar absolutamente si hay contenidos a los que el usuario no puede llegar o conocer si no se ejecutan los cripts.
Contenidos en movimiento
¡Qué divertido!
Ejemplo: Sección "Caminos"
Si no puedes evitarlo:
- Será necesario que:
- Puedan detenerse
- Mediante el ratón
- y mediante el teclado.
- Usuarios:
- En general es incómodo para todos los usuarios, sobre todo si es una página de uso continuo.
- Molesta especialmente a las personas con problemas de atención
- pueden ser una barrera para usuarios de algunos agentes de usuario angigüos
- Dificultan mucho su lectura a personas con deficiencias visuales.
Las herramientas de revisión automática no pueden detectar todos los contenidos en movimiento que puede haber en una página, pues pueden presentarse mediante imágenes, scripts, u objetos. Por tanto, la revisión manual es imprescindible.
Generación de ventanas
¡No controles mi forma de ...!
Ejemplo: Sección "Enlaces"
- Hoy en día los usuarios pueden evitar la generación de nuevas ventanas
- Los usuarios pueden preferir:
- Abrir una nueva ventana
- Abrir una nueva pestaña
- Que todo se muestre en la misma pestaña
¡Atención! El punto se refiere tanto a ventanas como a mensajes emergentes.
- Usuarios:
- Usuarios de lectores de pantalla, por la pérdida del foco.
- Personas ciegas o sordociegas
- Personas con deficiencia visual
- Personas con deficiencia cognitiva
- También puede ser un problema para personas con ciertas deficiencias cognitivas que no se percatan de la apertura de la nueva ventana si ésta se abre en el fondo.
- Usuarios poco experimentados que no sabrán volver al sitio en el que se encontraban
Las herrramientas de revisión pueden detectar algunas formas de generar la apertura de nuevas ventanas, por ejemplo, el atributo "target", pero NO TODAS. Por tanto, la revisión manual es imprescindible.
Falta de estructuración
¡Qué galimatias!
Ejemplo: Sección "Diario"
La estructuración incorrecta o inexistente limita la comprensión de los contenidos para algunos usuarios.
- Usuarios:
- Usuarios de lectores de pantalla.
- Personas ciegas o sordociegas
- Personas con deficiencia visual
- Personas con deficiencia cognitiva
- Usuarios con limitaciones motrices que utilizan el teclado y navegan por encabezados.
Las herrramientas de revisión pueden detectar algunas formas de estructuración incorrecta, pero NO TODAS. Por tanto, la revisión manual es imprescindible.
Objetivo de enlaces
¿A dónde lleva esto?
Ejemplo: Sección "Enlaces"
- Los enlaces deben ser:
- Claros en cuanto a dónde apuntan
- Diferenciables cuando son leídos fuera de contexto
Algunos agentes de usuario aprovechan el contenido del atributo "title", si lo hay, pero otros no.
- Usuarios:
- Usuarios de lectores de pantalla.
- Personas ciegas o sordociegas
- Personas con deficiencia visual
- Personas con deficiencia cognitiva
- Personas con algunos tipos de deficiencias cognitivas no usuarios de lectores.
- Usuarios que navegan por elementos.
Las herrramientas de revisión NO puden detectar si los enlaces son claros en cuanto a dónde apuntan y si son comprensibles cuando son leídos fuera de contexto. Lo único que pueden detectar es si hay dos o más enlaces con el mismo contenido y que apuntan a documentos distintos.
Lenguaje poco claro
¡El galimatías crece!
Ejemplo: Sección "Diario"
Especialmente importante en sitios dirigidos a públicos cautivos:
- Banca
- Administración pública
Pero... ¡El punto no limita la utilización de lenguaje técnico allá donde sea necesario.! No se trata de tener una web dirigida a una edad mental de 13 años, como las películas americanas
- Usuarios:
- Especialmente
- Personas con dislexia
- Personas con deficiencia del lenguaje
- Personas sordas
- Todos.
Las herrramientas de revisión NO puden detectar si los contenidos estan expresados de manera suficientemente clara para el público al que se dirigen. Ni pueden detectar si las abreviaturas y acrónimos utilizados están correctamente marcados o no. Tan sólo pueden detectar si existe algún contenido marcado con estos elementos.
Conviene tener una comprensión clara de la diferencia entre una abreviatura y un acrónimo. Para ello puede consultarse el documento: Abreviaturas vs. Acrónimos.
Resolución definida por el autor
¡Que no cabe!
Ejemplo: Sección "Caminos"
¡No limitemos las opciones los usuarios!
- Los usuarios de monitores de 640 x 480 ¡Existen!
- Los usuarios pueden querer tener varias ventanas abiertas en cascada
- Los usuarios pueden navegar con dispositivos distintos a un PC. (Por ejemplo: Simputer)
Las herrramientas de revisión NO puden detectar si el uso de unidades de medida absolutas interfiere o no con las opciones del usuario para ampliar o reducir el tamaño de determinados elementos.
La unidad de medida pixel, aunque es relativa respecto al tamaño del punto del monitor, debe considerarse una unidad de medida absoluta, puesto que el punto del monitor no puede aumentarse o reducirse a voluntad. Sin embargo, el uso del pixel puede no ser un impedimiento para las necesidades o preferencias del usuario, cuando se usa en determinados elementos o propiedades de las hojas de estilo. Por tanto, la hoja de estilos debe ser revisada con cuidado y manualmente.
Diseño heterogéneo
¡Me perdí!
Ejemplo: Todo "El camino de..."
Una disposición y presentación homogéneas facilita la navegación e interacción con los contenidos.
- Usuarios:
- Todos
- Especialmente
- Personas con deficiencias cognitivas
- Personas ciegas o sordociegas
Las herrramientas de revisión NO puden detectar si el diseño y presentación de los elementos del sitio se presentan en el mismo orden y en los mismos espacios en todas y cada una de las páginas del sitio. La revisión manual se hace indispensable.
Formularios mal etiquetados
¡Dónde .... estará el punto de inserción!
Ejemplo: Sección "Contacto"
¡No todos los usuarios cuentan con agentes de usuario capaces de relacionar los distintos elementos e indicarles el punto de inserción en los campos de formulario.!
- Usuarios:
- Usuarios de lectores de pantalla antigüos, especialmente las personas ciegas y sordociegas.
Las herrramientas de revisión puden detectar la maquetación con tablas, la carencia de caracteres por omisión y la falta de etiquetas, pero no pueden detectar si los valores de las etiquetas están correctamente posicionados y si éstas están relacionadas implícitamente con el control de manera apropiada para todos los agentes de usuario.
Marcado espurio
¿Por qué los buscadores no indexan bien mis contenidos?
Ejemplo: Todo "El camino..."
Algunos ejemplos:
- tablas para maquetar,
- citas para sangrar,
- listas sin marcar,
- encabezados para conseguir un tamaño mayor de texto,
- Atajos de teclado mal definidos,
- Metadatos inexistentes o usados con la intención de mejorar el posicionamiento en buscadores.
¡No solo dificultan la comprensión y navegación por los contenidos a algunos usuarios, sino que provocan efectos indeseados en la relación con los buscadores.! ¡La accesibilidad favorece el buen posicionamiento!
- Usuarios:
- Usuarios de lectores de pantalla y del teclado.
- Todos al limitarse las posibilidades de localización de contenidos
Las herrramientas de revisión puden detectar algunas características del marcado y avisar al revisor para que compruebe si es correcta su utilización en cada caso o no, pero sólo un ser humano puede determinar el marcado correcto para cada contenido.
En la sección de traducciones del sitio del SIDAR se encuentran los documentos traducidos al español.
[1] HTML Tidy es una aplicación para la revisión y limpieza del código HTML, a partir de ella se ha desarrollado también la HTML Validator for Firefox, que es una extensión para ese navegador.
[2] Un par de pistas: TAW encuentra 4 fallos de nivel 2 que percibe automáticamente. Su respuesta es: "Esta etiqueta no está asociada claramente a un control de formulario". Wave por su parte marca también fallos en esas etiquetas, pero su aviso dice: a form label is present, but it is not associated with any form <input> or <textarea> element. ¿Realmente existe un fallo en la págna de Sidar? Para encontrar la respuesta, leer la especificación de HTML.
[3] Un artículo interesante sobre cómo elegir a los usuarios con discapacidad para una evaluación de la accesibilidad, en inglés, en el sitio de UIAccess.
La revisión manual
8 pasos necesarios
- Utilizar una herramienta de revisión automática sobre todo el sitio
- Identificar páginas con mayor variedad de problemas
- Identificar páginas con mayor número de problemas
- Elegir la muestra
- Página principal
- Mapa del sitio
- Sistema de búsqueda
- Formulario de contacto y/o cualquier otro formulario
- Páginas con diagramas, gráficas o mapas de imagen
- Páginas con objetos, applets, o scripts funcionales
- Páginas con datos tabulares o datos generados dinámicamente
- Páginas de diferentes secciones
- Páginas con apariencia distinta
- Iniciar la revisión manual
- Con una lista verificación o con HERA-XP (Facilita la revisión por prioridades o por elementos)
- Con TAW, o con HERA (Guía al revisor y le aconsjea sobre cómo revisar cada punto)
- Usar al menos 3 marcas de navegadores
- Versión vieja / versión nueva
- Diferentes sistemas operativos (Windows, Mac, Linux)
- Usar un emulador o solicitar ayuda a usuarios
- Ayudarse de las extensiones [1] para:
- Sin descargar imágenes (Comprobar si los textos alternativos son apropiados)
- Sin sonido (para comprobar el contenido alternativo cuando hay elementos sonoros)
- Ampliando y reduciendo el tamaño del texto (comprobar si sigue siendo legible a gran escala)
- Con diferentes resoluciones (No olvidar la resolución de 640x480)
- Imprimiendo en blanco y negro (O limitando a grises la presentación en pantalla, para comprobar el contraste)
- Sin usar el ratón (Para comprobar que se tiene acceso y se navega fácilmente por los contenidos de la página)
- Sin cargar los scripts, applets, objects y hojas de estilo (Para comprobar que los contenidos siguen siendo comprensibles y estando completos)
- Usar al menos 2 tipos de navegadores especiales
- Leer el contenido / Navegar por el sitio
- Para comprobar si el lenguaje usado es suficientemente claro
- Puede ser necesaria la colaboración de un experto en el uso del lenguaje
- Puede convenir al participación de un usuario cuya lengua materna no se corresponda con la del contenido.
- Hacer pruebas de usuario
- Elegir los usuarios por tipología
- Definir las tareas que han de llevar a cabo
- Supervisar sus pruebas
Existen varias extensiones que facilitan estos y otros tipos de comprobación, por ejemplo: la Toolbar for Internet Explorer, la Web Developer Extension for Firefox o la Opera W3 Dev Menu.
Por cierto que, el título de esta conferencia proviene del modo en que algunas extensiones y herramientas de revisión presentan sus resultados. Por ejemplo, la extensión para Firefox nos presenta un resultado de "O errors / O warnings" cuando el código fuente está correcto, y TAW nos presenta "0 / 0" en la tabla de resultados, indicando cero errores detectables automáticamente y 0 errores a revisar manualmente, en algunos casos. El título ironiza también la moda de poner etiquetas de accesibilidad, que en muchos casos no se corresponden con un accesibilidad real para los usuarios.
Ayuda externa: Auditorías y certificaciones
No estamos solos...
Entidades que certifican en España:
Proyectos europeos de certificación
El futuro es incierto: Postura de la industria.
El Seminario SIDAR
¡La comunidad! Abierta, solidaria, participativa.
- ACCESOWEB: Foro de intercambio de dudas y experiencias entre desarrolladores, diseñadores y usuarios con discapacidad.
- Grupos de Interés
- Grupos de Trabajo
- Guía urgente de la Accesibilidad
- Lectura Fácil
- Legislación sobre Accesibilidad
- Manual de Estilo Corporativo
- Observatorio Iberoamericano de la Accesibilidad Digital
- Webmasters Solidarios
- Traducciones
- WCAG 2 en español
- Cuadernos de bitácora
- Bitácoras de Grupo
- Bitácoras Temáticas
- Bitácoras Personales
- Las Jornadas: Este año serán las décimas y se celebrarán en Colombia
- ¡Y lo que tú aportes!
Agradecimientos
¡Gracias!
Emmanuelle Gutiérrez y Restrepo
emmanuelle en sidar.org