Addaw, ir a inicio Donar

Técnica ARIA WCAG 2.2

ARIA24Marcar los iconos de fuente con role="img" para que no desaparezcan

Nombre oficial en el W3C: Identificar semánticamente un icono de fuente con role="img"

En pocas palabras

Muchas webs dibujan iconos con una fuente especial, como Font Awesome. Algunas personas con baja visión cambian todas las fuentes por otra que leen mejor, y esos iconos se rompen. Si cada icono con significado lleva role="img", la herramienta que cambia las fuentes puede saltárselo y el icono se sigue viendo.

Por qué es importante

Una persona con baja visión o con dislexia puede usar una extensión o una hoja de estilo propia que cambia la fuente de toda la página. Si el icono es un carácter de una fuente de iconos, se convierte en un cuadrado vacío o en una letra sin sentido.

Así pierde información, como la estrella de «favorito» o el sobre de un enlace de correo. Con role="img", su hoja de estilo puede excluir los iconos y dejarlos como están.

Cómo se hace

  1. Ponga cada icono con significado en su propio elemento, por ejemplo un <span>.
  2. Añádale role="img" y un nombre con aria-label, como aria-label="Favorito".
  3. Si el icono acompaña a un texto visible que ya lo explica, añada aria-hidden="true" para que no se lea dos veces. Mantenga role="img" para que no desaparezca.
  4. Así, la persona puede cambiar las fuentes con un selector como *:not([role="img"]), que deja los iconos intactos.
  5. Si puede, use iconos SVG en lugar de fuentes de iconos. No dependen de la fuente.

Cómo comprobarlo

  1. Localice los iconos hechos con fuentes. Suelen ser elementos vacíos con clases como icon- o fa-.
  2. Compruebe que cada icono con significado tiene role="img".
  3. Compruebe que tiene nombre con aria-label, o aria-hidden="true" si ya hay texto visible que lo explica.
  4. Aplique una hoja de estilo o extensión que cambie la fuente de todo salvo [role="img"]. Los iconos deben seguir viéndose.

Ejemplo

Icono de estrella marcado como imagen y la hoja de estilo que usaría la persona para cambiar las fuentes.

<span class="icono icono-estrella" role="img" aria-label="Favorito"></span>

<style>
  /* Hoja de estilo de la persona usuaria */
  *:not([role="img"]) {
    font-family: Verdana, sans-serif !important;
  }
</style>
Ver el texto completo del W3C (traducción al español)

Esta es una traducción no oficial al español de la técnica ARIA24 de Techniques for WCAG 2.2, del W3C. Puede contener errores. El único documento oficial y normativo es la versión original en inglés, publicada en el sitio web del W3C.

Descripción

El objetivo de esta técnica es mostrar cómo identificar semánticamente un elemento que usa un archivo de fuente para mostrar iconos. Cuando un usuario anula la propiedad font-family, estos iconos suelen desaparecer, salvo que exista un medio para identificarlos. La finalidad es ofrecer una técnica para diferenciar las fuentes de iconos del uso general de fuentes (texto).

Algunas personas con baja visión necesitan hojas de estilo de usuario, scripts o extensiones para anular las fuentes de una página y poder percibir el contenido textual. Sin embargo, necesitan seguir percibiendo los iconos de fuente que tienen significado, como una estrella que indica un favorito o un icono de correo electrónico en un enlace.

La clave está en que el autor marque semánticamente los iconos de fuente con role="img". De este modo, el selector de sustitución de fuentes del usuario puede apoyarse en esa semántica y excluir role="img". El resultado es que esos iconos de fuente se siguen mostrando.

Principio básico de la técnica

1. El autor añade una font-face al CSS

El primer paso sirve para añadir una fuente con iconos mediante el archivo CSS.

/* specify font-family name for icons */
@font-face { font-family: 'IconFontRoleImg'; }
/* default class for fonts-face with icons */
.icon,
[class^="icon-"],
[class*=" icon-"] { font-family: 'IconFontRoleImg' !important; }
/* specific class for icon */
.icon-star-bg:before { content: "\e982"; }

2. El autor añade las clases de la fuente al HTML

El segundo paso añade las clases, el atributo role="img" para la semántica y un nombre accesible.

<!-- icon via class names, role="img" and a text alternative -->
<p>
  <span class="icon icon-star-bg" role="img" aria-label="Favorite"></span>
</p>

3. El archivo CSS del usuario sustituye la font-family salvo en el archivo de iconos

El tercer paso usa el «selector :not» en combinación con el «selector de [atributo]» para sustituir únicamente las fuentes del texto normal.

/* replaces font faces but excludes all elements with attribute role="img" */
*:not([role="img"]) { font-family: Verdana, sans-serif !important; }

Ejemplos

Icono de fuente de estrella usado como indicador (no interactivo)

En este ejemplo se usa un icono de estrella para indicar un favorito. No es interactivo y no desaparece si el usuario anula la familia de fuentes mediante CSS.

CSS del autor

/* default class for fonts-face with icons */
.icon { font-family: 'IconFontRoleImg' !important; }
/* specific class for icon */
.icon-star-bg:before { content: "\e982"; }

HTML

- En lugar de... -
<p>
  <span class="icon icon-star-bg"></span>
</p>
- Haga... -
<p>
  <span class="icon icon-star-bg" role="img" aria-label="Favorite"></span>
</p>

CSS del usuario

*:not([role="img"]) { font-family: Verdana, sans-serif !important; }

Ejemplo funcional:

Icono de fuente de estrella usado como indicador (no interactivo)

Icono de fuente de estrella bicolor / superpuesta usado como indicador

En este ejemplo se crea un icono de estrella bicolor superponiendo dos fuentes de distinto color una encima de la otra. De esta forma es posible simular que solo la mitad de la estrella está rellena. No es interactivo y no desaparece si el usuario anula la familia de fuentes mediante CSS.

CSS del autor

/* default class for fonts-face with icons */
.icon { font-family: 'IconFontRoleImg' !important; }
/* specific classes for icons */
.icon-star-bg:before    {content: "\e982"; }
.icon-star-half:before  {content: "\e983"; }

HTML

- En lugar de... -
<span class="icon-stacked">
  <span class="icon icon-star-bg grey"></span>
  <span class="icon icon-star-half yellow"></span>
</span>
- Haga... -
<span class="icon-stacked" role="img" aria-label="Favorite star half filled">
  <span class="icon icon-star-bg grey" role="img" aria-hidden="true"></span>
  <span class="icon icon-star-half yellow" role="img" aria-hidden="true"></span>
</span>

CSS del usuario

*:not([role="img"]) { font-family: Verdana, sans-serif !important; }

Ejemplo funcional:

Icono de fuente de estrella bicolor / superpuesta usado como indicador

Icono de fuente de correo electrónico en un enlace SIN texto visible

En este ejemplo hay un icono de correo electrónico dentro de un enlace sin texto visible. No desaparece si el usuario anula la familia de fuentes. La tecnología de asistencia identifica el icono de fuente como una «imagen de enlace» con el nombre "Email" (correo electrónico), tanto con teclado como con ratón.

CSS del autor

/* default class for fonts-face with icons */
.icon { font-family: 'IconFontRoleImg' !important; }
/* specific class for icon */
.icon-email:before { content: "\e93e"; }

HTML

- En lugar de... -
<a href="email.html">
  <span class="icon icon-email"></span>
</a>
- Haga... -
<a href="email.html">
  <span class="icon icon-email" role="img" aria-label="Email"></span>
</a>

CSS del usuario

*:not([role="img"]) { font-family: Verdana, sans-serif !important; }

Ejemplo funcional:

Icono de fuente de correo electrónico en un enlace SIN texto visible

Varios iconos de fuente como parte de otro elemento semántico CON texto visible

Este ejemplo ya tiene en el enlace una etiqueta de texto visible que se usa como nombre accesible; los iconos de fuente de correo y de flecha (chevron) deben seguir visibles cuando se cambia la familia de fuentes. Esto puede conseguirse asegurándose de que los iconos están contenidos en su propio elemento y usando el atributo aria-hidden="true", de modo que las tecnologías de asistencia ignoren los iconos de fuente.

CSS del autor

/* default class for fonts-face with icons */
.icon { font-family: 'IconFontRoleImg' !important; }
/* specific class for icon */
- See style declarations in HTML examples -

HTML

- En lugar de... -
<style>
.icon-double-link:before   { content: "\e93e"; }
.icon-double-link:after    { content: "\e993"; }
</style>
<a href="email.html" class="icon-double-link">Email</a>
- Haga... -
<style>
  .icon-email:before   { content: "\e93e"; }
  .icon-chevron:before { content: "\e993"; }
  .icon-double-link .icon-chevron  { float: right; margin-left: 1.5rem; }
</style>
<a href="email.html" class="icon-double-link">
  <span class="icon icon-email" role="img" aria-hidden="true"></span>
  <span class="icon icon-chevron" role="img" aria-hidden="true"></span>
   Email
</a>

CSS del usuario

*:not([role="img"]) { font-family: Verdana, sans-serif !important; }

Ejemplo funcional:

Varios iconos de fuente como parte de otro elemento semántico CON texto visible

Pruebas

Procedimiento

Para cada icono de fuente, comprobar que:

  1. El elemento que proporciona el icono de fuente tiene role="img".

Resultados esperados

  • La comprobación n.º 1 es verdadera.

Cómo lo comprobamos en ADDAW

En cada auditoría de ADDAW revisamos esta técnica página a página y le entregamos los errores con capturas y la forma de corregirlos.

Solicitar una auditoría

Basado en la técnica ARIA24 del W3C (WCAG 2.2). Explicación y ejemplos: ADDAW. Traducción no oficial del texto del W3C © W3C, licencia de documentos del W3C. ¿Ha visto un error? Escríbanos.