contenido 28 de marzo de 2014 a las 09.06
   Imprimir artículo
elWebmaster.com

Accesibilidad para CSS


accesibilidad-wideEl CSS es una cosa mágica. En las manos adecuadas, es capaz de transformar el más sencillo documento (bien estructurado) en una fiesta visual. Pero no todo es color de rosa. Aquí hay algunas maneras simples en que puedes utilizar el CSS para mejorar la usabilidad y la accesibilidad en tu sitio web.

Mejor a√ļn, el atractivo visual no se ver√° afectado por el uso de estas t√©cnicas. Es una promesa.

Lo b√°sico siempre en mente

Esto es menos que un tip de accesibilidad, y m√°s que un recordatorio para comprobar si tienes tu background-color del body especificado.

Si te est√°s preguntando a que viene esto, la respuesta es algo muy b√°sico, a partir de una muestra de 200 sitios revisados el a√Īo pasado, el 35% de las autoridades locales de los sitios web del Reino Unido les faltaba su background-color en el body.

Olvidar especificar el background-color del body puede conducir a brechas embarazosas en la cobertura, que no son sólo antiestéticas, sino que además pueden evitar que tus usuarios lean el texto en tu sitio web a causa de que utilicen un esquema de colores diferente en el sistema operativo.

Todo lo que se necesita es la siguiente l√≠nea que se a√Īade a tu archivo CSS:

body {background-color: #fff;}

Si lo asocias con

color: #000;

‚Ķ estar√°s asegurado de mantener el contraste de las √°reas que inadvertidamente se olvidan de especificar, no importa lo que el esquema de color est√© utilizando o prefiera el usuario. Aseg√ļrate de qu√© colores predeterminados tienes de fondo y texto, as√≠ nunca te agarrar√°n de imprevisto. Por lo menos, tendr√°s un fondo blanco y un texto negro que te pedir√° que cambies los colores elegidos.

Espacio de maniobra

Prestar atención en la tipografía es importante, pero no se trata sólo de hacer que se vea bien.

El uso cuidadoso de la propiedad line-height puede hacer que el texto sea m√°s legible, lo que ayuda a todo el mundo, pero es especialmente √ļtil para las personas con dislexia, que usan ampliaci√≥n de la pantalla o simplemente les resulta inc√≥modo de leer un mont√≥n de texto en l√≠nea.

Cuando las líneas de texto están demasiado juntos, puede causar que el ojo salte unas líneas al leer, por lo que es difícil hacer un seguimiento a través de lo que estás leyendo.

Por lo tanto, un poco de espacio es bueno.

Dicho esto, cuando las líneas del texto están demasiado separadas, puede ser tan malo, debido a que el ojo tiene que saltar para encontrar la siguiente línea. Eso no sólo rompe el ritmo de lectura, sino que puede hacer que sea mucho más difícil para aquellos que utilizan la ampliación de la pantalla (sobre todo en los altos niveles de aumento) para encontrar el principio de la siguiente línea.

Usando una altura de línea de entre 1,2 y 1,6 veces el valor normal se puede mejorar la legibilidad, y el uso de la unidad, ayuda a cuidar los problemas de cálculo del navegador que son molestos.

Por ejemplo :

p {

font-family: “Lucida Grande”, Lucida, Verdana, Helvetica, sans-serif;

font-size: 1em;

line-height: 1.3;

}

o si deseas utilizar la versión abreviada:

p {

font: 1em/1.3 “Lucida Grande”, Lucida, Verdana, Helvetica, sans-serif;

}

Ve algunos ejemplos de line-heights, basados en el tama√Īo por defecto del texto en 100%/1em.

Caso inicial disfrazado

Nadie quiere rega√Īar a sus usuarios, pero hay algunas ocasiones en la que puedes con toda raz√≥n querer usar may√ļsculas en tu sitio web.

Evita las rarezas de pronunciaci√≥n por pantalla (donde, por ejemplo, CONTACTO EE.UU. ser√≠a le√≠do como Contacto EE.UU., que no es lo mismo, a menos que realmente est√°s ofreciendo a los usuarios la oportunidad de ponerse en contacto con los Estados Unidos), causadas por el uso de may√ļsculas para el texto y el uso descuidado de la propiedad text-transform para fingir la may√ļscula..

Por ejemplo:

.uppercase {

text-transform: uppercase

}

El esquema de enlace

También conocido como: el anillo de enfoque, o esa caja punteada que va alrededor de los enlaces para mostrar a los usuarios dónde se encuentran en el sitio.

Las técnicas a continuación tienen por objeto complementar esto, no tomar el lugar de la misma.

El subrayado no subrayado

Si escuchas a Jacob Nielsen, cada enlace en tu sitio debe estar subrayado para que los usuarios sepan que es un enlace.

Puedes estar en desacuerdo con √©l sobre esto, pero si est√°s eligiendo utilizar enlaces subrayados, en cualquier estado, quita el subrayado de forma predeterminada y sustit√ļyelo por un borde que es un par de p√≠xeles lejos por debajo del texto.

El subrayado está todavía allí, pero ya no posee el corte de la parte inferior de las letras con trazos descendentes (por ejemplo, g y y) lo cual hace que sea más fácil de leer.

Esto se ilustra en los ejemplos 1 y 2.

Puedes modificar las tres líneas de código de abajo para adaptarlas a tu propio color y preferencias en el estilo de borde, y agregarlo a cualquier estado de enlace que te guste.

text-decoration: none;

border-bottom: 1px #000 solid;

padding-bottom: 2px;

De pie entre la multitud

Cualquiera que sea la forma que elijas para hacerlo, debes hacer que tus enlaces se destaquen de la multitud de palabras con texto normal que lo rodee en su estado por defecto, y en especial en el estado hover o focus.

Una buena manera de hacer esto es invertir los colores cuando el estado sea hover o focus.

Bien enfocado

Por supuesto, Internet es como es, no es tan sencillo, y como era previsible, Internet Explorer es el culpable una vez m√°s de esta frustrante falta de apoyo para :focus. En su lugar, se aplica la pseudo clase :active cada vez que un ancla tiene el focus.

Lo que esto significa en la práctica es que si deseas hacer enlaces que cambian en el focus, así como en el hover, es necesario especificar el focus, hover y active.

Incluso mejor, ya que la apariencia tiene necesariamente que ser el mismo para los tres √ļltimos estados, puedes combinarlos en una regla.

Así que si quieres hacer un simple revés de colores para un enlace, y lo colocas junto con la línea no subrayada desde antes, el código podría tener este aspecto:

a:link {

background: #fff;

color: #000;

font-weight: bold;

text-decoration: none;

border-bottom: 1px #000 solid;

padding-bottom: 2px;

}


a:visited {

background: #fff;

color: #800080;

font-weight: bold;

text-decoration: none;

border-bottom: 1px #000 solid;

padding-bottom: 2px;

}

a:focus, a:hover, a:active {

background: #000;

color: #fff;

font-weight: bold;

text-decoration: none;

border-bottom: 1px #000 solid;

padding-bottom: 2px;

}

Ubicación, ubicación, ubicación

Para seguir este ejemplo a un final natural, puedes agregar un id (o algo similar) en los lugares adecuados en tu navegación, especifica un conjunto completo de estilos de enlace, y ten una navegación que, a primera vista, permita a los usuarios saber en cual página o sección se encuentran.

Conclusión

Todos los ejemplos aqu√≠ presentados pretenden ilustrar los conceptos, y no debe ser tomado como la forma m√°s favorable para dar formato a los enlaces o los estilos de la barra de navegaci√≥n, lo cual depende de ti y todo dise√Īo visual que est√°s usando en ese momento.

Asimismo, no son las √ļnicas cosas que debes hacer para que tu sitio sea accesible.

Fuente original del artículo: 24 Ways
Traducción realizada por
elWebmaster.com


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (1)

  1. javier dice:

    Buenas! Deber√≠as actualizar el theme del blog, el dise√Īo ya quedo bastante viejo y publicando articulos de calidad como este, como que desentona bastatante.
    Ademas, las partes de codigo css se confunden con el texto en si.. instala algun plugin para hacer el highlight de codigo.

    Saludos!

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder