Pasaste horas con un diseño de delicados grises y medios tonos. Te ganaste la admiración de tus amigos diseñadores por tu sensibilidad visual y tu sentido de la armonía, pero hay un problema: estas diseñando para la Web. Con distintas resoluciones de pantalla, o con monitores mal balanceados tus páginas se ven tan ténues que casi no se leen. Tu abuela, que tiene mala vista, dice que esas manchas grises son muy modernas pero no entiende nada.
Hay dos soluciones. La primera involucra destruir tu precioso trabajo y aumentar el contraste entre los textos y el fondo. Tu contenido llegará a más gente pero privarás al mundo de una Obra Maestra del diseño.
La segunda opción es construir un selector de contraste. Con una clase CSS y un poco de Javascript podemos hacer un link o botón que, al apretarlo, aumente el contraste de las páginas.
Primero veamos el CSS. Necesitamos una clase CSS opcional para el body. Sin esa clase, tu diseño se ve como quieres, apto para una mayoría de lectores. Con la clase, todos los textos aumentan el contraste con respecto al fondo.
Usemos un CSS simple como ejemplo, con un fondo gris claro (#E7E4E4) y los textos ligeramente más oscuros (#CCCCCC, como toda Obra Maestra, no será apreciada en su tiempo). No incluyo el HTML completo, para resumir.
/*============ HTML =================*/
<body>
<h1>Miren mi estupendo diseño</h1>
<p>
Si puedes leer esto tienes buena vista.
</p>
</body>
/*============== CSS =================*/
body {
color:#E7E4E4;
background-color:#CCCCCC;
}
/* El titulo tiene otro color suave para efectos del ejemplo */
h1 {
color:#E6C3C3;
}
...
body.accesible {
color: #000000; /* negro. También puedo poner black */
background-color:#FFFFFF; /* blanco */
}
/* si el H1 está en un body con clase accesible, también cambia */
.accesible h1 {
color: #FD0404; /* rojo */
}
Sólo resta agregar la clase al body para ver los cambios (
).Lo que necesitamos ahora es una función Javascript que incluya o remueva la clase accesible al body, y un botón que gatille esa función. Primero el botón en el HTML, invocando a la función llamada, ingeniosamente, accesibiliza().
...
<button type="button" onClick="accesibiliza()">Accesibilidad</button>
...
Ahora la función, como correponde en un archivo Javascript independiente adjunto al HTML. Esta función debe responder a dos casos: si el elemento body no tiene la clase .accesible, debe agregarsela. Si ya la tiene, debe removerla. La función que muestro usa la librería Javascript Prototype.js, que tiene las útiles funciones hasClassName(), addClassName() y removeClassName(). Si no quieres usar Prototype o alguna otra librería, más abajo incluyo una implementación propia de la función.
/* Javascript */
function accesibiliza(){
var body = document.getElementsByTagName("body")[0];
var class_name = "accesible";
if(body.hasClassName( class_name ))//ya la tiene. Remueve
body.removeClassName( class_name );
else //no la tiene. Agrega.
body.addClassName( class_name );
}
Eso es lo básico. Por supuesto, el ejemplo se puede extender para cambiar el tamaño o familia de las fuentes, o incluso para mostrar layouts totalmente distintos. Todo está en aprovechar el poder de la cascada CSS para lograr los resultados que quieres cambiando tan sólo una clase. Para una página realmente funcional sería necesario cambiar el texto o imagen del botón según el estado de la página, pero eso queda para que lo desarrollen durante las fiestas de este fin de semana.
Al no usar las utilidades de Prototype, esta función es algo más compleja, pero se usa de la misma manera.
function accesibiliza(){
var body = document.getElementsByTagName("body")[0];
var class_name = "accesible";
var bot = document.getElementById("bot-accesible");
var ya_tiene = new RegExp('b'+class_name+'b').test(body.className);
if(ya_tiene){//ya la tiene. Remueve.
var rep = body.className.match(' '+class_name)?' '+class_name:class_name;
body.className = body.className.replace(rep,'');
}
else {//no tiene, agrega clase.
body.className += " "+class_name;
}
}
Usuarios que han visto este tema también han visto...
- Anchura de líneas con CSS
- Sencilla fórmula para calcular la especificidad de los selectores CSS
- Bordes Punteados con CSS
- Centrar DIV horizontal en CSS
- Menus Simples con CSS y listas
- Versión imprimible de este documento
- Enviar por e-mail este documento
Información legal | Política de Privacidad | Contacte con nosotros
Otro proyecto de Factoría de Internet. Copyright© 2003-2008 Factoría de Internet S.L.. Todos los derechos reservados.