Unsere Datenschutzrichtlinie wird in Kürze aktualisiert. Bitte sehen Sie sich die Vorschau an.

HTML-Tipps für Webentwickler: Jede Woche neu

Inhalte über HTML & CSS verstecken

Testen Sie unsere 2021 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Unabhängig davon, ob es sich bei Ihrem Projekt um eine "große" Website handelt oder eine "kleine", Sie einen Webshop aufsetzen wollen oder einen privaten Blog betreuen – eines haben alle Webseiten gemeinsam: die Basis ist HTML. Profitieren Sie in dieser praktischen Tipps&Tricks-Sammlung von der jahrelangen Erfahrung der Trainerin Florence Maurice, die Ihnen unbekannte Features nahe bringt, zur Übersicht über die einzelnen Versionen verhilft oder oftmals nur mit kleinen, pfiffigen Hinweisen Ihren Alltag als Webdesigner und -programmierer erleichtert.
05:44
  Lesezeichen setzen

Transkript

Es gibt verschiedene Möglichkeiten, Elemente zu verstecken. Da wäre das HTML-Attribut "hidden", "aria-hidden='true'" oder es gibt CSS-Angaben. Was verwendet man aber wann? Um ein Element zu verbergen, gibt es die Angabe "hidden" in HTML. Das ist ein boolesches Attribut, das heißt, das schreiben Sie direkt ohne einen Wert dazu, und damit wird das entsprechende Element verborgen. Das können Sie nehmen für Elemente, die nicht im aktuellen Zustand der Seite relevant sind. Hier sehen Sie ein Spiel, und das Spiel soll nur angezeigt werden, wenn der Benutzer eingeloggt ist. Diese Angabe "hidden" wäre jetzt beispielsweise nicht korrekt für Tabs, weil bei Tabs zwar auch in der klassischen Darstellung bestimmte Inhalte zwischendurch nicht sichtbar sind, aber man könnte sich da ja auch eine andere Darstellung vorstellen, wo bei großem Screen beispielsweise alle angezeigt werden. Und "hidden" sollten Sie nur nehmen, wenn es nicht angezeigt werden soll, egal wie das Ganze präsentiert wird. Das heißt beispielsweise auch, wenn Sie "hidden" schreiben, wird das nicht von Screenreadern ausgewertet. Das ist jetzt ein kleines, einfaches Beispiel mit drei div-Elementen, und beim zweiten habe ich "hidden" angegeben. Wenn wir das uns im Browser ansehen, dann ist dieses zweite Element nicht zu sehen. Einen Vorschlag, wie Browser das umsetzen sollen, findet man in der whatwg.org-Spezifikation, und die sollen da einfach verwenden "display: none". Das bedeutet aber, und das ist ein entscheidender Punkt, wenn Sie bei einem Element, wo Sie "hidden" angegeben haben, etwas an der display-Eigenschaft ändern, dann funktioniert das Verstecken nicht. In diesem Beispiel habe ich wieder drei div-Elemente. Das Zweite hat die Angabe "hidden". Das klappt so weit. Das zweite Element ist nicht zu sehen. Wenn ich jetzt aber hingehe und beispielsweise meine div-Elemente zu flex-Containern mache mit "display:flex", dann taucht mein zweites Element hier auf, weil es nicht mehr "display: none" intern hat, sondern eben "display: flex". Also da müssen Sie aufpassen, wenn Sie mit "hidden" arbeiten. Neben "hidden" gibt es außerdem die Angabe "aria-hidden='true'". Das sollten Sie für Inhalte verwenden, die vor Screenreadern verborgen sein sollen. Die werden sonst normal angezeigt. Also wir sehen, der Inhalt ist ganz normal zu sehen, aber ein Screenreader, wenn der das interpretieren kann, der wird das dann nicht berücksichtigen. Man könnte das beispielsweise nutzen für Pullquotes. Die sind ja Zitate aus einem Text, das heißt, nur eine Wiederholung, dessen was im Text auch steht, und das müsste jetzt nicht unbedingt von Screenreadern vorgelesen werden, und da wäre es sinnvoll, "aria-hidden='true'" anzugeben. Apropos Screenreader. Da gibt es noch einen weiteren Fall. Ich bin bei Bootstrap 4, und da gibt es so einen Slider mit solchen Buttons, über die man navigieren kann. Im Code werden diese Buttons über SVG erzeugt, und es steht da "aria-hidden='true'", also die sollen verborgen sein vor Screenreadern. Aber es soll natürlich für Screenreader trotzdem auslesbar sein, welche Funktionalität an dieser Stelle möglich ist, und das geschieht über einen Text, und dieser Text soll nicht normal sichtbar sein, sondern nur für Screenreader lesbar, und bei Bootstrap gibt es dafür die Klasse "sr-only". Wir können uns dann anschauen, wie das realisiert wird, weil der Text ist hier nicht normal zu sehen, das heißt, der ist für normale Bildschirme auf diese Art ausgeblendet. Wie wird das gemacht? Der Text wird absolut positioniert, hat eine Höhe und eine Breite von 1 px, mit "margin: -1px" verschoben, "overflow: hidden" und noch "clip", also auf verschiedene Arten wird dieser Text dann ausgeblendet für normale Bildschirme, aber er ist trotzdem für Screenreader normal auslesbar. Wir haben also verschiedene Möglichkeiten, Inhalte zu verbergen. Im Normalfall sollten Sie nutzen "hidden", um etwas zu verstecken. Wenn etwas nur vor Screenreadern verborgen sein soll, verwenden Sie "aria-hidden". Und wenn Sie hingegen etwas in Screenreadern lesbar haben wollen, aber bei normalen Bildschirmen verbergen wollen, dann müssen Sie das per CSS machen, wie wir uns das angeschaut haben, beispielsweise absolut positioniert, und weitere Angaben, damit es normal nicht sichtbar ist.