Beware Smushed Off-Screen Accessible Text

J. Rene Beach:

Over a few sessions, Matt mentioned that the string of text Show more reactions was being smushed together and read as Showmorereactions.

Turns out a popular technique for hiding content visually (but not hiding it for assistive technology) involved setting width: 1px; which was forcing words to wrap one-word-per-line with "line feed" breaks, which the AT didn't treat the same as spaces.

Facebook had to update their accessible hiding class to:

.accessible_elem {
clip: rect(1px 1px 1px …

Beware Smushed Off-Screen Accessible Text is a post from CSS-Tricks