Uno de los mayores quebraderos de cabeza que he tenido siempre que he estado maquetando formularios, ha sido el que fuesen accesibles por lectores de pantalla. Siempre me preguntaba si generaría algún problema realizar el marcado utilizando listas desordenadas.

Después de haber buscado respuestas por varios blogs, foros, etc. he encontrado estas tres pequeñas lógicas para tener en cuenta:

1. Lo ideal sería utilizar ambos tipos de asociación, encerrando el control dentro de la etiqueta y añadiendo los atributos id/for:

<label for="tx-nombre">
Nombre:
<input id="tx-nombre" type="text" value="nombre" />
</label>

2. Lo mejor sería no utilizar listas de selección múltiple, son más bien complicadas de manejar sólo con el teclado, e incluso con el ratón no todo el mundo sabe cómo usarlas y tienden a escoger sólo una opción. Es preferible usar grupos de casillas de verificación encerradas en un fieldset.

3. Lo ideal sería utilizar una solución que funcione sin javascript, pero que si se tiene activado javascript añada funcionalidad. Eso sí, hay que verificar que esos scripts no provoquen problemas con los productos de apoyo (lectores de pantalla, por ejemplo), ya que la mayoría de los combos dinámicos suelen llevarse mal con los lectores de pantalla y el acceso con el teclado.

Espero que os sirva de ayuda.

Llevo un tiempo algo confuso leyendo en diferentes foros las mejores formulas para crear banners accesibles para todos los usuarios.

He comprobado que lo que mejor se adapta a estas necesidades es que se utilizase CSS + HTML para poder manipular los colores del texto y su tamaño, ya que usando imágenes, no permitirían cambiar las características de presentación.

No debemos confundirnos, ya que lo si que podemos utilizar son imágenes incluidas en las hojas de estilos, siempre que el texto contraste con el color del fondo y añadiendo su correspondiente atributo alt.

Me he informado de lo que dice las pautas de accesibilidad y en el punto de verificación 3.3 dice:
“Utilice hojas de estilo para controlar la maquetación y la presentación.“

La Prioridad 2 aclara:
“Los diseñadores de contenido deberían utilizar hojas de estilo para dar estilo al texto, mejor que representar el texto con imágenes. Usar texto en lugar de imágenes significa que la información estará disponible para un mayor número de usuarios (con sintetizadores de voz, dispositivos braille, dispositivos gráficos, etc.). La utilización de hojas de estilo también permitirá a los usuarios redefinir los estilos del autor y cambiar los colores o los tamaños de letra más fácilmente.”

Desde hace tiempo llevo buscando la mejor manera de presentar la funcionalidad de ampliar el tamaño de letra de nuestra web.

Está claro que hoy en día tampoco es muy útil esta funcionalidad ya que prácticamente todos los navegadores cuentan por defecto con dicha funcionalidad. Pero también deberíamos tener en cuenta a las personas que no están muy familiarizadas con Internet, bien porque sean mayores o tengan alguna perdida visual, o simplemente desconocimiento con el uso de navegadores, especialmente de Internet Explorer.

La duda surge si lo que la normativa que marca W3C y lo que en realidad los usuarios de lector de pantallas necestan es lo mismo, ya que como son 3 enlaces con el mismo texto que realizan funciones diferentes y por defecto, todos los lectores de pantalla no leen el title y tiene que ser activado por el usuario.

Os voy a dejar un fichero .zip para que os podáis descargar la funcionalidad y no perdáis el tiempo en hacerlo vosotros.