Unicode Character with an On-Screen Text Alternative

From WCAG WG


Status

Applicability

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

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

Resources

Related Techniques

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.