Orte, an denen es verlockend ist, `display: none;` zu verwenden, aber man sollte es nicht tun

Sie möchten etwas auf einer Seite ausblenden, also

.hide {
   display: none;
}

Aber warten Sie! Indem Sie diese Klasse einem Element zuweisen, haben Sie diesen Inhalt sofort für Screenreader „unzugänglich“ gemacht. Das wissen Sie wahrscheinlich schon immer, aber dennoch schleicht sich der vergiftete Apfel gelegentlich in unseren Code.

Ich möchte nicht alle Einzelheiten wiederholen. Am besten lesen Sie „Now You See Me“ von Aaron Gustafson auf A List Apart, um ein Verständnis dafür zu bekommen, falls Sie es noch nicht haben.

Eine Möglichkeit, sich zu ermutigen, das Richtige zu tun, besteht darin, passendere Klassennamen zu erstellen. Ihre normale Ausblendklasse sollte den Inhalt vom Bildschirm verschieben, wodurch er für Screenreader weiterhin zugänglich bleibt.

.hide {
   position: absolute !important;
   top: -9999px !important;
   left: -9999px !important;
}

Ich verwende hier !important, denn wenn Sie sich die Mühe gemacht haben, etwas eine „Ausblend“-Klasse zuzuweisen, meinen Sie es wahrscheinlich ernst und möchten nicht zu viel darüber nachdenken, ob die Spezifität ausreichend stark ist. Und wenn Sie wissen, dass Sie etwas mit display: none ausblenden müssen, sollte die Klasse Ihnen dabei helfen, dies zu verstehen.

.remember-this-will-NOT-be-read {
   display: none !important;
}

Eine weitere Option für das zugängliche Ausblenden stammt aus einigen Nachforschungen von Snook und dem HTML5-Boilerplate

.visuallyhidden { 
  position: absolute; 
  overflow: hidden; 
  clip: rect(0 0 0 0); 
  height: 1px; width: 1px; 
  margin: -1px; padding: 0; border: 0; 
}

Okay, Sie haben es verstanden. Kinderleicht, wenn Sie die Klassennamen vollständig kontrollieren und nur anwenden und entfernen. Aber mit JS-Bibliotheken, die ihr eigenes CSS anwenden, wird es etwas kniffliger. Zum Beispiel haben Sie in jQuery nach dem Aufruf von .slideUp() ein display: none im Inline-CSS, mit dem Sie umgehen müssen. Ja, Screenreader führen JavaScript aus, und ja, das ist immer noch ein Problem.

Auch hier hat Aaron Gustafson uns abgedeckt, der vorschlägt, den zugänglichen Klassennamen nach Abschluss des Slidings anzuwenden und dann display: none durch das Sliden in die andere Richtung zu entfernen.

var $button = $('#myButton'),
    $text   = $('#myText'),
    visible = true;

$button.click(function() {
  if (visible) {
    $text.slideUp('fast',function() {
      $text.addClass('hide')
           .slideDown(0);
    });
  } else {
    $text.slideUp(0,function() {
      $text.removeClass('hide')
           .slideDown('fast');
    });
  }
  visible = !visible;
});

Hier ist eine Demo davon

Sehen Sie den Pen Hiding with jQuery von CSS-Tricks (@css-tricks) auf CodePen.

Jetzt haben wir die Werkzeuge, die wir brauchen, um die Verwendung von display: none einzustellen und zugänglichere „Ausblend“-Methoden zu verwenden.

FAQ-Seiten

Wenn Sie die Antwort ausblenden, bis die Frage angeklickt wird, blenden Sie sie mit einer zugänglichen Klasse aus. Achten Sie darauf, dass Sie nicht .hide() aufrufen und dann slideToggle(), das ist nicht gut genug!

Labels

Es ist verlockend, placeholder-Text als Ersatz für Labels zu verwenden (besonders jetzt, wo einige Browser die UX verbessert haben und den Text so lange anzeigen, bis man tatsächlich tippt), aber blenden Sie die labels nicht mit display: none aus oder entfernen Sie sie nicht. Ich hörte kürzlich eine herzzerreißende Geschichte über ein blindes Mädchen, das sich für ein College bewarb und das Formular hatte fehlende labels, sodass sie keine Ahnung hatte, was sie in welche Felder eintragen sollte. Wenn Sie also placeholder-Text als Ersatz für Labels verwenden möchten, verwenden Sie eine zugängliche Ausblendtechnik für die Labels.

Tabs

Nur weil ein Inhaltsbereich nicht der „aktuell aktive“ ist, bedeutet das nicht, dass er unzugänglich sein sollte. Blenden Sie ihn stattdessen mit einer zugänglichen Ausblendtechnik aus. Oder vielleicht brauchen Sie das gar nicht. Wenn alle Bereiche die gleiche Höhe haben, können Sie einfach umschalten, welche sichtbar ist, indem Sie den z-index anpassen.

@media queries

Voice Over unter OS X aktivieren und Safari verwenden ist ein Screenreader. Stellen Sie sich nun vor, dieses Safari-Fenster wäre auf eine sehr schmale Breite eingestellt und die Seite hätte einige @media-Abfragen zur Handhabung kleinerer Ansichtsfenster. Und sagen wir, diese @media-Abfrage blendet einige Dinge mit display: none aus, um den Platz besser optisch zu nutzen. Das kann für die Barrierefreiheit gut oder schlecht sein. Blenden Sie einen Haufen Kram aus, der für die Seite unwichtig ist? Oder blenden Sie nützliche Dinge aus, auf die eine Person, die einen Screenreader verwendet, zugreifen sollte, so wie sie es normalerweise tun würde.

Kein Experte hier

Dieser gesamte Beitrag basiert auf der Prämisse, dass display: none schlecht für die Barrierefreiheit ist. Er basiert nicht auf meinem tiefen und gründlichen Verständnis von Screenreadern und allgemeiner Barrierefreiheit. Wenn Sie mehr hinzuzufügen haben, Dinge zu korrigieren haben oder persönliche Erfahrungen teilen möchten, tun Sie es bitte.