Using aria-hidden="true" on Unicode characters that AT should ignore

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
• April 2016 Survey
  • Updated the technique per Andrew's and Mo's survey comments by simplifying the procedure, having this technique be specific to Unicode characters, and adding separate techniques for icon fonts.
• 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 make unicode characters that are pure decoration be ignored by assistive technology.

Some modern versions of assistive technologies will announce CSS generated content, as well as specific Unicode characters. The announcement may be redundant, inaccurate, and/or meaningless. So aria-hidden="true" is used.

Example

CSS

<style>
 .icon-decorative-h2:before {
 /* Icon added via generated content */
 /* Unicode for Black Rightwards Arrowhead */ 
 content:"\27a4"; 
 }
 .icon-decorative-h3:before {
 /* Icon added via generated content */ 
 /* Unicode for Heavy Checkmark */
 content:"\2714"; 
 margin-left:0.1em;
 }
 .icon-decorative-h2:before, .icon-decorative-h3:before {
 background-color:white;
 color:red;
 font-size:1.1em;
 }
</style>

HTML

<h2>
 <!-- Icon added visually. Voicing suppressed. -->
 <span class="icon-decorative-h2" aria-hidden="true"></span>
 Heading preceded by a decorative unicode character
 </h2>
 <h3>
 <!-- Icon added visually. Voicing suppressed. -->
 <span class="icon-decorative-h3" aria-hidden="true"></span>
 Sub-heading preceded by a decorative unicode character
</h3>

Live Example

• Using aria-hidden="true" on a unicode character that AT should ignore

Resources

• Unicode support on browsers and devices - Unify
• Accessibility support for CSS generated content - Leonie Watson
• 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)
• Unicode Character with an On-Screen Text Alternative (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
• Providing an On-Screen Text Alternative for an Icon Font (Draft)
• CSS Content rendering David MacDonald

Tests

Procedure

1. Check that a purely decorative Unicode character is present.
2. Check that the Unicode character is hidden with aria-hidden="true".

Expected Results

• #1 and #2 are true