Use Case #1: Critical Icons with Fallback Text

Doesn’t show supplementary text, but must show fallback text without the icon. Supplementary text is still available to screen readers.

Twitter Facebook Google Plus RSS Feed

HTML

<span class="icon-fallback-text">
	<!-- requires an element for aria-hidden -->
	<span class="icon icon-twitter" aria-hidden="true"></span>
	<span class="text">Twitter</span>
</span>
		

Failed experiments:

• Eliminate the span element and clip to just show the icon. Requires us to know the width of each glyph. It’s better to just keep the span.

Use Case #2: Critical Icons with Fallback Icon

Doesn’t show supplementary text, must show fallback icon without the primary icon. This can be a background image or a Unicode glyph. Supplementary text is still available to screen readers.

Fallback to Glyph

Menu

Warning: In browsers that don’t support :before/:after (IE6-7), fallback is text.

HTML

<span class="icon-fallback-glyph">
	<span class="icon icon-hamburger" aria-hidden="true"></span>
	<span class="text">Menu</span>
</span>
	

Use Case #3: Decorative Icon without Fallback

Shows supplementary text, does not need fallback experience without the icon.

Share on Twitter (Sibling Text)

HTML

<span class="icon icon-twitter" aria-hidden="true"></span>
Share on Twitter (Sibling Text)