This Wiki page is edited by participants of the WCAG Working Group. It does not necessarily represent consensus and it may have incorrect information or information that is not supported by other Working Group participants, WAI, or W3C. It may also have some very useful information.

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

From WCAG WG
Jump to: navigation, search


Status

Applicability

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

Resources


Related Techniques

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