Crear activos accesibles: Tipografía

Un texto claro y legible es esencial para un sitio web accesible. La tipografía afecta a la facilidad con la que los usuarios pueden escanear, comprender y comprometerse con tu contenido. En este artículo, aprenderás a elegir fuentes accesibles, a establecer tamaños e interlineados adecuados y a estructurar el texto para que sea legible. Sigue estas directrices para asegurarte de que tu tipografía favorece una experiencia inclusiva para todos los visitantes.

Requisitos

• Cuando utilices lenguajes de marcado que admitan determinadas propiedades de estilo de texto, ajustar estas propiedades como se indica a continuación no causará ninguna pérdida de contenido o función:
  • Ajusta la altura de línea (interlineado) al menos a 1,5 veces el tamaño de la fuente;
  • Establece el espaciado tras los párrafos en al menos 2 veces el tamaño de la fuente;
  • Establece el espaciado entre letras (tracking) en al menos 0,12 veces el tamaño de la fuente;
  • Establece el espaciado entre palabras en al menos 0,16 veces el tamaño de la fuente.
• El texto puede cambiar de tamaño hasta un 200% sin pérdida de contenido o funcionalidad sin tecnología de apoyo.
• La página debe seguir siendo funcional.
• La página debe permitir a los usuarios hacer zoom en los dispositivos móviles. Lo siguiente NO está permitido:
  <meta name="viewport" content="user-scalable=no">.
• El contenido puede presentarse sin pérdida de información o funcionalidad y sin requerir desplazamiento en dos dimensiones para:
  • Contenido de desplazamiento vertical a una anchura equivalente a 320 píxeles CSS;
  • Contenido de desplazamiento horizontal a una altura equivalente a 256 píxeles CSS.
• Proporciona una alternativa de texto para el contenido informativo generado por CSS, y considera la posibilidad de establecer el texto generado por CSS en aria-hidden="true".
• No utilices texto en imágenes si puedes utilizar texto real en su lugar, a menos que sea esencial (como un logotipo) o necesites fuentes, tamaños, colores o fondos específicos.
• Si es necesario utilizar la imagen del texto, sigue las directrices de color y contraste.
• El texto debe seguir las directrices de color y contraste.

Excepciones

Desplazamiento en dos dimensiones

Está permitido para secciones del contenido que necesiten una disposición bidimensional para su comprensión o usabilidad, por ejemplo, tablas grandes.

Espaciado de texto para idiomas específicos

Algunas propiedades de estilo de texto pueden no aplicarse a todas las lenguas y escrituras. Por ejemplo, el espaciado entre letras puede no aplicarse a las lenguas que utilizan logogramas, como el chino. Sin embargo, el espaciado entre palabras y la altura de línea seguirían siendo relevantes en estos casos.

Ejemplos

	HACER: Al utilizar el zoom general en Chrome, la página no pierde su funcionalidad, y el diseño se mantiene útil e intacto. Además, el orden de los elementos sigue siendo el mismo.
	NO HACER: En este ejemplo, el div que contiene el texto está configurado en píxeles (px), por lo que no se expande con el contenido. Establecer la altura del div en relación con la altura de la fuente utilizando ’em’ o no establecer la altura del div en absoluto evitaría que el texto desbordara el div.