WordPress Inclusivo 22: WCAG 2.1 en tipografías con proporción Áurea.

Hace algunas semanas, trabajamos con la generación automática de tamaños de fuente e interlineados, en esta ocasión, aprovechando este artículo sobre las novedades de WCAG 2.1, vamos a adaptar nuestro código a esta especificación de requisitos.

¿WCAG 2.1?

Las “Web Content Accessibility Guidelines” son, en esencia, las recomendaciones de cabecera a nivel mundial, aunque no es la única base.

En la actualidad la versión 2.1 es la versión vigente desde el 5 de junio de 2018, mi forma de trabajar implica que las guías son sólo un mínimo, por lo que tomaremos la versión más restrictiva de las recomendaciones siempre que sea posible.

Veamos que nos indica exactamente WCAG 2.1 al respecto de los elementos que puedan interesarnos en este instante, en el siguiente punto:

1.4.12 Espaciado de Texto (AA)

En contenido implementado con lenguajes de marcado que soporten las propiedades de estilo del texto siguientes no se produce ninguna pérdida de contenido o funcionalidad al ajustar todas estas propiedades y sin cambiar ninguna otra propiedad de estilo:

  • Altura de la línea hasta al menos 1,5 veces el tamaño de la fuente;
  • Espacio tras párrafo hasta al menos 2 veces el tamaño de la fuente;
  • Espacio entre letras (tracking) hasta al menos 0,12 veces el tamaño de la fuente;
  • Espacio entre palabras hasta al menos 0,16 veces el tamaño de la fuente.

Excepción: Los lenguajes humanos y el código que no usen una o más de estas propiedades en forma escrita pueden cumplir usando solamente las propiedades que existan para esa combinación de lenguaje y código.

Ajustando el Interlineado para cumplir WCAG 2.1

Como podemos ver, existe un requisito (el del interlineado), que si encaja con el trabajo ya realizado,respecto a la relación entre tamaño de fuente y tamaño de línea, en esta cuestión vamos a centrarnos en este capítulo.

Podemos observar que la altura mínima de una línea debe ser de al menos 1.5 veces el tamaño de la fuente. Comparando los cálculos que originaron nuestro método, observo que los tamaños mas grandes no cumplen los requisitos, mientras que del tamaño 3 en adelante si lo hacen.

El código

Por suerte, esta proporción entre tamaño de fuente e interlineado, es un conjunto de variables en nuestra implementación, por lo que simplemente hemos de ajustar el código del modo siguiente:

(...)
/* Definimos el factor base de interlineado. */
--muA: 1.5; /* WCAG 2.1 requires min of 1.5 (Old 1.447); */
--muB: 1.508; /* WCAG 2.1 requires min of 1.5 (Old 1.486) */
--muC: 1.517;
--muD: 1.565;
--muE: 1.667;
--muF: 1.786;
(...)

Como vemos sencillo, solo adaptamos dos de las proporciones para cumplir el requisito, lo del 1.508 ha sido algo arbitrario, ya que el mínimo era 1.5 y el tercero 1.517 he aprovechado para situar la proporción a medio camino haciendo un guiño a la Sección 508.

En subsiguientes capítulos abordaremos el resto de requisitos, implementando la parte automática que tome en cuenta la proporción aúrea y WCAG 2.1

¡Lucha contra el Imperio compartiéndolo en tus redes!

Ayudame a difundir este contenido a todo aquel que pueda sacarle partido, difundelo en redes, cuéntaselo a tus amigos, coméntalo en la cola del supermercado, además de aportar, ¡seguro que conoces a gente interesante y acabas uniéndose al bando rebelde!

Dibujo de un sable laser para ciegos con la estrella de la muerte de fondo

Inglés Catalán

Inglés Catalán

Quizá te interese ...

Una Respuesta a “WordPress Inclusivo 22: WCAG 2.1 en tipografías con proporción Áurea.”

Dejar una Respuesta

XHTML: Usted puede usar las siguientes etiquetas: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>