Last updated on 14 Juli 2010 by Dani Iswara
How should we use emoticons on the Web? Web Content Accessibility Guidelines (WCAG) version 2.0 has this answer. Emoticons include ASCII characters arranged to form facial expressions or other pictures to communicate an emotion. Sometimes it is confusing for blind users. Text-based content is still needed by screen readers. It is recommended to use proper alternative text (
alt). The simple words 'smile' for
:) and 'laugh' for
:D are enough. Emoticons are already turned off on this unessential weblog.
I have no real screen reader to test. But Fangs–screen reader emulator, a Firefox extension–may read
:) text as
colon right paren (parenthesis), not
:D will be heard as
This post is also a respond to Adi Kharisma–rismaka.net–post titled (in bahasa Indonesia) Alasan tidak Memasang Emoticon.
Here is a complete recommendation by WCAG 2.0 related to this topic.
Checkpoint H86: Providing text alternatives for ASCII art, emoticons, and leetspeak, noted that in general:
User Agent and Assistive Technology Support Notes
- Assistive technologies provide different levels of support for speaking title attributes. Some do not include features that allow users to access information provided via the title attribute.
- Implementing this technique with the title attribute is only sufficient if the title attribute is accessibility supported. The content of the title attribute needs to be available to all keyboard users (not only those with text-to-speech software) for this attribute to be accessibility supported.
- JAWS 6.2 and higher and WindowEyes 5.0 and higher support the abbr and acronym elements. They can all be set to speak the title attribute when these elements are encountered, but this is not the default setting and is often not turned on by users.
- Many graphical user agents render text enclosed within an abbr or acronym element with a dotted line below or surrounding it. In addition, when the mouse hovers over the element, the expansion is displayed as a tool tip.
- In Internet Explorer 7 and below, items marked using the abbr element are not displayed with any additional formatting. For IE 6 and below, the expanded version does not display as a tooltip when the mouse hovers over the item.
- Within a given user agent or assistive technology, abbr and acronym elements are presented to users in the same way.
If you were looking for the Flash related, read this FLASH28: Providing text alternatives for ASCII art, emoticons, and leetspeak in Flash (WCAG 2.0).
Related to my post titled (in bahasa Indonesia) Logisnya Konten via Emulator Screen Reader, please use the correct punctuation in the content.
Example: “I love your smile :smile:”. Redundancy.
Then, keep on context logically. Example: “I will [gun icon here] you!” What is the right
- “I will [
...alt="icon of pistol"...] you!”
- “I will [
- “I will [
My conclusion is, until user agents and assistive technologies supported, better to use a logical text (semantic manner) in context for this case properly.