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

¡Compártelo!

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!

Sígueme en Redes

Acelera mi progreso de la materia que te interesa.

El calendario y ritmo de publicaciones actualmente responde a mis necesidades de estudio y desarrollo de proyectos personales, si quieres invertir en que acelere alguna materia concreta, te ofrezco una posibilidad:

Puedes donar en mi paypal (paypal at metsuke.com), indicando la materia, por cada 25 euros donados, priorizaré un capítulo de la materia que me indiques que ya tenga escrito para que salga el proximo dia viable y disponible de lunes a viernes (en orden de llegada y a un post diario).

En caso de que el capítulo aún no exista, centraré mi atención en escribirlos y publicarlos con prioridad, pero no puedo prometer inmediatez.

De nuevo priorizaré las donaciones por orden de llegada pero cuando coincidan varias, iré rotando cada dia una para evitar la monopolización de mi foco de tareas.

Me reservo el fin de semana para priorizar lo que considere pertinente en el caso de que haya cola de entrega. Si te gusta el proyecto, ¡es un buen modo de apoyarme!

¿Te interesan mis servicios a título personal?

Puedo ofrecerte una amplia gama de productos y servicios en accesibilidad a través de mis partners, aunque quizá prefieras que lo haga yo personalmente…

En ese caso, puedes contactarme en mi correo r.carrillo@metsuke.com y cuéntame que necesitas, si lo que leo me gusta, te pongo en contacto con el comercial de mi empresa de consultoría.

Si quieres que sea yo expresamente quien te atienda, puedes indicármelo y llegamos a un acuerdo.

Advierto que esta última posibilidad te saldrá bastante más cara que hablar con mi equipo, pero si es lo que deseas, a tu disposición.

Un Abrazo.

Sobre las traducciones

Por el momento me he visto obligado a detener la traducción del contenido, apenas doy abasto a escribirlo (que es mi objetivo, ya que son mis apuntes de estudio), por lo que no parece tener sentido mantener activas unas traducciones que no doy abasto a crear.

En caso de que más adelante el flujo de caja me lo permita, es mi intención contratar servicios de traducción y editores que realicen la tarea, pero por ahora lo dejo desactivado.


Quizá te interese leer más sobre Wordpress Inclusivo

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>