Animated Text Stays Readable
MUST: When splitting text into per-letter/word spans for animation, keep the accessible name on the wrapper (aria-label with the full text) and mark the shards aria-hidden="true". Otherwise a screen reader reads the word letter by letter or drops it. Drop the reveal to a fade under prefers-reduced-motion.
Splitting text into per-letter or per-word spans for animation must not destroy its accessible name
<span aria-label="Announcing">
{letters.map(c => <span aria-hidden="true">{c}</span>)}
</span>Bad
Good
Why it matters
Staggered letter/word reveals are built by wrapping each glyph in its own element. Visually it is still a word; to a screen reader it is ten unrelated characters read "A, n, n, o…", or dropped entirely — and the same fragmentation breaks find-in-page, translation, and text selection. The fix costs nothing: put the real text as an aria-label on the wrapper and mark every animated shard aria-hidden="true", so the DOM animates while the accessibility tree sees one intact word.
Pair it with reduced-motion — under prefers-reduced-motion the reveal should drop to a plain fade or appear instantly. This is WCAG 1.3.1 (Info and Relationships) at the glyph level: the visual grouping into a word must survive into the semantics.