Home > Designing, Others > Beware Smushed Off-Screen Accessible Text

Beware Smushed Off-Screen Accessible Text

October 14th, 2016 Leave a comment Go to comments

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:

.accessible_elem {
  clip: rect(1px 1px 1px 1px); /* IE 6/7 */
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap; /* added line */
  width: 1px;
}

Direct Link to Article — Permalink

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

Categories: Designing, Others Tags:
  1. No comments yet.
  1. No trackbacks yet.
You must be logged in to post a comment.