5 efectos CSS accesibles

Blogs Media: CSS Mania | VivirLatino | Sentido Web | Apps Mania

Mar08May2007

5 efectos CSS accesibles

08:30 H (CET)| Temas: Accesibilidad · CSS

El tema de la accesibilidad es algo que a veces se deja de lado cuando se quiere conseguir un diseño más dinámico. Pero si se busca bien, se podrá encontrar ejemplos de diseños CSS que sean accesibles.

Estos son 5 muy buenos ejemplos de ello:

Enlaces externos: modificas el texto "(enlace externo)" incluyéndolo en un span y después lo que haces es modificar el estilo para que muestre un icono (diferente dependiendo de si es linked, visited o hover) y el texto lo haces desaparecer de la parte visible de la pantalla.
Sigue leyendo: el texto "Sigue leyendo sobre ..." se modifica, haciendo que solo aparezca "Sigue leyendo" y el resto del texto aparece como un popup mediante posición absoluta y jugando con el hover.
Texto variable: al igual que ya contamos en Sentido Web, usando distintas hojas de estilo y accediendo a ellas mediante Javascript.
Pestañas con imágenes: se crea un menú de pestañas con listas no ordenadas y se cambia el estilo para que no tengan formato de bloque, los enlaces están formados por imágenes y estas cambian según el hover.
Formularios: dos buenos ejemplos de formularios, uno de ellos muy bien tabulado y otro en tres columnas.