Sichtbarkeit umschalten beim Ausblenden von Elementen

Das Entwicklungsteam von Medium hat einige schlechte Praktiken besprochen, die die Barrierefreiheit beeinträchtigen. In einem Beispiel argumentieren sie, dass opacity von Screenreadern nicht gut unterstützt wird und dass wir daher immer das Attribut visibility verwenden sollten, wenn wir ein Element in einer Übergangssequenz ausblenden wollen.

.m-fadeOut {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s linear 300ms, opacity 300ms;
}
.m-fadeIn {
  visibility: visible;
  opacity: 1;
  transition: visibility 0s linear 0s, opacity 300ms;
}

Denken Sie daran, dass opacity und visibility ein Element immer noch im Dokumentenfluss belassen. Wenn Sie es aus dem Fluss entfernen müssen, gibt es noch mehr zu tun. Tatsächlich gibt es eine Möglichkeit, darüber nachzudenken...

	kann Dinge unsichtbar machen	kann Dinge unklickbar machen	wird aus dem Dokumentenfluss entfernt	kann animiert werden	kann auf Kindelemente umgekehrt werden
opacity	ja	nein	nein	ja	nein
visibility	ja	ja	nein	ja	ja
display	ja	ja	ja	nein	nein
pointer-events	nein	ja	nein	nein	nein

Wenn Sie den `display`-Wert eines Elements nach einem Ausblenden ändern müssen, ist das schwieriger. In CSS nicht wirklich möglich, da display nicht animierbar ist. Snook hat darüber geschrieben, einschließlich einiger JavaScript-Hilfen.