Técnica HTML WCAG 2.2
H86Dar texto alternativo a emojis, emoticonos, arte ASCII y leet
Nombre oficial en el W3C: Proporcionar alternativas textuales para emojis, emoticonos, arte ASCII y leetspeak
En pocas palabras
Los emojis, los emoticonos como :-), los dibujos hechos con letras y el texto en leet se leen mal con un lector de pantalla. Cuando su nombre por defecto no encaja o no se entienden, hay que darles un texto alternativo que diga lo que significan.
Por qué es importante
Un lector de pantalla (programa que lee en voz alta la pantalla) lee cada emoji por su nombre oficial. Ese nombre no siempre coincide con lo que se quiere decir: un triángulo usado como botón de reproducir se lee como «puntero negro a la derecha».
- Un emoticono como
:-)se lee como «dos puntos, guion, paréntesis». - Un dibujo hecho con letras se convierte en una lista interminable de signos.
- El leet («h0l4») cambia letras por números y resulta incomprensible.
Cómo se hace
- Si el nombre oficial del emoji encaja con lo que quiere decir, puede dejarlo tal cual.
- Si no encaja, envuélvalo en un
<span role="img">con unaria-labelque diga su significado. - En lugar de emoticonos, use una palabra («sonrisa») o un emoji adecuado. Si los usa, deles texto alternativo.
- Para un dibujo con letras, márquelo como imagen con
role="img"y unaria-labelque lo describa. Si no, añada una explicación en texto y, mejor, un enlace para saltarlo. - Evite el leet. Si lo usa, ofrezca el texto normal como alternativa.
Cómo comprobarlo
- Busque en la página emojis, emoticonos, dibujos hechos con letras y textos en leet.
- Escúchelos con un lector de pantalla y compruebe que lo que se oye tiene sentido.
- Si no lo tiene, revise el código (F12): debe haber un
aria-labelconrole="img"o una explicación en texto.
Ejemplo
El emoji se usa como icono de reproducir, así que se le da un nombre que explica su función.
<p>
Pulse <span role="img" aria-label="Reproducir">▶️</span>
para ver el vídeo de bienvenida.
</p>
<p>¡Gracias por su inscripción! <span role="img" aria-label="Aplausos">�</span></p>Para saber más, en nuestro blog
-
Accesibilidad vs emojis¿Los emojis favorecen a la accesibilidad? ¿O no lo hacen? Sí, pero no de cualquier manera, aquí recogemos algunas formas correctas y consejos.
-
Tips de accesibilidad en las redes sociales para 2023Explora consejos y estrategias de diseño inclusivo para optimizar la accesibilidad en redes sociales durante 2023
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 H86 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.
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 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.
Basado en la técnica H86 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.