Botones para cambiar el tamaño de letra
por Juan Carlos GarcÃa, 16 de Abril de 2006
Internet no es ajena a las modas. Una de estas modas es que ahora las webs tienen que ser accesibles. Más concretamente, uno de los aspectos más de moda es emplear innecesarios botones de ayuda para cambiar el tamaño de letra.
El que la Accesibilidad esté de moda tiene una parte buena y una mala. La buena es que, en cualquier caso, está bien el interés por la Accesibilidad. La mala es que con frecuencia no se trata de un interés genuino, sino dictado por la moda, por el afán de estar a la última, por (aparentar) ser más que los otros. Y uno de los efectos perversos es que a veces cuenta más el deseo de decir que se es, para sacar pecho y colgarse una medalla, que la voluntad serlo en sà mismo, simplemente porque es nuestra obligación como diseñadores.
De forma más especÃfica, una de las prácticas más de moda últimamente en esto de la accesibilidad es el botoncito para cambiar el tamaño de letra del texto.
En la inmensa mayorÃa de casos esta supuesta ayuda no está bien resuelta. En principio, el trabajo del diseñador estarÃa bien hecho si se ha utilizado una fuente escalable y el texto tiene un tamaño por defecto suficientemente grande, con buena legibilidad (digamos un 100% ó 1em).
Lo que dicen las pautas de accesibilidad al respecto es:
3.4 Utilice unidades relativas en lugar de absolutas al especificar los valores en los atributos del lenguaje de marcadores y en los valores de las propiedades de las hojas de estilo. [Prioridad 2].
Y como técnica relacionada recomendada:
Use la unidad “em” para fijar el tamaño de letra
El propio navegador ya cuenta con la opción de cambiar el tamaño de texto de forma relativamente sencilla. No obstante, si dicha tarea no es suficientemente fácil no es necesariamente trabajo del diseñador subsanar todos los problemas de los navegadores, pues bastante hay ya con crear CSS bien hechas y que además sean aptas para I. Explorer.
Font-sizing widgets are usually graphic buttons labeled A, A-, A+, and A++ or small font, medium font and large font. The most ironic ones don’t grow with the browser font but use 10×10 pixel images with light gray type on lighter gray background. How can a person who needs large texts on the page ever find those? (…) Larger type is not a requirement of the site—it involves the whole operating system of the computer and is the problem of operating system and browser vendors. (Heilmann, 2006)
En realidad, en casos puntuales podrÃa resultar una buena ayuda si se aplica bien. Un caso tÃpico de buen empleo serÃa en una web para usuarios mayores, que son personas que posiblemente tengan poca experiencia usando internet y tal vez algún tipo de pérdida visual.
Lo peor es que en la inmensa mayorÃa de los casos se hace mal hecho.
Errores tÃpicos:
- Iconos invisibles. Se supone que el usuario tÃpico de esta función será una persona que no lea bien el texto si está en su tamaño por defecto. Si no ve bien el texto ¿como va a ver un minúsculo icono?
- Javascript para activar dicha función. Si no está habilitado el javascript en el navegador del usuario no funcionará. Es decir, serÃa una ayuda de accesibilidad no accesible.
- Iconos no intuitivos. No es fácil mostrar en un pequeño icono la idea de “pulse este botón si quiere aumentar el tamaño de todo el texto”.
- Iconos sin leyenda de apoyo. Si además de poco intuitivo no va acompañado de un texto que explique su función, pues peor aún.
- Texto de tamaño fijo. El texto debe ser escalable. Usar tamaño fijo para el texto y luego crear una ayuda artificial para cambiar el tamaño es poco lógico y profesional.
- Esconder la ayuda. Si se pone esta ayuda al menos deberÃa ser visible. De poco sirve poner la ayuda lejos del principio del texto y esperar a que el usuario llegue al tercer párrafo y vea el icono de ayuda
Veamos algunos ejemplos:
Uno de los más sangrantes es el del Ministerio de Sanidad y Consumo. Usa un icono de tamaño minúsculo, casi imposible de identificar aún teniendo muy buena vista. La primera vez que lo và confundà el icono “restaurar” con algún tipo de ayuda sonora, pues en lugar de ver una flecha tipo “deshacer” me pareció ver unos auriculares.
El diario El Mundo usa unos iconos relativamente intuitivos, aunque algo pequeños. Sin embargo, hacen la tonterÃa de asignarle al texto un tamaño fijo.
El diario El PaÃs usa tamaño escalable, sin embargo, emplea un icono de casi imposible interpretación y lo ubica muy lejos del principio del texto, con lo que normalmente el usuario habrá leÃdo ya buena parte del artÃculo cuando vea la opción de subir tamaño de letra. Si ha conseguido leer medio artÃculo sin cambiar el tamaño es que quizá no le hace falta. Pero si le hubiera hecho falta seguramente no habrÃa leÃdo hasta ese punto.
Informativos Tele 5 emplea tres iconos con diferentes tamaños para la letra ‘T’, sin mayor aclaración, lo que no es tampoco una buena solución. Además, el tamaño de letra es fijo.
La Comunidad Autónoma de la Región de Murcia cambió recientemente su diseño e incorporó esta función. Está ubicada arriba a la derecha y usa tamaño de letra escalable. Sin embargo, han usado un fondo degradado en los iconos, lo que los hace difÃciles de identificar a tan reducido tamaño.
Si pese a todo optamos por utilizar esas ayudas hagámoslo de forma parecida a como hace el diario 20minutos, que lo ubica arriba, a la altura del titular, e incorpora un texto que también cumple la misma función. Los iconos, no obstante, nos siguen pareciendo demasiado pequeños.
Y si realmente se trata de ayudar tal vez usar iconos no es lo más recomendable, pues es una idea difÃcil de transmitir mediante un pequeño icono. En los casos puntuales que se considere realmente necesaria la ayuda podrÃa bastar con hacer como en Blog Technostat, es decir, usar bien el texto para este fin, de la forma:
Tamaño de letra
Mayor | Menor | Normal
En definitiva, no queramos ser más papistas que el papa. Brindemos a los usuarios un tamaño de letra generoso y facilitemos que puedan cambiar el tamaño por defecto usando tamaños de letra escalables. Si finalmente ponemos este tipo de ayuda, hagámoslo de forma que la pueda ver bien alguien con dificultad de visión y procuremos que se entienda fácilmente la función de la ayuda.
Actualización 18/04/06:
Como bien dice Daniel (Torresburriel) en ¿Por qué deben ser accesibles los sitios web?, tal vez no he sido suficientemente claro y faltan en el texto algunos matices.
Primero. Lo de hacer hacer webs pseudoaccesibles sólo por moda no lo hace todo el mundo, sólo cierta gente que se preocupa más por aparentar y por la medalla que porque realmente esté bien hecho.
Segundo. Las ayudas que repiten funciones del navegador suelen estar mal resueltas y, por tanto, si se emplean ha de ser en casos particulares en que realmente hagan falta y, además, deben hacerse bien pues, de lo contrario, estorban más que ayudan.
Tercero. Evidentemente, la moda no es, ni debe ser, el único motivo para hacer sitios accesibles. El factor moda tiene mucho que ver con el factor ley. Es decir, ahora tenemos una ley que se supone que nos obliga a ser accesibles, pero la ley no está clara, ninguno tenemos claro del todo cómo actuar para cumplir la ley. Eso deja vÃa libre al mÃnimo común denominador (validación automática con TAW a nivel AA (o sólo A), sin más revisiones manuales ni nada) y a la medallitis, a aprovechar que parece que cumplo la ley para atribuirme un mérito especial, cuando cumplir la ley no deberÃa ser un mérito especial.
ArtÃculos Relacionados:
- Christian Heilmann. Seven Accessibility Mistakes (Part 2). Digital Web Magazine
- A. Fidalgo. Cómo cambiar el tamaño de letra. Usolab
- Motivos para hacer páginas accesibles. Úsalo.
Interesante post!
Hace un tiempo en el blog de usolab se hablo de este tema y se comentaron algunas formas de cambiar el tamaño de texto. Se puede leer en: http://www.usolab.com/wl/archives/000466.php
Un saludo!
Claro, ya decÃa yo. Me sonaba mucho haber leÃdo algo recientemente, pero no caà ni Google me ayudó a encontrarlo.
He actualizado poniendo un enlace a ese artÃculo e incorporando un ejemplo que alguien sugerÃa en los comentarios al artÃculo que citas.
Juan Carlos, apuntas como error tÃpico que se use Javascript para activar dicha función, pero… ¿existe alguna forma de hacerlo sin usar javascript?
hola, es el sitio web del Ministerio de Sanidad y Consumo.. no el de Cultura
1 saludo
Razón tienes, cambiado está pues.
[...] Es curioso, pero pese a ganarme unos cuantos coscurros de pan con la cosa de la accesibilidad web, tras leer el post de Juan Carlos García Gómez en Úsalo, titulado Botones para cambiar el tamaño de letra, me he vuelto a preguntar por qué eso de la accesibilidad web, ya que hay algunas cuestiones que se reflejan en el post de Juan Carlos, que me hacen pensar en los matices que, desde mi punto de vista, hacen de la accesibilidad web algo más que la obligación formal, que lo es, de los diseñadores web. [...]
Felicidades por el artÃculo y la nota final.
Desde mi punto de vista no serÃa necesario si cambiar el tamaño de la letra en el explorer fuese tan fácil como en Opera y Firefox, pero como no es asÃ, nos podemos encontrar tanta diversidad de opciones más o menos acertadas.
Como bien dices, lo bueno serÃa usar fuentes proporcionales, o no usar tamaños de fuentes: que cada usuario vea su página como más le gusta. Pero tenemos algunos problemas “sin importancia”:
Incluso usando fuentes proporcionales, no siempre se usan porcentajes similares. Lo normal suele ser usar fuentes entre el 80% y el 100% (menos puede ser demasiado ilegible y más allá del 100% nos parece grande). A aquà asumo mi culpa. Al final navengando incluso dentro de un mismo sitio, te ves forzado a cambiar el tamaño de texto porque el tamaño de fuente es distinto, aunque sea proporcional.
Si dejamos que las fuentes se ajusten a las preferencias del usuario, aquellas páginas diseñadas con tamaños absolutos o tablas, tienen un problema bastante grande. Tan grande, que les “estropea el diseño”.
Al final la mejor opción, es usar un navegador que te permita cambiar el tamaño de la fuente con facilidad, ya sabemos que en firefox acompañando a la tecla “control” los signos más o menos podemos aumentar o disminuir el tamaño de la fuente. De forma maliciosa me pregunto si en aquellas páginas que utilizan estas funciones que has mencionado, conocen estos sencillos trucos. Creo sinceramente que serÃa más útil indicar al internauta como cambiar el tamaño de la fuente en su navegador, que usar estos artificios que desde mi punto de vista no son muy necesarios (siempre y cuando no utilices el explorer y se diseñen las fuentes con tamaños fijos, claro).
Y como respuesta a Quattermain, en vez de usar javascript para cambiar el tamaño de las fuentes, se puede usar programación del lado del servidor, como PHP o Java.
Un bonito ejemplo más para tu galerÃa particular:
http://www.theage.com.au/news/breaking/microsoft-chief-predicts-fall-in-software-prices/2006/04/28/1145861504731.html
Interesante artÃculo.
Un saludo cordial
Si la gente supiese manejar el navegador no harÃa falta el tener que crear botoncitos para aumentar o reducir el texto.
De todas formas no cuesta nada ponerlo en cualquier página con mucho texto.
Excelente entrada.
Si hubiera leido tu post antes…
Muy bueno el artÃculo.
¿Me podrÃais decir algún sitio donde expliquen cómo hacer esto de poner enlaces para aumentar y disminuir texto? De la forma correcta, me refiero, como en 20 Minutos por ejemplo.
Saludos
http://www.elmundo.es tiene un nuevo diseño ¿accesible?
Su comentario
Muy interesante el tema, me gustarÃa aprender mas acerca de esto, en vista que segun mi opinión, los sitios web deben tener cierto nivel de accesibilidad “obligatoria”, digo esto porque es imposible determinar la edad o estado de salud de los usuarios que ingresarán a el, es decir, me parece que un sitio web independientemente del tipo de sitio que sea, debe ser fácil de usar para los menos familiarizados con el uso de webs o exploradores, a la vez que su diseño sea atractivo y algo realmente utilizable. Lei que alguien comento en este post:
“Si la gente supiese manejar el navegador no harÃa falta el tener que crear botoncitos para aumentar o reducir el texto.”
seria maravilloso que todos lo supieran, pero no es asi, existen muchos elementos y factores que hacen mas dificil el proceso para unos que para otros, por tanto pienso que debe tomarse siempre eso en cuenta al momento de diseñar (no solo graficamente) un sitio web.
Felicitaciones por el artÃculo!
la verdad muy buan la info, loo qe pasa es qe yo , tengo el opera, y no encuentro la opcion para achicar la letra. :S
si podes ayudarme te lo agradeseria mucho !
buen artÃculo, aunque yo estaba buscando como intercambiar dinámicamente entre 2 css para cambiar la apariencia de mi blog con una plantilla normal y otra para eventos o festividades especiales. No solamente cambiar el tamaño de fuente, que tienes razón, fuentes de tamaño fijo… ejem ejem cada uno como quiera. sino cambiar color, imagenes, etc
Pienso que una web, y me refiero a propia no a una empresa o sitio oficial… debe estar primero a gusto del dueño y que la gente le visite por que le gusta el contenido y su navegación sea cómoda. Pretender hacer una página para que guste a todos puede acabar siendo un caos de código y de información.
Es como si en mi web sobre mitologÃa e historia meto de vez en cuando algo sobre, no sé, gran hermano, porque se que la gente lo va ha visitar como palomas a las migas. Y poner wallpaper del edredoning, sonidos de fondo con discusiones del programa… para gusto del consumidor.
Accesibilidad si, pero solo falta poner un tutorial al principio de la web de “como leer el contenido de esta web, prestad atención”
Excelente artÃculo, lo he citado en mi blog de diseño http://www.creativame.com
Me parece salido de foco tu comentario… que es moda?¿?¿?
que es innecesario.. te digo pareces aprendizzz… yo e hecho varias paginas y una de ellas fue para la federacion de discapacitados.. y creeme que esa herramienta para una persona de baja vision le ayuda bastante… ponte a pensar mejor en la accesibilidad antes de poner criticas estupidas… INNECESARIO ESTA TU COMENTARIO¡¡¡
Tanta pendejada y tanto complique que javascript, iconos y toda esa mierda. Para no complicarse la vida pongan al princi[io de sus archivo:
-aumentar tamaño texto = CTRL (+)
- disminuir tamaño texto = CTRL (-)
Alguien conoce de algún ejemplo donde además de aumentar el tamaño de las letra aumente también el de las imágenes.
yo creo q no se
Su comentariono sean maricas