Unicode Character with an On-Screen Text Alternative

Status

• New technique
• [LowVision] GitHub Issue 144: Techniques needed for Icon Fonts
• Email
  • LVTF Technique volunteers needed
  • WCAG Issue 144 [LowVision] Techniques needed for Icon Fonts
  • Request for note regarding selection, search, and accessibility of generated content - Joanmarie Diggs
    • 2.1. Alternative text for Generated Content: The alt property - CSS Generated Content Module Level 3 Editor’s Draft, 31 January 2016 (Not Ready For Implementation)
• April 2016 Survey
  • Updated per Makoto's and Andrew's survey comments. Removed figure element and simplified procedure.
• July 28, 2016 Low Vision Accessibility Task Force Teleconference Minutes

Applicability

• Success Criterion 1.1.1 (Non-text Content)
  • How to Meet 1.1.1 (Non-text Content)
  • Understanding Success Criterion 1.1.1 (Non-text Content)

Description

The objective of this technique is to show how to provide a visible, text alternative for an Unicode character that conveys information.

Some versions of assistive technologies will announce CSS generated content, as well as specific Unicode characters. However, because the announcement may be inaccurate aria-hidden="true" is used so it will be ignored by assistive technologies. An on-screen text alternative is added.

Example 1

In this example a star icon is used to indicate a favorite.

CSS

<style>
 .icon-star:before {
 /* Unicode Character added via generated content */
 /* Unicode for STAR, BLACK */ 
 content:"\2605";
 /* Color changed to purple */ 
 color:purple; 
 background-color:#fff;
 font-size:3em;
 padding-left:0.2em;
 }
 p>span+span {
 font-family:sans-serif;
 font-size:1.1em;
 display:block;
 padding-left:0.2em;
 }
</style>

HTML

<p>
 <!-- Icon added visually. "Black Star" voicing suppressed. -->
 <span class="icon-star" aria-hidden="true"></span>
 <!-- Accurate text alternative added-->
 <span>Favorite</span>
</p>

Live Example 1

• Unicode Character with an On-Screen Text Alternative

Example 2

In this example an envelope icon is used to indicate a link to an email web page.

CSS

<style>
 /* Unicode Character added via generated content */
 .icon-envelope:before {
 /* Unicode for ENVELOPE icon */
 content:"\2709"; 
 font-size: 5em;
 }
 a {
 text-decoration:none;
 }
 h2 {
 font-family:sans-serif;
 font-size:1.1em;
 margin-top:-1em;
 }
</style>

HTML

<a href="email.html">
 <!-- Icon added visually. Voicing is suppressed. -->
 <span class="icon-envelope" aria-hidden="true"></span>
 <!-- Accurate text alternative added-->
 <h2>Email</h2>
</a>

Live Example 2

• Unicode Character in Link with an On-Screen Text Alternative

Resources

• Icon Usability - Aurora Bedford, Nielsen Norman Group
• The Best Icon is a Text Label - Thomas Byttebier
• Unicode support on browsers and devices - Unify
• Death to Icon Fonts Speaker Deck - Seren Davies
• Seriously, Don’t Use Icon Fonts - Tyler Sticka

Related Techniques

• Semantically Identifying Icon Font with role=img (Draft)
• Using aria-hidden="true" on an icon font that AT should ignore (Draft)
• Icon Font with an On-Screen Text Alternative (Draft)
• Using aria-hidden="true" on Unicode characters that AT should ignore (Draft)
• H67: Using null alt text and no title attribute on img elements for images that AT should ignore
• F3: Failure of Success Criterion 1.1.1 due to using CSS to include images that convey important information
• F87: Failure of Success Criterion 1.3.1 due to inserting non-decorative content by using :before and :after pseudo-elements and the 'content' property in CSS

Tests

Procedure

1. Check if the Unicode character is hidden with aria-hidden="true".
2. Check if the an accurate text alternative is present.

Expected Results

• Tests 1 and 2 are true.