H86Sufficient technique WCAG 1.1.1 Level A Partly scanner-detectable

Give emojis and ASCII art text alternatives

Characters used as pictures are non-text content, so they need a text alternative like any other image. W3C lists H86 as sufficient for 1.1.1 Non-text Content. Emoji arrive with built-in names, and the reason to override one is sharper than people assume. A black right-pointing triangle announces as black right-pointing pointer, which is wrong when the same glyph is the play button on your audio player. Because you cannot put alt on a span, and ARIA does not allow a name on a generic element, the markup is role=img with aria-label. There are two routes rather than one. Either mark the art as an image and name it, or put the text alternative immediately before or after it. For emoticons specifically, W3C's advice is to stop building faces out of punctuation and use a word or a real emoji instead.

How we find it in an audit

No scanner recognizes a picture made out of characters, so this gets listened to rather than scanned. We put a screen reader on anything carrying emoticons, decorative character runs or stylized spellings, which in practice means user-generated content, marketing pages and status displays.

How affected users experience it

A shrug built from punctuation gets read as punctuation, one character name at a time. Macron, backslash, low line, and on it goes for as long as the art lasts. Leetspeak arrives as a run of unrelated letters and digits. What a sighted reader takes in half a second becomes a stretch of noise, and the joke, which was the entire point of it, never lands.

Passes vs. fails

Passes: alt text names the product. Fails: the file name is all there is.

Passes

Status: <span role="img" aria-label="shrug">¯\_(ツ)_/¯</span>

Fails

Status: ¯\_(ツ)_/¯

How this gets tested

The W3C publishes test rules that define what a checker looks for here.

Element marked as decorative is not exposedA tool can check this
Image accessible name is descriptiveA tool finds candidates, you decide
Image button has non-empty accessible nameA tool can check this
Image has non-empty accessible nameA tool can check this
Link has non-empty accessible nameA tool can check this
Object element rendering non-text content has non-empty accessible nameA tool can check this
SVG element with explicit role has non-empty accessible nameA tool can check this
Image not in the accessibility tree is decorativeA tool can check this

Other ways to satisfy this rule

39 guides on this site are filed under 1.1.1 Non-text Content. W3C lists this one as sufficient for that rule on its own. Implement it correctly, in a way your readers' software actually supports, and the rule is met.

This guide is our interpretation of W3C technique H86: Providing text alternatives for emojis, emoticons, ASCII art, and leetspeak. W3C publishes its techniques as guidance rather than as the standard, and says so on every one of them. The success criterion is what conformance is measured against, and a technique is one documented way to meet it.