• Success Criterion 1.1.1
  • Conformance level A
  • W3C reference F71

Fancy Unicode Letters Used Instead of Real, Readable Text

1.1.1 — Non-text Content

Scenario

Setting

A dating app's profile setup

What’s wrong

The "About Me" heading is typed in Unicode math letters (𝓐𝓫𝓸𝓾𝓽 𝓜𝓮) that only look like a script font. They aren't the letters A, b, o, u, t, so screen readers, braille displays, search and translation tools may not get the words "About Me", and there's no text alternative.

Watch on YouTube (captions available)

Example 

<h2>𝓐𝓫𝓸𝓾𝓽 𝓜𝓮</h2>
<!-- 𝓐 is U+1D4D0 MATHEMATICAL BOLD SCRIPT CAPITAL A,
     not the letter A -->

Why it matters

Someone setting up their profile with a screen reader may not hear "About Me". Depending on the screen reader, its version and settings, they may hear each character's Unicode name ("mathematical bold script capital A…"), letters one at a time, or nothing at all. NVDA 2025.1 and later speaks these characters as plain letters by default, but its braille output and other screen readers may not, and copy, search and translation still see the lookalikes.

How to test

Check the characters behind styled-looking text, not just how it looks. Paste it into a plain text editor: text styled with CSS pastes as ordinary letters, while lookalike characters keep their fancy shape, because they are different characters. Or inspect them in the browser console, for example [...el.textContent].map(c => c.codePointAt(0).toString(16)): for English text, code points like 1d4d0 (Mathematical Alphanumeric Symbols) or Greek and Cyrillic letters mean lookalikes are used (F71). Browser find isn't a reliable test: in our check, Firefox didn't match "About" but Chrome did. If lookalikes are used and there is no text alternative, it fails.

How to fix

Type the real words "About Me" and get the script look from CSS: font-family, font-style and font-weight. The heading is then ordinary text, so screen readers and braille displays get the words, and search, translation and copy-paste work, while sighted users still see a decorative style. If lookalike characters really can't be avoided, such as a decorative wordmark, F71 is also met when they have a text alternative: wrap them in <span role="img" aria-label="About Me"> (technique H86), so assistive technology uses the label instead of the characters. Treat that as a fallback: some screen readers then announce it as an image, and search and translation still see the lookalikes. Pictures drawn with characters are a different problem (scenario 9).

<h2 style="font-family: 'Playfair Display', serif;
           font-style: italic; font-weight: 700;">About Me</h2>

Outcome

A screen reader user hears "About Me", a braille user reads it, and the heading can be found, translated and copied, while it still looks stylish on screen.

Who is affected

Screen reader users, especially braille display users and people whose screen reader doesn't convert these characters, people using text-to-speech, read-aloud or translation tools, and anyone searching for or copying the text.

Learn more

Related scenarios