Accesibilidad y mayúsculas: por qué el texto TODO EN MAYÚSCULAS se lee peor
Escribir todo en mayúsculas está bien para una etiqueta de dos palabras y es mala idea para cualquier cosa más larga. Los tramos largos en mayúsculas se leen más despacio, eliminan información que sí transmite la escritura normal (¿«US» es el país o el pronombre inglés «us»?) y los lectores de pantalla casi siempre ignoran las mayúsculas, así que el énfasis que buscabas desaparece mientras alguna palabra corta acaba deletreada letra a letra. Lo accesible es escribir el texto con mayúsculas y minúsculas normales y, cuando el diseño de verdad pida mayúsculas, aplicarlas con CSS, aunque ni siquiera eso es infalible.
Por qué cuesta más leer tramos largos en mayúsculas
Los investigadores llevan casi un siglo comparando la lectura en mayúsculas y en minúsculas. El artículo de Kevin Larson para Microsoft, «The Science of Word Recognition», resume estudios que se remontan a Woodworth en 1938: los lectores terminaban los pasajes en minúsculas entre un 5 y un 10 % más rápido que esos mismos pasajes compuestos en mayúsculas.
La explicación más extendida es la «forma de la palabra»: las palabras en minúscula tienen un contorno característico gracias a los ascendentes y los descendentes, mientras que las mayúsculas convierten cada palabra en un rectángulo. Larson sostiene que las pruebas no lo respaldan. Reconocemos las palabras por sus letras, y la minúscula gana sobre todo porque es con lo que más practicamos. Quienes se ven obligados a leer mucho texto en mayúsculas acaban leyéndolo más deprisa.
Es una corrección útil, pero no salva el párrafo en mayúsculas de tu web. Tus lectores no han tenido esa práctica, y el coste recae sobre todo en quienes ya leen con esfuerzo. La página de MDN sobre text-transform advierte que los fragmentos extensos en mayúsculas «may be difficult for people with cognitive concerns such as Dyslexia to read» (pueden resultar difíciles de leer para personas con dificultades cognitivas, como la dislexia). La guía de estilo de GOV.UK lo demuestra con el propio ejemplo: «DO NOT USE BLOCK CAPITALS FOR LARGE AMOUNTS OF TEXT AS IT'S QUITE HARD TO READ.» (no uses mayúsculas en textos largos, porque cuesta bastante leerlos).
Las mayúsculas eliminan información
Combinar mayúsculas y minúsculas no es un adorno. Una mayúscula te dice que una palabra es un nombre, una sigla o el comienzo de una oración. Lee esto y fíjate en cuánto tienes que adivinar:
PLEASE CONTACT US ABOUT POLISH ORDERS IN MARCH. NASA SAYS HI.¿Estados Unidos (US) o nosotros (us)? ¿Clientes de Polonia (Polish) o cera para muebles (polish)? ¿El mes de marzo (March) o una marcha de protesta (march)? Una vez que el texto se ha escrito en mayúsculas, el software tampoco puede recuperar la respuesta. Pasa esa línea por la opción Oración (sentence case) de nuestro conversor de mayúsculas y minúsculas y obtendrás esto: «Please contact us about polish orders in march. Nasa says hi.» Pone todo en minúscula y la primera letra de cada oración en mayúscula, que es todo lo que puede saber. Los nombres hay que devolverlos a mano.
Qué hacen los lectores de pantalla con el texto en mayúsculas
Casi siempre, nada. Los lectores de pantalla pronuncian las palabras sin mencionar si están en mayúsculas. En 2022, el consultor de accesibilidad Adrian Roselli probó un texto legal en mayúsculas con JAWS, NVDA, Narrator, Orca, VoiceOver y TalkBack con la configuración predeterminada, y ninguno avisó al oyente de que el texto estaba en mayúsculas. Opciones como el cambio de tono de NVDA o «say cap» están pensadas para recorrer el texto carácter a carácter, no para frases leídas en voz alta.
Eso tiene dos consecuencias:
- Las mayúsculas que transmiten significado se pierden. Si las mayúsculas son tu forma de decir «esto importa» (una advertencia, una cláusula de un contrato, una palabra gritada), quien escucha oye texto corriente. Los lectores de braille son la excepción, porque el braille tiene un signo de mayúscula.
- Algunas palabras cortas se deletrean. Los motores de voz intentan adivinar si una secuencia de mayúsculas es una sigla. Roselli cita «AM», «ADD» e «IT» como palabras que los lectores de pantalla suelen deletrear cuando van en mayúsculas, y algunos profesionales cuentan que «CONTACT US» (contáctanos) acaba sonando como «contact U.S.» (contacto, EE. UU.).
Qué palabras se deletrean depende del lector de pantalla, de la voz, de la configuración del usuario y a veces del navegador, y cambia de una versión a otra. No se puede predecir de forma fiable, y ese es el mejor argumento para no poner en mayúsculas las palabras importantes desde el principio.
Nunca imites el espaciado entre letras con espacios
Las mayúsculas muy espaciadas son un recurso de diseño popular, y escribirlas como S A L E es la peor forma de conseguir ese aspecto. Los lectores de pantalla leen cada letra por separado, y las WCAG consideran un fallo «using white space characters to control spacing within a word» (usar caracteres de espacio en blanco para controlar el espaciado dentro de una palabra), en la técnica F32. Usa la propiedad CSS letter-spacing, como en el ejemplo de más abajo.
Usa CSS text-transform: uppercase en lugar de escribir en mayúsculas
Si un botón, una pestaña o un encabezado pequeño tiene que verse en mayúsculas, escríbelo con mayúsculas y minúsculas normales y deja que CSS cambie su aspecto:
<button class="caps">Add to basket</button>
.caps {
text-transform: uppercase;
letter-spacing: 0.06em; /* capitals need a little extra room */
}El texto de tu HTML sigue siendo «Add to basket» (añadir a la cesta), y eso te aporta varias ventajas:
- Los rediseños salen baratos. Quitar las mayúsculas más adelante es una línea de CSS, no una búsqueda por todas las etiquetas y todos los archivos de traducción.
- El texto viaja bien. Los feeds, las exportaciones y cualquier otro sitio al que no llegue tu hoja de estilos reciben las palabras con sus mayúsculas correctas.
- Los idiomas se gestionan solos. Los navegadores aplican las reglas de cada idioma a partir del atributo
lang. La referencia de MDN sobre text-transform las enumera: por ejemplo, las vocales griegas pierden el acento en mayúsculas, y el turco emparejaiconİ. Con CSS, el griego guardado conserva sus acentos; con mayúsculas escritas a mano, los perdería para siempre.
Pero no hay que venderlo como la solución perfecta. Los navegadores pueden pasar el texto transformado a las tecnologías de apoyo. Un error de WebKit registrado en 2016, que sigue abierto, describe cómo VoiceOver lee un botón «Add to Cart» con estilo en mayúsculas como «A D D to cart», y hay desarrolladores que han visto lo mismo con VoiceOver en Chrome. Además, las mayúsculas hechas con CSS siguen siendo mayúsculas para quien lee con la vista, así que el coste de los tramos largos no cambia. Considera text-transform la forma correcta de poner unas pocas palabras en mayúsculas, no un permiso para componer párrafos enteros así.
Cuándo las mayúsculas están bien y qué usar en su lugar
Las mayúsculas no están prohibidas. Las WCAG no tienen ningún criterio de conformidad en su contra, y los tramos cortos dan pocos problemas. Nosotros las reservaríamos para:
- Siglas y acrónimos de verdad, como NASA, HTML y BBC.
- Etiquetas cortas, pestañas y la pequeña línea de antetítulo que va encima de un encabezado. Nuestra regla práctica: tres palabras como máximo, aplicadas con CSS.
- Una sola palabra en un distintivo, como «New» (nuevo), siempre que nada dependa de oírla como algo especial.
Para todo lo demás, recurre a algo que sobreviva a un cambio de estilos o a la lectura en voz alta:
- Énfasis: usa
<strong>y dale estilo con el grosor o el tamaño. La mayoría de los lectores de pantalla tampoco anuncian la negrita por defecto, así que pon lo importante en las propias palabras: «You can't undo this» (no se puede deshacer) dice más que cualquier formato. - Advertencias: un encabezado corto y claro («Deleting your account removes all your files», es decir, eliminar tu cuenta borra todos tus archivos) hace el trabajo que intentaba hacer un bloque de mayúsculas, y además se pronuncia.
- Textos legales: en EE. UU., los contratos suelen poner las exenciones de garantía en mayúsculas porque el Uniform Commercial Code exige que sean «conspicuous» (llamativas). Su definición no exige mayúsculas en el cuerpo de un documento: también valen una letra más grande, un tipo, una fuente o un color que contrasten, o marcas que distingan el texto. Consulta con quien redacte tus condiciones antes de cambiarlas, pero las mayúsculas no son la única vía.
Las «versalitas» de Unicode no son mayúsculas
Nuestro generador de texto con fuentes Unicode tiene un estilo Versalitas (small caps), y conviene ser sinceros sobre lo que produce. Escribe «Sale on now» y obtendrás «sᴀʟᴇ ᴏɴ ɴᴏᴡ». No son letras dibujadas más pequeñas: son caracteres distintos, sacados en su mayoría de alfabetos fonéticos. Algunas letras no tienen versión en versalita, y por eso la «s» se queda como una s minúscula normal y la «q» sale como «ǫ», una o con ogonek.
Para el software son símbolos sin relación con las letras normales, así que los correctores ortográficos suelen marcarlos y las búsquedas de la palabra normal pueden no encontrarlos. Los lectores de pantalla tratan de forma muy dispar los caracteres que imitan letras; cuando se probaron unas letras parecidas de «falsa negrita», algunos lectores de pantalla se saltaron las palabras por completo. Nuestra guía para escribir para lectores de pantalla repasa esa prueba. Usa estos estilos como adorno junto a texto normal, nunca para palabras que alguien necesite oír.
Lista rápida para usar bien las mayúsculas
- Escribe el texto con mayúsculas y minúsculas normales y aplica las mayúsculas con
text-transform. - Limita las mayúsculas a unas pocas palabras. Nunca un párrafo.
- Añade un poco de
letter-spacinga las mayúsculas, y nunca uses espacios para eso. - Pon el significado en las palabras, no en el formato.
- Escucha tus botones y etiquetas clave con VoiceOver y NVDA antes del lanzamiento.
- No uses letras Unicode de imitación en nada que importe.
Para los casos en los que las mayúsculas sí tienen su sitio en la escritura, de las siglas a los encabezados legales, consulta nuestra guía sobre cuándo usar mayúsculas.
