J. Renée 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 include white-space: nowrap;
to fix that. Gaël Poupard suggests replacing the deprecated clip value with the newer clip, except for the fallback.
.accessible_elem {
clip: rect(1px 1px 1px 1px); /* IE 6/7 */
clip: inset(50%); /* fix */
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap; /* fix */
width: 1px;
}