Tamaño de fuente accesible, explicado

Las Pautas de accesibilidad al contenido web (WCAG), una organización que define estándares para la accesibilidad del contenido web, no especifica un tamaño de fuente mínimo para la web.

Pero sabemos que existe el texto que es demasiado pequeño para ser legible, al igual que el texto que puede ser demasiado grande para consumirlo. Entonces, ¿cómo podemos asegurarnos de que nuestros tamaños de fuente sean accesibles? ¿En qué tipo de mejores prácticas podemos confiar para crear una experiencia de lectura accesible?

La respuesta: no depende de nosotros. Depende™. Hablaremos de algunos detalles más adelante pero, por ahora, exploramos los requisitos WCAG para fuentes.

Tamaño, contraste y 300 alfabetos.

Primero, cambie el tamaño del texto. Queremos ofrecer a los usuarios con problemas de visión una forma de elegir cómo se muestran las fuentes. No de una manera loca. Más bien la capacidad de aumentar el tamaño en un 200% manteniendo la legibilidad y evitando colisiones y superposiciones de contenido.

En segundo lugar, hay contraste. Por eso dije “depende” de lo que hace que un tamaño de fuente sea accesible. El texto debe seguir una relación de contraste de al menos 4,5:1, con la excepción de un texto de gran tamaño que debe tener una relación de contraste de al menos 3:1. Puede utilizar herramientas como el Comprobador de contraste de WebAIM para asegurarse de que su texto cumpla con las pautas. La profunda inmersión de Stacy Arrelano sobre el contraste de color proporciona una excelente explicación de cómo se calculan las relaciones de contraste.

Hay alrededor de 300 alfabetos en el mundo. Algunos caracteres son simples y legibles en tamaños más pequeños, otros son increíblemente complejos y perderían detalles vitales en el mismo tamaño. Es por eso que las especificaciones no pueden definir un tamaño de fuente que cumpla con las especificaciones de relaciones de contraste.

Y cuando hablamos de tamaños de “texto” y “texto grande”, nos referimos a lo que la especificación llama “el tamaño de letra grande mínimo utilizado para esos idiomas y el siguiente tamaño de letra grande estándar más grande”. Para cumplir con los criterios AAA utilizando texto romano, por ejemplo, “grande” equivale a 18 puntos. Dado que vivimos en un mundo con diferentes densidades de pantalla, las especificaciones miden los tamaños en puntos, no en píxeles, y en algunas pantallas, 18 puntos equivalen a 24 píxeles. Para otras fuentes, como CJK (china, japonesa, coreana) o árabe, el tamaño real en píxeles sería diferente. Aquí está la palabra “Hola” comparada con otros tres idiomas:

Hola สวัสดี مرحبا 你好

En resumen, las WCAG especifican contraste en lugar de tamaño.

Aquí está la buena noticia: los estilos predeterminados de un navegador son accesibles y podemos aprovecharlos para crear una estrategia de tamaño de fuente accesible. Veamos cómo.

Piensa en proporciones, no en tamaño.

El navegador primero carga sus estilos predeterminados (también conocidos como “hoja de estilos del agente de usuario”), luego esos estilos se conectan en cascada a los estilos del autor (los que definimos), y ambos se conectan en cascada y se sobrescriben con los estilos del usuario.

Como menciona Adrian Sandu en su artículo sobre unidades CSS rem :

[…] hay un estudio empírico realizado por las personas detrás de Internet Archive que muestra que hay una cantidad significativa de usuarios que cambian el tamaño de fuente predeterminado en la configuración del navegador.

Tampoco controlamos completamente la font-familypropiedad. Es posible que el contenido esté traducido, que la familia de fuentes personalizadas no se cargue o incluso que se cambie. Por ejemplo, OpenDyslexic es un tipo de letra creado para aumentar la legibilidad para lectores con dislexia. En algunas situaciones, es posible que incluso permitamos explícitamente el cambio entre un conjunto limitado de fuentes.

Por lo tanto, al definir fuentes, debemos evitar obstaculizar la capacidad de un usuario o un dispositivo para cambiar nuestros estilos y dejar de lado las suposiciones: simplemente no sabemos dónde va a aterrizar nuestro contenido y no podemos estar seguros del tamaño, idioma o fuentes exactas que se utilizan para mostrar el contenido.

Pero hay una cosa que sí podemos controlar: las proporciones .

Al usar unidades relativas de CSS, podemos configurar nuestro contenido para que sea proporcional a lo que el entorno le indique. WCAG recomienda utilizar unidades para definir el tamaño de fuente. Hay varias publicaciones que analizan los beneficios de usar ems y rems y están fuera del alcance de este artículo. Lo que diría aquí es usar rems y ems para todo, incluso para otras propiedades además del tamaño de fuente (con la excepción de los bordes, donde uso píxeles).

Evite establecer un tamaño de fuente base

Mi recomendación es evitar establecer elementos font-sizeen :root, htmlo bodya favor de dejar que el tamaño predeterminado del navegador sirva como base desde donde podemos aplicar en cascada nuestros propios estilos. Dado que este valor predeterminado es accesible, el contenido también será accesible. El borrador de trabajo de WACAG 2.2 establece que:

Cuando se utiliza texto sin especificar el tamaño de fuente, el tamaño de fuente más pequeño utilizado en los principales navegadores para texto no especificado será un tamaño razonable para la fuente.

Por supuesto, existe una excepción a la regla. Cuando utilice una fuente compleja, delgada o súper corta con altura x, por ejemplo, podría considerar aumentar el tamaño de la base de la fuente para obtener el contraste correcto. Recuerde que la especificación define el contraste, no el tamaño:

Las fuentes con trazos extraordinariamente finos o rasgos y características inusuales que reducen la familiaridad de las formas de sus letras son más difíciles de leer, especialmente en niveles de contraste más bajos.

De la misma manera, un usuario puede cambiar el tamaño de la fuente base para adaptarlo a sus necesidades. Una persona con baja visión querría elegir un tamaño más grande, mientras que alguien con una visión excelente puede elegir un tamaño más pequeño para ganar espacio en sus pantallas.

Se trata de proporciones: definimos cuántos más grandes o más pequeñas deben ser las partes del contenido aprovechando la base predeterminada para establecer el tamaño del texto principal.

:root {  /* Do not set a font-size on a :root, body nor html level */  /* Let your main text size be decided by the browser or the user settings */ }.small {  font-size: .8rem;}.large {  font-size: 2rem;}

¿Qué pasa con los títulos?

Dado que los encabezados crean un esquema de documento que ayuda a los lectores de pantalla a navegar por un documento, no estamos definiendo selectores de tipo para tamaños de encabezado. El orden de los títulos es un criterio WCAG: los elementos del título deben organizarse en orden descendente sin saltarse un nivel, lo que significa que h4debe ir justo después de un h3.

A veces, restablecer el tamaño de fuente de todos los títulos 1remes una buena estrategia para hacer obligatoria la separación del tratamiento visual del significado.

¿Cómo podemos trabajar con píxeles?

Ambos remo emel tamaño son relativos a otra cosa. Por ejemplo, remcalcule el tamaño relativo al htmlelemento, donde emse calcula según el tamaño de su propio elemento. Puede resultar confuso, sobre todo porque muchos de nosotros llegamos a trabajar exclusivamente en píxeles.

Entonces, ¿cómo podemos seguir pensando en píxeles pero implementar unidades relativas?

La mayoría de las veces, una clasificación tipográfica está diseñada en píxeles. Como conocemos las hojas de estilo de los agentes de usuario y que todos los principales navegadores tienen un tamaño de fuente predeterminado 16px, podemos establecer ese tamaño para el texto principal y calcular el resto proporcionalmente con remlas unidades.

Ahora exploramos tres métodos para usar el tamaño relativo en CSS convirtiendo esos píxeles a unidades rem.

Método 1: la regla del 62,5%

Para convertir píxeles a rem sin problemas, podemos establecer el tamaño de la raíz en 62.5%. Eso significa que es 1remigual a 10px:

:root {  font-size: 62.5%; /* (62.5/100) * 16px = 10px */  --font-size--small: 1.4rem; /* 14px */  --font-size--default: 1.6rem; /* 16px */  --font-size--large: 2.4rem; /* 24px */}
.font-size--small {  font-size: var(--font-size--small);}.font-size--default {  font-size: var(--font-size--default);}.font-size--large {  font-size: var(--font-size--large);}

Método 2: usar la calc()función

También podemos calcular tamaños con CSS calc()dividiendo el valor del píxel por la base de fuente que suponemos que tienen la mayoría de los navegadores:

:root {  --font-size--small: calc((14/16) * 1rem); /* 14px */  --font-size--default: calc((16/16) * 1rem); /* 16px */  --font-size--large: calc((24/16) * 1rem); /* 24px */}
.font-size--small {  font-size: var(--font-size--small);}.font-size--default {  font-size: var(--font-size--default);}.font-size--large {  font-size: var(--font-size--large);}

Método 3: usar una función de “píxel a remoto”

De manera similar calc(), podemos aprovechar un preprocesador para crear una función de “píxel a remoto”. Hay implementaciones de esto en muchos sabores, incluido este mixin de Sass y el pulido de componentes con estilo.

:root {  --font-size--small: prem(14); /* 14px */  --font-size--default: prem(16); /* 16px */  --font-size--large: prem(24); /* 24px */}
.font-size--small {  font-size: var(--font-size--small);}.font-size--default {  font-size: var(--font-size--default);}.font-size--large {  font-size: var(--font-size--large);}

Incluso es posible crear una función de “píxel a remoto” con CSS básico:

¿Es posible crear una función “Pixel to rem” sin utilizar un preprocesador? ¡Si!

✨¡Míralo en acción! https://t.co/kPfIMxO0vw

cc/ @srambach @matthewcarleton #CSS #DontDoIt pic.twitter.com/PKxE7QCWuO

— Andrés Galante (@andresgalante) 3 de marzo de 2020

¡Abraza una web diversa!

La conclusión es la siguiente: no tenemos control sobre cómo se consume el contenido. Los usuarios tienen configuraciones de navegador personales, la capacidad de acercar y alejar y varias otras formas de personalizar su experiencia de lectura. Pero tenemos las mejores prácticas de CSS que podemos utilizar para mantener una buena experiencia de usuario junto con esas preferencias:

• Trabaje con proporciones en lugar de tamaños explícitos.
• Confíe en los tamaños de fuentes predeterminadas del navegador en lugar de configurarlos en :root, htmlo body.
• Utilice remunidades para ayudar a escalar el contenido según las preferencias personales de un usuario.
• Evite hacer suposiciones y deje que el entorno decida cómo se consume su contenido.

Un agradecimiento especial a Franco Correa por toda la ayuda al escribir esta publicación.