10 simuladores para personas con problemas de visión

En el mundo hay una gran cantidad de personas que tienen algún problema de visión (sin llegar a tener ceguera total), por lo tanto debe ser una gran preocupación tanto para diseñadores como desarrolladores web, el conseguir que estas personas puedan acceder correctamente a los sitios web que desarrollen. En esta lista de simuladores, para ayudar tanto a diseñadores y desarrolladores web, se encuentran 10 de las más importantes herramientas.
Seguir leyendo » »

¿Es lo mismo usable que accesible?

Interesante artículo en consumer.es a cargo de Dolors Pou, consultora de usabilidad en Xperience Consulting.

En esta columna, la autora explica los conceptos de usabilidad y accesibilidad, a los que atribuye estatus interés general (el primero) y derecho universal (el segundo). Además, establece las pautas que deben seguir las páginas web tanto para ser usables por los todos los usuarios como para ser accesibles por aquellos que en algún momento tienen algún tipo de dificultad física o psíquica, por mínima que sea. Concluye que, puesto que todas las personas pueden tener en un momento dado alguna dificultad a la hora de navegar por un sitio web, usabilidad y accesibilidad deben ir de la mano en la concepción de Internet.

Usabilidad y accesibilidad » »

Crear teclas de acceso con accesskey

A través del atributo 'accesskey' (tecla de acceso) asignamos el foco al elemento que tenga asignado ese caracter. Los siguientes elementos soportan el atributo 'accesskey': A, AREA, BUTTON, INPUT, LABEL, LEGEND y TEXTAREA. La acción que se produzca cuando un elemento consigue el foco depende del elemento y en algunos casos del navegador. Por ejemplo, cuando un usuario activa un link definido mediante la etiqueta A, el navegador seguirá el enlace; cuando se activa un elemento radio button, estaremos cambiando el valor del radio button; cuando se activa una caja de texto, Ésta permite la introducción del mismo, etc. Sintaxis:

accesskey = caracter [CN]

<label for="nombre">Nombre:</label> 
<input type="text" name="nombre" accesskey="n">
(tecla de acceso 'n') <br/><br/>
<label for="apellidos">Apellidos:</label> 
<input type="text" name="apellidos" accesskey="a" /> 
(tecla de acceso 'a')

La invocación de las teclas de acceso depende del sistema operativo. Para sistemas Windows, generalmente es pulsando la tecla 'ALT' , más la tecla de acceso. En Mac es la tecla 'Control' más la tecla de acceso.

Por dónde empezar en Accesibilidad

Como bien se ha apuntado en algunos comentarios surgidos a raíz del post "Logos de adecuación a niveles de accesibilidad", lograr un nivel de accesibilidad adecuado es complicado y las herramientas de verificación automática como TAW pueden dar por buenos, contenidos que no han sido revisados manualmente convenientemente.

Una vez tenemos el sitio web codificado de acuerdo a estándares con XHTML y CSS, en mi opinión los pasos a seguir deberían ser:

1.- Revisión manual de ciertos aspectos.
2.- Validación por herramientas como:

• W3C Markup Validator
• CSS Validator
• WAVE 3.0
• CynthiaSays
• TAW
• etc

3.- Realizar una auditoría externa de accesibilidad. Aunque el precio es caro, realizar una auditoría es la única forma de asegurarnos de la total accesibilidad del sitio web.

A veces dependemos demasiado de las herramientas. Pretendemos que un validador nos de todas las correcciones cuando es mucho más importante establecer una serie de puntos de verificación que nos acercarán bastante a un nivel de accesibilidad aceptable. A continuación expongo una serie de puntos que pueden ayudar a obtener un grado de accesibilidad aceptable. Se podráan añadir más o, quitar alguno por no ser muy importante, pero creo que es una 'receta' interesante.

- Elegir una muestra de páginas representativas dentro de nuestro sitio web. Es un error bastante común verificar para la página web principal y el resto del sitio olvidarse de él. La accesibilidad debe ser para todo el sitio y para ello lo primero que deberemos hacer es elegir una muestra de nuestro sitio sobre la que realizar las pruebas.

- Testar el aspecto y el funcionamiento en tantos navegadores como te sea posible (Mozilla, IE, Opera, Safari,...).

- Asegurarte de que cada elemento no textual en las páginas tenga un equivalente textual. Etiquetas 'ALT' en las imágenes, elementos 'NOSCRIPT' con contenido alternativo a 'SCRIPTS', ...

- Asegurate que las combinaciones de los colores de fondo y primer plano tienen el suficiente contraste para ser percibidas por personas con deficiencias de percepción de color o sobre pantallas en blanco y negro. Nada de cosas como Popurls

- Deshabilita javascript, imágenes y hojas de estilos y comprueba si todavía se puede usar tú página y no ha perdido información relevante.

- Usa un navegador de texto como Lynx y comprueba que no se ha perdido información y que la estructura del documento sigue siendo correcta.

Logos de adecuación a niveles de accesibilidad

Últimamente la palabra accesibilidad está de moda. Lo cuál tiene su parte positiva: poco a poco todos nos vamos implicando más en un desarrollo web accesible. Pero también tiene su parte negativa: webs que se ponen la medalla de la accesibilidad aún cuando incumplen las normas dictadas por el W3C. El caso es que, en poco tiempo, me he encontrado con más de una web que dice ser lo que no es. Algo irregular en webs de ámbito privado pero que, en mi opinión, se vuelve bastante grave dentro del ámbito de lo público. Un ejemplo puede ser la web del Ayuntamiento de Xàtiva. Web que en su parte inferior se ha puesto la medalla de ajustarse al Nivel A de las Directrices de Accesibilidad para el Contenido Web 1.0 del W3C, incluyendo todos los puntos de verificación de Prioridad 1 definidos en las Directrices. Haciendo un pequeño repaso de las directrices podemos ver el siguiente nivel de cumplimiento:

Directriz: Asegúrese de que las páginas sigan siendo utilizables cuando se desconecten o no se soporten los scripts, applets u otros objetos programados. Si esto no es posible, proporcione información equivalente en una página alternativa accesible.
Si deshabilitamos Javascript nos encontramos con que no podemos acceder a ninguna de las secciones de la web puesto que el menú funciona con javascript y no existe contenido alternativo. Tampoco existe contenido alternativo a los enlaces a otras webs municipales que se realiza con Flash. Increible para una web supuestamente accesible.

Luego sigue incumpliendo, aunque de menor gravedad, las directrices:
- En las tablas de datos, identifique los encabezamientos de fila y columna.
- Proporcione un texto equivalente para todo elemento no textual (Por ejemplo, a través de "alt", "longdesc" o en el contenido del elemento). Esto incluye: imágenes, representaciones gráficas del texto, mapas de imagen, animaciones (Por ejemplo, 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.

Repito que no es un caso único. He visto más webs con niveles de incumplimiento similares y que se cuelgan la medalla de la accesibilidad. Creo que alguién debería poner un poco de sentido común en este tema y vigilar de algún modo el uso y abuso de los botones de conformidad con niveles de accesibilidad.

Algunas entradas relacionadas:

• 10 simuladores para personas con problemas de visión
• Por dónde empezar en Accesibilidad
• Fangs: un emulador de screen reader
• Crear teclas de acceso con accesskey
• ¿Es lo mismo usable que accesible?

Fangs: un emulador de screen reader

La accesibilidad en el desarrollo web es un tema que es cada día más importante y disponer de herramientas que nos faciliten el testeo es fundamental. Fangs es una extensión para Firefox que crea una representación textual de una página web como sería leída por un screen reader(lector de pantalla) para invidentes. Un screen reader se comporta, con el contenido de la página, de la misma manera que el software OCR (Optical Character Recognition); busca la letra y otros símbolos conocidos comparándolos con una propia base de datos; cuando los encuentre les asocia el respectivo código ASCII y eventualmente la emisión sonora por la tarjeta de sonido del ordenador.

Fangs, una vez instalado, se usa a través del menú contextual del botón derecho, con la opción "View Fangs" o a través del menú "Herramientas > Fangs" de nuestro navegador Firefox.

Fangs » »