Cada día visito alguna web donde me encuentro con este grave problema de accesibilidad. Los enlaces (links), aunque utilicen un color de letra diferente, no están subrayados y en muchas ocasiones no se distinguen del resto del texto.

Lo peor es que cualquiera puede sufrir este problema. Ya no es necesario que el usuario tenga un deficiencia visual. El problema se presenta de una forma inesperada: debido a las modernas pantallas LCD.

Muchas de estás pantallas planas se venden con unos valores por defecto para el brillo o el contraste muy altos o muy bajos. Y como suele pasar, muchos usuarios noveles no suelen cambiarlos.

He podido observar este defecto en los monitores planos de familiares y amigos. Y nadie lo encuentra raro (si fuera la tele del comedor seguro que la cosa cambiaba). Debido a esto tuvimos algunos problemas en Mundijuegos al utilizar texto de color gris. Pese a ser un gris relativamente oscuro (60%), muchos usuarios no podían leerlo por este problema.

Otras veces es difícil diferenciar el negro de otros colores, como rojos o verdes oscuros, y el enlace se hace casi ilocalizable. Justamente la web de alzado.org, que trata temas de diseño, usabilidad, etc, peca de este problema. En mi modesto portátil me cuesta horrores distinguir los enlaces de color (rojo oscuro sin subrayar) del resto de texto (negro).

Haz visibles tus enlaces. Además de utilizar un color diferente al resto del texto, subráyalos. Y si no quieres subrayarlos, asegúrate que sean totalmente reconocibles de un simple vistazo. Tus lectores te lo agradecerán.

Artículo relacionado: “Guidelines for Visualizing Links” de Jakob Nielsen

En el rediseño de una web […] es tan importante lo que permanece como lo que cambia. No puedes tirar por la borda las muchas horas que los usuarios han invertido en aprender a utilizar tu web hasta sentirse cómodos con ella. Por respeto al usuario es crítico que los cambios sean lo más sutiles e imperceptibles posible. Para nosotros el éxito de un rediseño es que los usuarios encuentren la página más fácil de usar sin darse cuenta de qué ha cambiado exactamente. En las pruebas con usuarios buscábamos que los usuarios pensasen que no ha cambiado nada. Mejorar sin molestar. Esa es la clave de un buen rediseño.

Jesus Encinar
Ceo de idealista.com
Comentando el rediseño de dicho portal.

Antes de que finalizará el año se anunció que Internet Explorer 8 pasaba el Acid Test (¡yuju!). Para los que no lo conozcan, esta prueba se utiliza para saber si un navegador respeta los estándares CSS de la W3C.

Ya que esta nueva versión será compatible con IE6 y IE7, los desarrolladores web aún no sabíamos cómo se iba a activar este nuevo modo de representación. Hasta ahora se recurría al DOCTYPE para definir el tipo de render: el famoso “Quirks Mode” (también llamado modo chapuzas) o en “modo estándar“.

Gracias a Josep, me entero que para utilizar este modo superestándar se utilizará una etiqueta Meta adicional:

<meta http-equiv="X-UA-Compatible" content="IE=8" />

Actualizado (4 de marzo de 2008):
Parece que al final Microsoft a echado marcha atrás y no será necesaria esta etiqueta.

Para utilizar un PNG de 32 bits con transparencias en Internet Explorer 6 (y 5.5) no había más solución que echar mano del poco agraciado filtro Directx AlphaImageLoader (código propietario Microsoft).

1. La solución: iepngfix.htc

Por suerte Angus Turnbul creó un atajo que nos facilita mucho la vida a los diseñadores web:

1. Descarga este fichero HTC y este GIF en tu directorio CSS
2. Añade este código en tus CSS para utilizar PNG’s con transparencia (¡ojo!, no valida)
   IMG { behavior: url(iepngfix.htc); }
3. ¡Listo!

El fichero HTC (referencia en Microsoft) es un componente HTML con un script que puede ser leído por Internet Explorer y que trata el PNG con transparencias para aplicarles el filtro. Funciona tanto para imágenes dentro de la etiqueta IMG o en los BACKGROUND de CSS

Ejemplos

Por ejemplo, si tenemos definido el siguiente fondo:

DIV#base { background: url(imagen-con-alfa.png); }

Añadiríamos la siguiente línea en nuestro CSS:

IMG, DIV#base { behavior: url(iepngfix.htc); }

Aunque aconsejo utilizarlo sólo en los fondos o imágenes que lo necesiten. Podemos utilizar, por ejemplo, la siguiente clase:

IMG.transparencia { behavior: url(iepngfix.htc); }

Las pegas

• Los fondos en PNG no se pueden repetir, es decir, no se pueden usar como tiles.
• Hay que definir los tamaños de las imagenes con width y height o crear un contenedor tipo DIV con el tamaño apropiado. También es posible editar el fichero HTC y cambiar la propiedad SCALE por CROP para evitar esto.
• No se puede utilizar padding o border
• Más detalles

2. Otra alternativa para Internet Explorer 6

Por casualidad encontré una alternativa para IE6 que podría ser útil en ciertos casos y con la que tendríamos transparencias reales en los navegadores modernos, y transparencia binaria en IE6.

Se trata de utilizar un formato especial de PNG, en el que tendríamos una imagen indexada de 8 bits con un valor alfa especifico por cada uno de los colores de la paleta (Más información en la especificación PNG).

Imagen de 32 bits optimizada con PNGOUT (3,36 KB)

Imagen de 8 bits con canal alfa optimizada con PNGOUT (2,42 KB).

Los navegadores modernos muestran correctamente este formato, pero IE6 no aplica bien el alfa y elimina todas la zonas semitransparentes, dejando sólo las zonas opacas. Esta opción puede ser válida para pequeños iconos o similares.

Ejemplo de como quedaría en IE6

Para utilizar esta triquiñuela, sólo tenemos que reducir el número de colores de la imagen y del canal alfa, y después optimizarla con PNGOUT. Ojo, Photoshop no carga bien este tipo de imágenes.

Para probar tu página web en una Wii (sin usar una Wii, obviamente) puedes usar el navegador Opera (Opera for desktop) y cambiar el modo de renderizado a 5 en la configuración de navegador (RenderingMode=5). Para acceder a esta opción escribe en el campo de direcciones:

opera:config#UserPrefs|Renderingmode

Algunos detalles…

• Opera admite HTML, XHTML, XML, WML, RSS - Atom, CSS 3, XSLT, SVG, y JavaScript; excepto designMode, contentEditable, y audio.
• Utiliza una pantalla virtual de 800px, aunque la resolución de las televisiones suele ser bastante peor. El zoom es imprescindible en muchos casos.
• Lo ideal son los diseño elásticos (yo prefiero llamarlos flexibles). Nada de utilizar “px“. La página se adapta al dispositivo, y no al contrario.
• El único plug-in que soporta es Flash 7
• A nivel de CSS, admite media="tv" (¡woh!). Si este tipo no está presente, opta por el tipo screen, aunque, como indica la especificación, nunca los mezclará.
• También admite Web Forms 2.0. Están muy bien, aunque el soporte en otros navegadores es nulo,
• Sólo dispone de dos tipografías. Una sans-serif (Wii NTLG PGothic) y otra monoespaciada (Wii NTLG Gothic)

Más información Making Wii-friendly pages

Xiti Monitor, un instituto francés de encuestas web, ha publicado un barómetro sobre el uso de los navegadores web en julio. Internet Explorer sigue perdiendo terreno con respecto a Firefox.

El ascenso de Firefox continúa… cercano al 28% de indice de uso en Europa a principios de julio de 2007, con la misma progresión en todos los 32 países europeos estudiados. Y no pierde terreno en ninguno de ellos.

Y si quieres conocer nuestro punto de vista sobre el tema, sólo tiene que echar un vistazo a las siguientes anotaciones:

• Un infierno llamado Internet Explorer
• Internet Explorer es un cáncer y debe ser frenado

Visto en blogameleon

Dave Child ha reunido en un esquema todas las reglas de CSS, incluidos los selectores de CSS 2.1, en formato PNG o PDF, preparado para ser impreso en un único folio.

Muy práctico como chuleta (Más información sobre CSS)

También hay disponibles esquemas en el mismo formato para HTML, PHP, Javascript o incluso para The World of Warcraft

Vía del.icio.us