Logo del SIDAR (difuso)
Logotipo del SIDAR

¡Mi web es 0,0! ¿Y la tuya?

Emmanuelle Gutiérrez y Restrepo, <coordina@sidar.org>

Tabla de Contenido

Legislación, directivas, normas

Internacional
Normas Uniformes sobre la igualdad de oportunidades para las personas con discapacidad
Europea
Iniciativa e-Europe y diversas "Directivas"
Española
LEY 34/2002, de 11 de julio, de servicios de la sociedad de la información y de comercio electrónico (LSSICE). Publicada en el B.O.E. el 12 de julio.
  1. Fecha límite: 31 de diciembre de 200
  2. Ley de infracciones y sanciones en materia de igualdad de las personas con discapacidad: Multas desde 301 a 1 Millón de Euros. (Aprobación en Consejo de Ministros: 13/01/2006. El Congreso ha ampliado el plazo de presentación de enmiendas hasta el 18 de abril de 2006)
LEY 51/2003, de 2 de diciembre, de igualdad de oportunidades, no discriminación y accesibilidad universal de las personas con discapacidad (LIONDAU).
Normas
UNE 139:803:2004 "Requisitos de Accesibilidad para Contenidos en la Web"

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:

  1. Texto equivalente para todo elemento no textual
  2. combinaciones de color del fondo y del primer plano.
  3. Páginas que no pueden seguir siendo usadas cuando los scripts, applets u otros objetos de programación se desconectan o no son soportados.
  4. Contenido en movimiento, que no puede detener el usuario a voluntad.
  5. Generación de ventanas, sin informar antes al usuario.
  6. 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.
  7. Objetivo de cada enlace que no se identifica claramente.
  8. lenguaje poco claro o complejo, y abreviaturas y acrónimos sin marcar.

A estos podemos añadir los siguientes:

  1. Resolución mínima definida por el autor.
  2. Diseño heterogéneo en los sistemas de navegación o presentación de los contenidos
  3. Formularios mal etiquetados.
  4. 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.


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"

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.


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"

Vista de un contenido que se presenta mediante un javascript.Vista de un contenido que desaparece cuando no se ejecutan los javascripts.

Vista de página que contiene enlaces que abren nuevas ventanas sin avisar al usuario.Vista de página que contiene enlace dependiente de javascript pero cuya funcionalidad se ofrece mediante  el navegador también.

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.


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:

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"

Vista de una apertura de ventana nueva.

¡Atención! El punto se refiere tanto a ventanas como a mensajes emergentes.


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"

Vista de una página mal estructurada.

La estructuración incorrecta o inexistente limita la comprensión de los contenidos para algunos usuarios.


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"

Vista de el listado de enlaces.

Algunos agentes de usuario aprovechan el contenido del atributo "title", si lo hay, pero otros no.


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"

Ejemplo de texto poco claro.Vista de contenidos abreviados mal marcados o sin marcar.

Especialmente importante en sitios dirigidos a públicos cautivos:

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


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"

Vista de página en resolución de 640x480 y con texto ampliado.

Foto de un Simputer.¡No limitemos las opciones los usuarios!


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

Vista de la barra de navegación mal definida.

Vista de navegación con submenú mal planteada.

Una disposición y presentación homogéneas facilita la navegación e interacción con los contenidos.


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"

Vista de un formulario mal etiquetado.Vista de código de formulario mal etiquetado.

¡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.!

Contacta con el autor
 

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:

¡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!


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.

Ventajas

¡Ahorro dinero e incremento mis beneficios!

Se necesita un experto en accesibilidad

Pero... ¿En qué se caracteriza un experto?

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

  1. 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
  2. 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
  3. 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)
  4. 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
  5. 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)
  6. Usar al menos 2 tipos de navegadores especiales
  7. 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.
  8. 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.

Agradecimientos

¡Gracias!

Emmanuelle Gutiérrez y Restrepo
emmanuelle en sidar.org