| |

W3C: fallos de accesibilidad (II)

ByLuis

Seguimos con los fallos de accesibilidad que se suelen cometer en el desarrollo web, que nos ofrece la W3C y que empezamos a tratar hace unos días.

Mostrar imágenes con información importante mediante estilos

Se trata de usar una imagen que contiene información (por ejemplo para los enlaces del menú) y mostrarla como fondo de un elemento y que no haya un texto que indique el contenido de la imagen.

Una solución es escribir el texto pero no hacerlo visible, para ello usaremos la propiedad text-ident, si le damos un valor negativo elevado el texto desaparecerá por la izquierda. Por ejemplo, tenemos una imagen titulo.png que tiene el título del blog con un diseño especial, lógicamente queremos que se vea así por temas de diseño e imagen. Ahora bien, si solo mostramos la imagen, no somos capaces de leer el contenido de esta. Por ello tendremos que hacer lo siguiente para que el texto aparezca sin que haya estilos y con estilos solo aparezca la imagen:

h1 {
background: url(titulo.png);
width: 200px;
height: 100px;
text-indent: -10000px;
}
<h1>Título</h1>

Usar el estilo blink sin el mecanismo para parar el parpadeo

Esta es corta, no uses jamás text-decoration: blink. Y si por un casual no te queda otra posibilidad que usarlo, crea un script que pare el parpadeo a los 3 segundos.

Usar un applet o un flash que parpadee sin el mecanismo para pararlos

Lo mismo que el punto anterior, pero enfocado a applets y a animaciones Flash.

Usar subtítulos que omiten parte del diálogo o sonidos importantes

Si vas a ofrecer un sonido, una conversación y no muestras los subtítulos con todo el contenido (conversación y sonidos destacados), no se trata de un buen subtítulo y puede haber información importante que se escape.

Más información