Técnica ARIA WCAG 2.2
ARIA24Identificar semánticamente un icono de fuente con role="img"
En resumen
Muchas personas con baja visión sustituyen las fuentes de la página con sus propias hojas de estilo, y entonces los iconos hechos con fuentes de iconos desaparecen. Si cada icono significativo se marca con role="img" y un nombre accesible (aria-label), la hoja de estilos del usuario puede excluirlos del reemplazo con :not([role="img"]) y los iconos siguen viéndose. Aplíquela a cualquier icono de fuente que transmita información.
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:
- 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 las auditorías de accesibilidad de ADDAW revisamos cada criterio de conformidad siguiendo este catálogo de técnicas: comprobamos si la web aplica una técnica suficiente y documentamos cada fallo común con capturas y el código afectado, para que el equipo de desarrollo sepa exactamente qué corregir. Los informes siguen la metodología del Observatorio de Accesibilidad y la norma UNE-EN 301 549.
Fuente y licencia
Traducción al español, no oficial, realizada por ADDAW a partir de la técnica ARIA24 del documento «Techniques for WCAG 2.2» del W3C (versión del repositorio público del W3C a 22/10/2026). Copyright © W3C® (MIT, ERCIM, Keio, Beihang). Se publica conforme a la licencia de documentos del W3C. El texto normativo de referencia es el original en inglés; si detecta un error en la traducción, escríbanos.
