Unicode Character with an On-Screen Text Alternative
(Redirected from Providing an On-Screen Text Alternative for an Icon Font)
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
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
- 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
- Check if the Unicode character is hidden with
aria-hidden="true".
- Check if the an accurate text alternative is present.
Expected Results
- Tests 1 and 2 are true.