Accesibilitzant iconografia mitjançant pseudo-elements after i before

Fa alguns anys parlàvem en un article sobre l'accessibilitat dels continguts generats per CSS mitjançant els pseudo-elements before i after. Aquesta tècnica encara després de tants anys segueix utilitzant-se amb relativa freqüència a causa de l'existència d'iconografies de l'estil de Font Awesome o similars, per la qual cosa és interessant conèixer quines podrien ser les alternatives per accessibilitzar aquest contingut.

Utilitzarem aquest servei com a exemple ja que és un dels més comuns, a més que proporciona a la seva documentació informació sobre l' accessibilitat en Font Awesome, la qual cosa parla molt bé a favor seu, però això podria aplicar-se a qualsevol sistema similar, fins i tot a una iconografia corporativa que s'implementi mitjançant aquesta mateixa tècnica.

Hi ha diversos mètodes per afegir iconografia de Font Awesome a una pàgina web. Un pot ser utilitzant directament els pseudo-elements CSS, no obstant això, el més pràctic és utilitzar les classes ja proporcionades directament mitjançant etiquetes <span> o <i> d'HTML, que ja manegen els pseudoelements per darrere.

Afegint una icona

La sintaxi per afegir una icona normalment és la següent:

<i class="fa-solid fa-user"></i>

Tot i això, considerem que és més adequat utilitzar l'etiqueta <span>, ja que l'etiqueta <i> té un significat semàntic de lletra cursiva que en aquest cas no és aplicable:

<span class="fa-solid fa-user"></span>

Una tecnologia icona de qualsevol de les dues formes anteriors no serà detectada per les tecnologies d'assistència com un lector de pantalla, i inclusivament depenent de quin lector de pantalla s'utilitzi, la icona serà detectada com un caràcter desconegut.

Iconografia decorativa

El primer a determinar per saber quina solució d'accessibilitat se us donarà a la icona és si compleix una funció merament decorativa, o està indicant alguna acció a realitzar o proporcionant alguna informació.

Bàsicament i de forma funcional, podríem determinar que una icona és decorativa quan:

• No transmet cap informació addicional a la que transmet el seu context
• No teniu assignada cap acció en prémer-lo amb el teclat o amb el ratolí.
• En cas de fer una acció en ser polsat, està acompanyat d'un text que el descrigui, per exemple, formant part d'un botó o un enllaç textual.

Si es compleixen aquestes condicions, l'element s'ha de marcar com a decoratiu, i per això es pot utilitzar la recomanació d'accessibilitat de Font Awesome, que és mitjançant l'atribut ària-hidden.

<span class="fa-solid fa-user" aria-hidden=”true”></span>

Les versions més actuals d'aquesta llibreria ja ho fan per defecte, però és millor assegurar-se'n aplicant-ho de forma expressa.

Encara que en algunes pàgines es recomana l'ús de role=”presentation” o role=”none”, aquesta tècnica no impedeix que la icona segueixi sent detectada com un caràcter desconegut per alguns lectors de pantalla, per la qual cosa no la recomanem.

Iconografia informativa o d'acció

En cas que la imatge no compleixi les característiques anteriors, vol dir que, o transmet alguna informació addicional al seu context, o bé realitza alguna acció en ser polsada per ella mateixa.

Alguns exemples d'aquest cas serien:

• Una imatge d'una estrella que acompanya alguns elements d'una llista per indicar que són favorits, encara que no sigui interactiva per si mateixa.
• Una icona d'una lupa dins d'un botó, enllaç o qualsevol altre element, que en prémer executa una acció de cerca, i que no està acompanyat de cap text que el descrigui.

Per a aquests casos es poden utilitzar algunes de les tècniques següents

Rol d'imatge 

Aquesta tècnica consisteix a fer ús del rol ària d'imatge, a més de l'atribut title, per proporcionar una etiqueta accessible, acompanyada d'un tooltip visible. Un exemple podria ser el següent:

<span class="fa-solid fa-user" role=”img” title=”User”></span>

En aquest cas no s'ha d'utilitzar l'atribut alt, ja que aquest només és propi de les imatges natives, i no és detectat com a estàndard per tots els navegadors i lectors de pantalla quan es fa servir en un element no nadiu.

Ús dels atributs ària d'etiquetatge 

Segons la tècnica ària-24 de les WCAG 2.1, també es poden utilitzar els atributs aria-label i aria-labelledby.

<span class="fa-solid fa-user" aria-label=”User”></span>

En aquest cas només cal tenir en compte que l'atribut aria-label no proporciona una etiqueta visible, que encara no és indispensable, proporciona una millor experiència d'usuari, mentre que l'atribut aria-labelledby sí que ho fa, en aquest cas només cal tenir cura que la informació no resulti redundant.

Etiquetes d'accessibilitat ocultes per CSS 

Aquesta altra tècnica consisteix a amagar a l'accessibilitat la icona utilitzant l'atribut aria-hidden, però acompanyar-lo d'un element amagat a la vista per CSS que transmeti la mateixa informació de manera accessible.

L'element que transmeti la informació pot ser ocultat a la vista, però no a l'accessibilitat, per tant no s'ha d'utilitzar mai la regla display: 'none'; de CSS, sinó que cal utilitzar regles com les incloses a la classe visually-hidden de Bootstrap 5.

<span class="fa-solid fa-user" aria-hidden="true"></span>
<span class="visually-hidden">User</span>
Si no utilitzeu Bootstrap, podeu afegir la classe al CSS:

.visually-hidden,
.visually-hidden-focusable:not(:focus):not(:focus-within) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

Rol i Focus del teclat

No és una pràctica recomanable assignar esdeveniments directament als elements <span> o <i> que mostren una icona, ja que per si mateixos no són capaços de prendre focus amb el teclat, per la qual cosa tampoc proporcionen un focus visible, a més de no comptar amb un rol interactiu com els botons o els enllaços nadius.

La recomanació serà sempre utilitzar aquestes icones dins d'un element que ja proporcioni les apis d'accessibilitat necessàries per a teclat i focus, com ara els enllaços o botons nadius d'HTML.

No obstant això, en cas d'utilitzar-los sense algun d'aquests elements, també cal afegir-hi la capacitat de ser enfocats mitjançant el teclat usant l'atribut tabindex, un rol que permeti identificar que s'hi pot interactuar mitjançant l'atribut role, a més de dissenyar un focus visible amb alguna de les tècniques recomanades pel criteri 2.4.7 de la WCAG.

Conclusió

L'ús del contingut mitjançant pseudo-elements after i before no és recomanable ja que alguns usuaris poden necessitar sobreescriure les regles CSS per algunes personalitzades que satisfacin millor les seves necessitats, a més que els usuaris de lectors de pantalla no percebran adequadament aquests continguts.

Això no obstant, es poden utilitzar aquestes recomanacions per proporcionar algunes alternatives d'accessibilitat a aquests elements.

• Assegurar-se de marcar com a decoratius aquells elements o icones que ho siguin.
• Proporcionar textos alternatius accessibles i visibles a les icones que ho requereixin.
• Assegureu-vos que aquelles icones que requereixen interacció de l'usuari puguin ser accessibles també per teclat, tinguin un rol determinat, a més de proporcionar un focus visible adequat.

Finalment, fer èmfasi que en els suggeriments presentats en aquest article s'han utilitzat classes, ja que si s'estableixen els pseudo-elements directament usant un altre tipus de selectors CSS com el mateix ID, es torna més complex després localitzar els elements HTML als que cal afegir-hi les característiques d'accessibilitat.

Si aquest contingut ha estat útil, no oblidis compartir-lo a les xarxes socials.

 

Ernesto Blanco