WordPress Inclusivo 23: WCAG 2.1 en tipografías con proporción Áurea (Segunda parte).

En el capítulo anterior identificamos los elementos de WCAG 2.1 que tenían que ver con nuestras fuentes de proporción áurea, en este capítulo, implementaremos los elementos avanzados

Espaciado después de un párrafo

Espacio tras párrafo hasta al menos 2 veces el tamaño de la fuente;

Este parece un caso sencillo, dado que usamos fuente5 como fuente para párrafos, simplemente asignaremos un margen del doble de ese tamaño de fuente.

Evaluando cual era el mejor método para incorpòrar esta propiedad de un modelo más genérico posible, he descubierto que existe una propiedad css específica para ello.

Además tiene como ventaja que toma en consideración la orientación del texto, esta propiedad es margin-block-end, que básicamente establece el margen “al final del elemento”, esté este final donde esté. no necesariamente debajo.

El código a incluir sería el siguiente (no olvidemos que el tamaño de fuente genérico está definido en *):

p {
	margin-block-end: calc(var(--fuenteBase)*2);
}

Espacio entre letras dentro de un párrafo

Espacio entre letras (tracking) hasta al menos 0,12 veces el tamaño de la fuente;

Entiendo que está, al igual que el elemento anterior, relacionado con un parrafo, más después de probar con encabezados y ver que los deforma completamente.

(...)
/* Espacio entre letras (tracking) en párrafos mínimo 0.12 de tamaño (WCAG 2.1) */
--TrackingFactor: 0.12;
--fuenteBaseTrackling: calc(var(--fuenteTextoSize)*var(--TrackingFactor));
(...)

Ya tenemos los tamaños, ahora implementemos esta distancia en cada elemento, a través de la propiedad css “letter-spacing“:

(...)
* {
  font-family: var(--fuenteTextos);
  font-size: var(--fuenteBase);
  line-height: var(--interlineadoBase);
  letter-spacing: var(fuenteBaseTrackling);
}
(...)

Espacio entre palabras dentro de un párrafo

Espacio entre palabras hasta al menos 0,16 veces el tamaño de la fuente.

En este caso aplicaremos la misma metodología que en punto anterior, usando la propiedad css “word-spacing

(...)
/* Espacio entre palabras en parrafos minimo 0.16 de tamaño (WCAG 2.1) */
--WordSpacingFactor: 0.16;
--fuenteBaseWordSpacing: calc(var(--fuenteTextoSize) * var(--WordSpacingFactor));
(...)
* {
  font-family: var(--fuenteTextos);
  font-size: var(--fuenteBase);
  line-height: var(--interlineadoBase);
  letter-spacing: var(--fuenteBaseTrackling);
  word-spacing: var(--fuenteBaseWordSpacing); 
}
(...)

Y listo, he de seguir atento a diferentes implementaciones en webs del sector y como otros consultores trasponen esta norma, porque tengo mis dudas respecto de su aplicación a encabezados.

El cambio visual se nota, así que necesito saber más para poder aportar de forma sólida una visión, pero por ahora es esta, sólo párrafos (y elementos de tamaño de fuente equivalente).

¡Seguimos Avanzando!

¡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 como consultor?

En ese caso, pudedes 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

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>