Accesibilizando iconografía mediante pseudo-elementos after y before

Hace algunos años hablábamos en un artículo sobre la accesibilidad de los contenidos generados por CSS mediante los pseudo-elementos before y after. Esta técnica aún después de tantos años sigue utilizándose con relativa frecuencia debido a la existencia de iconografías del estilo de Font Awesome o similares, por lo que resulta interesante conocer cuáles podrían ser las alternativas para accesibilizar este contenido.

Utilizaremos este servicio como ejemplo ya que es uno de los más comunes, además de que proporciona en su documentación información sobre accesibilidad en Font Awesome, lo cual habla muy bien a su favor, pero esto podría aplicarse a cualquier sistema similar, incluso a una iconografía corporativa que se implemente mediante esta misma técnica

Existen varios métodos de añadir iconografía de Font Awesome en una página web. Uno de ellos puede ser utilizando directamente los pseudo-elementos CSS, no obstante, lo más práctico es utilizar las clases ya proporcionadas directamente mediante etiquetas <i> o <span> de HTML, que ya manejan los pseudo-elementos por detrás.

Añadiendo un icono

La sintaxis para añadir un icono normalmente es la siguiente:

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

No obstante, consideramos que es más adecuado utilizar la etiqueta <span>, ya que la etiqueta <i> tiene un significado semántico de letra cursiva que en este caso no es aplicable:

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

Un icono añadido de cualquiera de las dos anteriores formas no será detectado por las tecnologías de asistencia como un lector de pantalla, e inclusive dependiendo de cuál lector de pantalla se utilice, el icono será detectado como un carácter desconocido.

Iconografía decorativa

Lo primero a determinar para saber qué solución de accesibilidad se le dará al icono es si cumple una función meramente decorativa, o está indicando alguna acción a realizar o proporcionando alguna información.

Básicamente y de forma funcional, podríamos determinar que un icono es decorativo cuando:

• No transmite ninguna información adicional a la que transmite su contexto
• No tiene asignada ninguna acción al pulsarlo con el teclado o con el ratón.
• En caso de realizar una acción al ser pulsado, está acompañado de un texto que lo describa, por ejemplo, formando parte de un botón o enlace textual.

Si se cumplen estas condiciones, el elemento debe marcarse como decorativo, y para ello puede utilizarse la recomendación de accesibilidad de Font Awesome, que es mediante el atributo aria-hidden.

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

Las versiones más actuales de esta librería ya realizan esto por defecto, pero es mejor asegurarse de ello aplicándolo de forma expresa.

Aunque en algunas páginas se recomienda el uso de role=”presentation” o role=”none”, esta técnica no impide que el icono siga siendo detectado como un carácter desconocido por algunos lectores de pantalla, por lo que no la recomendamos.

Iconografía informativa o de acción

En caso de que la imagen no cumpla las características anteriores, quiere decir que, o está transmitiendo alguna información adicional a su contexto, o bien realiza alguna acción al ser pulsada por sí misma.

Algunos ejemplos de este caso serían:

• Una imagen de una estrella que acompaña a algunos elementos de una lista, para indicar que son favoritos, aunque no sea interactiva por sí misma.
• Un icono de una lupa dentro de un botón, enlace o cualquier otro elemento, que al ser pulsado ejecuta una acción de búsqueda, y que no está acompañado de ningún texto que lo describa.

Para estos casos pueden utilizarse algunas de las siguientes técnicas

Rol de imagen

Esta técnica consiste en hacer uso del rol aria de imagen, además del atributo title, a fin de proporcionar una etiqueta accesible, acompañada de un tooltip visible. Un ejemplo podría ser el siguiente:

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

En este caso no debe utilizarse el atributo alt, ya que este solo es propio de las imágenes nativas, y no es detectado como estándar por todos los navegadores y lectores de pantalla cuando se usa en un elemento no nativo.

Uso de los atributos aria de etiquetado

Según la técnica aria-24 de las WCAG 2.1, también pueden utilizarse los atributos aria-label y aria-labelledby.

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

En este caso solo hay qué tener en cuenta que el atributo aria-label no proporciona una etiqueta visible, que aún no ser indispensable, proporciona una mejor experiencia de usuario, mientras que el atributo aria-labelledby si que lo hace, en cuyo caso solo hay qué cuidar que la información no resulte redundante.

Etiquetas de accesibilidad ocultas por CSS

Esta otra técnica consiste en ocultar a la accesibilidad el icono utilizando el atributo aria-hidden, pero acompañarlo de un elemento ocultado a la vista por CSS que transmita la misma información de forma accesible.

El elemento que transmita la información puede ser ocultado a la vista, pero no a la accesibilidad, por lo que no debe utilizarse nunca la regla display: 'none'; de CSS, sino que deben utilizarse reglas como las incluídas en la clase visually-hidden de Bootstrap 5.

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

Si no se está utilizando Bootstrap, puede añadirse la clase 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 y Foco del teclado

No es una práctica recomendable asignar eventos directamente a los elementos <span> o <i> que muestran un icono, ya que por sí mismos no son capaces de tomar foco con el teclado, por lo que tampoco proporcionan un foco visible, además de no contar con un rol interactivo como los botones o los enlaces nativos.

La recomendación será siempre utilizar estos iconos dentro de un elemento que ya proporcione las apis de accesibilidad necesarias para teclado y foco, tal como los enlaces o botones nativos de HTML.

No obstante, en caso de utilizarlos sin alguno de estos elementos, deberá también añadírseles la capacidad de ser enfocados mediante el teclado usando el atributo tabindex, un rol que permita identificar que se puede interactuar con ellos mediante el atributo role, además de diseñar un foco visible con alguna de las técnicas recomendadas por el criterio 2.4.7 de la WCAG.

Conclusión

El uso del contenido mediante pseudo-elementos after y before no es recomendable ya que algunos usuarios pueden necesitar sobrescribir las reglas CSS por algunas personalizadas que satisfagan mejor sus necesidades, además de que los usuarios de lectores de pantalla no percibirán adecuadamente estos contenidos.

No obstante, pueden utilizarse estas recomendaciones para proporcionar algunas alternativas de accesibilidad a estos elementos.

• Asegurarse de marcar como decorativos aquellos elementos o iconos que lo sean.
• Proporcionar textos alternativos accesibles y visibles a aquellos iconos que lo requieran.
• Asegurarse que aquellos iconos que requieren interacción del usuario puedan ser accesibles también por teclado, tengan un rol determinado, además de proporcionar un foco visible adecuado.

Por último, hacer énfasis en que en las sugerencias presentadas en este artículo se ha utilizado clases, ya que de establecerse los pseudo-elementos directamente usando otro tipo de selectores CSS como el propio ID, se vuelve más complejo luego localizar los elementos HTML a los que debe añadírseles las características de accesibilidad.

Si este contenido ha sido de utilidad, no olvides compartirlo en las redes sociales.