Vorsicht bei gequetschtem, außerhalb des Bildschirms liegendem zugänglichem Text

Avatar of Chris Coyier
Chris Coyier am

DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!

J. Renée Beach

Über mehrere Sitzungen erwähnte Matt, dass die Textzeichenfolge „Mehr Reaktionen anzeigen“ zusammengeschoben wurde und als „Zeigemehrreaktionen“ gelesen wurde.

Es stellte sich heraus, dass eine beliebte Technik zum visuellen Verbergen von Inhalten (aber nicht für assistierende Technologien) die Einstellung von width: 1px; beinhaltete, die dazu zwang, Wörter Zeilenumbruch für Zeilenumbruch mit "Zeilenfeed"-Umbruch zu erzwingen, was die Hilfstechnologie nicht gleich wie Leerzeichen behandelte.

Facebook musste seine zugängliche Verbergungsklasse aktualisieren, um white-space: nowrap; aufzunehmen, um dies zu beheben. Gaël Poupard schlägt vor, den veralteten clip-Wert durch den neueren clip zu ersetzen, außer für das 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;
}

Direkter Link →