This is an unplanned part two for Barriers from Links with ARIA. The title reflects my exasperation because this isn’t new, ‘veI simply failed to be explicit about it over the last decade or so. In 2012 I vented about TypeButter using <kern style=”letter-spacing: -0.01em;”> for each letter. In 2020…

Adrian Roselli is a web developer, accessibility advocate, and expert in web standards. Readers can learn about web accessibility, inclusive design, and best practices for building accessible websites and applications. With articles, tutorials, and presentations, Adrian Roselli shares  insights and techniques for creating digital experiences that are usable and accessible to everyone.

Adrian Roselli

GSAP's SplitText plugin claims screen reader support but fails across most screen reader/browser combinations. Splitting words into individual letters wrapped in HTML elements creates accessibility barriers, even when using aria-label and aria-hidden. Testing across NVDA, JAWS, Narrator, VoiceOver, Orca, and TalkBack reveals only NVDA/Firefox and TalkBack/Chrome work correctly. The generic role on divs prohibits aria-label, and even when used on valid elements, aria-label doesn't translate and can violate WCAG Label in Name requirements. Developers should avoid splitting text into letters for animations or styling effects.

You Know What? Just Don’t Split Words into Letters