Técnica HTML WCAG 2.2
H86Proporcionar alternativas textuales para emojis, emoticonos, arte ASCII y leetspeak
En resumen
Los emojis, emoticonos como «:)», los dibujos hechos con caracteres ASCII y el leetspeak («4u571n r0ck5») se leen de forma confusa o absurda con un lector de pantalla. Esta técnica explica cómo darles una alternativa textual: marcarlos como imagen con role="img" y aria-label, o acompañarlos de un texto explicativo inmediatamente antes o después. Úsela siempre que estos elementos aporten significado y no sean mera decoración.
Aplicabilidad
HTML
Descripción
Los emojis son muy populares y se utilizan con frecuencia en línea para aportar más contexto y expresividad a la comunicación basada en texto. Los emojis vienen con sus propios nombres predefinidos, que no siempre coinciden con lo que quien escribe pretende comunicar. Por ejemplo, el emoji de un triángulo negro que apunta a la derecha (►) se describe por defecto como black right-pointing pointer (puntero negro que apunta a la derecha), lo que resultaría confuso si un diseñador hubiera cambiado su rotación o su color, o si se estuviera usando para dar el nombre accesible a un botón de «reproducir» en un reproductor multimedia.
Los emoticonos son anteriores a los emojis; todavía se utilizan, pero son mucho menos populares que antes. Los emoticonos emplean caracteres ASCII para crear expresiones faciales y otras formas de comunicar una emoción. Como los emoticonos se componen de varios caracteres de texto, pueden resultar confusos para los usuarios de lectores de pantalla. Cuando sea posible, es mejor usar simplemente una palabra como «sonrisa» o un emoji adecuado en lugar de un emoticono. Si se utilizan emoticonos, deben tener una alternativa textual.
El arte ASCII era habitual en internet antes de que se generalizara el uso de gráficos. Los caracteres ASCII se disponían para formar dibujos, imágenes de texto o gráficos. Aunque el contenido ASCII ya no se utiliza con frecuencia en la web, hay que recordar que, cuando se usa, puede resultar muy confuso para las personas que acceden a internet mediante lectores de pantalla. Si se utiliza arte ASCII, también debe tener una explicación textual de lo que representa el dibujo. Se sugiere asimismo que, si el dibujo ASCII no está marcado como imagen mediante ARIA, haya un enlace para saltar el dibujo (aunque esto no es obligatorio).
El leet fue en su día una parte bastante habitual de la cultura y la jerga de internet, pero hoy apenas se utiliza. El leetspeak emplea diversas combinaciones de caracteres, incluidos números y caracteres especiales, para sustituir a los caracteres estándar. El leet suele ser incomprensible para las personas que utilizan lectores de pantalla y, por tanto, requiere una alternativa textual para cumplir el criterio de conformidad 1.1.1 (Contenido no textual).
Ejemplos
Marcar emojis en una frase
Este ejemplo muestra una técnica para marcar emojis con nombres accesibles distintos de los predeterminados. Como no se puede usar un atributo alt en un elemento span y la recomendación ARIA no permite nombres accesibles en elementos genéricos, para dar a los emojis un nombre accesible se definen como imágenes con la propiedad ARIA role="img", lo que permite a su vez crear un nombre accesible mediante la propiedad aria-label.
<p>I smiled at my friend and gestured
<span aria-label="you" role="img">��</span>
<span aria-label="rock" role="img">��</span>!
</p>Cuatro opciones para proporcionar alternativas a un emoticono que representa «smile»
A continuación se muestran cuatro opciones para proporcionar alternativas a un emoticono que representa «smile» (sonrisa), formado por dos puntos seguidos de un paréntesis de cierre.
:) (smile)
<abbr title="smile">:)</abbr>
<span aria-label="smile" role="img">:)</span>
<img alt="smile" src="smile.gif">
Usar las propiedades aria-label y role="img"
Añadir la propiedad role="img" al elemento que contiene el contenido ASCII lo define como una imagen, y la propiedad aria-label le proporciona la alternativa textual necesaria. Saltar al siguiente ejemplo de ASCII.
<div aria-label="WCAG" role="img">
oooooo oooooo oooo .oooooo. .o. .oooooo.
`888. `888. .8' d8P' `Y8b .888. d8P' `Y8b
`888. .8888. .8' 888 .8"888. 888
`888 .8'`888. .8' 888 .8' `888. 888
`888.8' `888.8' 888 .88ooo8888. 888 ooooo
`888' `888' `88b ooo .8' `888. `88. .88'
`8' `8' `Y8bood8P' o88o o8888o `Y8bood8P'
</div>Arte ASCII con una explicación del dibujo que lo precede
Este ejemplo incluye un enlace para saltar el arte ASCII. Saltar al ejemplo de leetspeak.
<figure>
<figcaption>
<p>Figure 1: ASCII art picture of a butterfly.
<a href="#skipbutterfly">Skip ASCII butterfly image</a>
</p>
</figcaption>
LLLLLLLLLLL
__LLLLLLLLLLLLLL
LLLLLLLLLLLLLLLLL
_LLLLLLLLLLLLLLLLLL
LLLLLLLLLLLLLLLLLLLL
_LLLLLLLLLLLLLLLLLLLLL
LLLLLLLLLLLLLLLLLLLLLL
L _LLLLLLLLLLLLLLLLLLLLLLL
LL LLLLLL~~~LLLLLLLLLLLLLL
_L _LLLLL LLLLLLLLLLLLL
L~ LLL~ LLLLLLLLLLLLL
LL _LLL _LL LLLLLLLL
LL LL~ ~~ ~LLLLLL
L _LLL_LLLL___ _LLLLLL
LL LLLLLLLLLLLLLL LLLLLLLL
L LLLLLLLLLLLLLLL LLLLLL
LL LLLLLLLLLLLLLLLL LLLLL~
LLLLLLLL_______ L _LLLLLLLLLLLLLLLL LLLLLLLL
~~~~~~~LLLLLLLLLLLLLLLLLLLLLLLLL~ LLLLLL
______________LLL LLLLLLLLLLLLLL ______LLLLLLLLL_
LLLLLLLLLLLLLLLLLLLL LLLLLLLL~~LLLLLLL~~~~~~ ~LLLLLL
___LLLLLLLLLL __LLLLLLLLLLLLL LLLLLLLLLLLLL____ _LLLLLL_
LLLLLLLLLLL~~ LLLLLLLLLLLLLLL LLLLLLLLLLLLLLLLLL ~~~LLLLL
__LLLLLLLLLLL _LLLLLLLLLLLLLLLLL_ LLLLLLLLLLLLLLLLLL_ LLLLL
LLLLLLLLLLL~ LLLLLLLLLLLLLLLLLLL ~L ~~LLLLLLLLLLLLL LLLLLL
_LLLLLLLLLLLL LLLLLLLLLLLLLLLLLLLLL_ LL LLLLLLLLL LLLLLLLLL
LLLLLLLLLLLLL LLLLLLLLLLLLL~LLLLLL~L LL ~~~~~ ~LLLLLL
LLLLLLLLLLLLLLL__L LLLLLLLLLLLL_LLLLLLL LL_ LL_ _ LLLLLL
LLLLLLLLLLLLLLLLL~ ~LLLLLLLL~~LLLLLLLL ~L ~LLLL ~L LLLLLL~
LLLLLLLLLLLLLLLL _LLLLLLLLLL LL LLLLLLL___ LLLLLLLLLL
LLLLLLLLLLLLLLLL LL~LLLLLLLL~ LL LLLLLLLLLLLL LLLLLLL~
LLLLLLLLLLLLLLLL_ __L _L LLLLLLLL LLL_ LLLLLLLLLLLLLLLLLLLLL
LLLLLLLLLLLLLLLLLLLL L~ LLLLLLLL LLLLLLL~LLLLLLLLLLLLLLLL~
LLLLLLLLLLLLLLLLLLLL___L_ LL LLLLLLL LLLL LLLLLLLLLLLLLL
~~LLLLLLLLLLLLLLLLLLLLLLLL LLLLL~ LLLLL ~~~~~~~~~
LLLLLLLLLLLLLLLLLL_ _ LLL _LLLLL
~~~~~~LLLLLLLLLL~ LLLLLL
LLLLL _LLLLLL
LLLLL L L LLLLLLL
LLLLL__LL _L__LLLLLLLL
LLLLLLLLLL LLLLLLLLLLLL
LLLLLLLLLLLLLLLLLLLLLL
~LLLLLLLLLLLLLLLLL~~
LLLLLLLLLLLLL
~~~~~~~~~
</figure>
<p id="skipbutterfly">New content after the ASCII image.</p>Marcar leetspeak
Lo siguiente es «Austin Rocks» escrito en leetspeak.
<abbr title="Austin Rocks">Au5t1N r0xx0rz</abbr>Pruebas
Procedimiento
- Comprobar si el contenido contiene emojis, emoticonos, arte ASCII o leetspeak.
- Comprobar que cada emoji tiene una alternativa textual que cumple un propósito equivalente.
- Comprobar que cada obra de arte ASCII, emoticono o leetspeak:
- está marcado como una imagen con una alternativa textual que cumple un propósito equivalente; o
- tiene una alternativa textual inmediatamente antes o después.
Resultados esperados
- Las comprobaciones n.º 2 y n.º 3 son verdaderas.
Recursos
- ARIA Recommendation (recomendación ARIA).
- Accessible Name and Description Computation.
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 H86 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.
