Alt Text for Symbols

Alt Text for Symbols and Special Characters

When symbols and special characters appear in web content, providing meaningful alternative text ensures that users relying on assistive technologies can understand the content. Unlike images, inline Unicode symbols often lack built-in descriptions, making thoughtful implementation essential for accessibility.

Why Symbols Need Alt Text

Screen readers handle Unicode characters in varying ways. Common symbols like © or ® are read aloud with their standard names, but many symbols—mathematical operators, currency signs, decorative glyphs, or emoji—are pronounced inconsistently across different screen reader and browser combinations. A symbol that appears as a decorative arrow to a sighted user might be read as "RIGHTWARDS ARROW" or simply skipped depending on the assistive technology in use.

Implementation Patterns

Using aria-label on Wrapper Elements

When a symbol conveys meaningful information, wrapping it in an element with an aria-label gives assistive technologies a human-readable name:

<span aria-label="Warning">⚠️</span>
<span aria-label="Star rating: 4 out of 5">★★★★☆</span>

Hiding Decorative Symbols

Purely decorative symbols should be hidden from the accessibility tree using aria-hidden="true". This prevents screen readers from announcing irrelevant content:

<button>
  <span aria-hidden="true">→</span>
  Next page
</button>

Using title Attributes

For inline symbols within running text, a <abbr> or <span> with a title attribute provides a tooltip and some screen reader support, though browser behavior varies:

<span title="degrees Celsius">°C</span>

SVG Symbols with Accessible Names

For SVG-based icons, use the <title> element as the first child and reference it with aria-labelledby:

<svg role="img" aria-labelledby="icon-title">
  <title id="icon-title">Search</title>
  <!-- path data -->
</svg>

Testing Alt Text for Symbols

Always test with real screen readers. NVDA, JAWS, VoiceOver, and TalkBack all pronounce Unicode symbols differently. A practical approach:

1. Enable your system screen reader
2. Navigate to each symbol in your content
3. Confirm the announced text is meaningful in context
4. Adjust aria-label values as needed

Common Mistakes

• Redundant announcements: If surrounding text already conveys the symbol's meaning, add aria-hidden="true" to avoid repetition.
• Over-describing decorative content: Describing a bullet point or a horizontal rule serves no user benefit.
• Assuming Unicode names are readable: The Unicode name "SNOWMAN" (☃) may be announced, but "LATIN SMALL LETTER A WITH DIAERESIS" (ä) is unhelpful when reading a German word.

WCAG Compliance

Providing text alternatives for non-text symbols directly supports WCAG Success Criterion 1.1.1 (Non-text Content) at Level A. For symbols used as controls or status indicators, appropriate alternatives are not optional—they are required for conformance.