Wir haben die Idee des Ausblendens von Dingen in CSS schon oft hier behandelt. Der jüngste Beitrag war Marko Ilics „Vergleich verschiedener Methoden zum Ausblenden von Dingen in CSS“, der die verschiedenen Techniken gut verglichen hat, die man in verschiedenen Situationen verwenden würde. Kitty Giraudel hat etwas Ähnliches in „Hiding Content Responsibly“ getan, das sich mit 10 Methoden beschäftigt – und selbst diese, könnte man sagen, sind nicht vollständig umfassend.
Bedeutet das, dass CSS unübersichtlich und unverständlich ist? Nein. Ich finde, alle Methoden sind logisch, haben gute Anwendungsfälle und führen zu guten Ergebnissen. Erlauben Sie mir, eine vorgetäuschte Konversation zu führen, die meinen Gedankengang hier durchläuft.
Ich muss dieses Ding komplett ausblenden. Für alle.
Kein Problem, verwenden Sie display: none;.
Ich muss dieses Ding ausblenden, aber nur für Screenreader, nicht visuell. (Zum Beispiel ein Symbol, das für Screenreader keine zusätzliche Bedeutung hat, da eine zugängliche Beschriftung in der Nähe vorhanden ist.)
Kein Problem, dafür ist das Attribut aria-hidden da.
Ich muss dieses Ding ausblenden, aber nur visuell, nicht für Screenreader. (Zum Beispiel der Inhalt nicht aktiver Tabs.)
Kein Problem, verwenden Sie eine .sr-only Klasse. Das lässt es zugänglich, blendet es aber visuell aus, bis Sie diese Klasse entfernen.
Ups, ich möchte dieses Ding tatsächlich visuell ausblenden, möchte aber, dass es physischen Platz einnimmt und nicht kollabiert. (Zum Beispiel, ein Button hat ein Lade-Spinner-Symbol, das nur bei einer Aktion benötigt wird. Die Größe des Buttons sollte die Größe dieses Symbols jederzeit berücksichtigen, nicht nur, wenn der Spinner sichtbar ist. So gibt es keine Layout-Verschiebungen, wenn das Symbol kommt und geht.)
Kein Problem, verwenden Sie transform: scale(0), das es visuell kollabiert, aber der ursprüngliche Platz bleibt bestehen und es bleibt für Screenreader zugänglich.
Oh nett, ich könnte die Transformation auch transitionen, nehme ich an. Aber eigentlich passt diese transition nicht gut zu meiner Website. Ich möchte nur etwas, das ich aus- und einblenden kann.
Die opacity-Eigenschaft ist transitional, also überblenden Sie diese zwischen 0 und 1 für Fades. Die gute Nachricht ist, dass visibility auch transitional ist. Beim Ausblenden verwenden Sie visibility: hidden und beim Einblenden visibility: visible, um das Ding für Screenreader aus- und einzublenden.
Das ist nicht ganz umfassend, aber ich finde, das deckt 95% der Ausblendfälle ab.
Gut! Es ist seltsam, dass
visibility: hidden;nicht die „verantwortungsvolle“ Methode zum Ausblenden von Elementen ist (und das ist es nicht, teilweise wegen künstlicher Barrieren für Barrierefreiheit, aber auch wegen Browserverhalten). Aber dies sollte wirklich nur eine Zeile CSS ohne Bedenken hinsichtlich der Barrierefreiheit sein, in Situationen, in denen ein aria-label oder etwas anderes bereits diesen Zweck erfüllt.Vergessen Sie nicht, eine Verzögerung bei der Fade-Out-Transition mit Visibility hinzuzufügen. Nur dann kann sie zu opacity: 0 ausblenden und dann visibility auf hidden setzen.
Ich glaube nicht, dass Sie das tun müssen.
visibilityweiß magisch, was es bei der Transition tun soll. Beidisplaymüssen Sie das auf jeden Fall tun.Die Frage ist, welche Auswirkungen haben diese Aktivitäten auf SEO?
Ich frage mich, ob nicht all die Probleme mit Screenreadern irgendwann verschwinden werden, so wie auch die IE-Probleme falsch geworden sind.
Wie viele Entwickler bleiben einfach dabei, Lesbarkeitsprobleme für vielleicht 1 von einer Million Fällen zu beheben?
Wenn meine Kunden mich bitten, ihre Website auch in IE < 7 sichtbar zu machen, ignoriere ich solche Anfragen einfach. Lesen Sie SOF, um zu sehen, dass dies eine globale Bewegung ist. Zeit für die Programmierung mit kleinen Problemen zu verschwenden, lohnt sich manchmal nicht, so politisch inkorrekt das auch klingen mag.
Intelligente Menschen können Probleme lösen, weise wählen lieber, welche Probleme es wert sind, gelöst zu werden.
Wow, gerade rechtzeitig. Ich habe eine Frage, die teilweise damit zusammenhängt. Wenn jemand antworten könnte, wäre das fantastisch.
Ich arbeite an meiner Website, die bisher das Full-Width-Layout hatte. Ich mag den zentrierten Inhaltsansatz, er hilft bei der Fokussierung (irgendwie?).
Wie auch immer, ich brauche jetzt eine Seitenleiste, aber mit dem Inhalt immer noch zentriert. Ich bin mir nicht sicher, ob ich den „Inhalts-Seitenleisten“-Ansatz haben kann, denn wieder wird der Inhalt nach links verschoben, anstatt zentriert zu sein.
Also, hier ist, was mir eingefallen ist. Erstellen Sie das Heilige Gral-Layout (Seitenleiste-Inhalt-Seitenleiste) und lassen Sie die erste Seitenleiste (die links sein soll) mit „visibility: hidden“ ausgeblendet. Diese ausgeblendete Seitenleiste dient keinem anderen Zweck, als diesen Platz einzunehmen, um den Inhalt zentriert zu halten.
Auf diese Weise habe ich immer noch meinen Hauptinhalt zentriert, mit einer Seitenleiste, die ich rechts wollte, und links nichts als leerem Raum.
Ist das die richtige Herangehensweise? Entschuldigung, ich bin ziemlich neu in der Webentwicklung (Autodidakt). Es wäre toll, wenn jemand (vielleicht @Chris?) seine Meinung teilen und mich in die richtige Richtung weisen könnte.
Danke für den nützlichen Artikel. Aber meiner Meinung nach kann das Ausblenden von Inhalten manchmal schädlich für die SEO Ihrer Website sein, aber das hängt natürlich ab
Aus irgendeinem Grund kriege ich das nicht hin. Wenn ich display:none verwende, bedeutet das, dass ich es vor jedem ausblenden möchte, auch vor denen, die Screenreader verwenden. Ist das also nicht die richtige Methode, um etwas auszublenden? Warum sollte ich display:none nicht verwenden?
Sagen wir, Sie möchten den Inhalt eines Menüs, das sich beim Hovern öffnet, „ausblenden“. Bedeutet das, dass Sie möchten, dass Screenreader-Benutzer diese Navigation niemals jemals aufrufen können? Nein, Screenreader-Benutzer sollten auf diese Navigation zugreifen können, also verwenden Sie anstelle von
display: none, das sie ausblendet, eine andere Technik, damit die Navigation weiterhin verfügbar ist.Das ist absolut richtig, caj! Wie der Beitrag sagt,
display: noneblendet es vor allen aus, einschließlich Screenreadern, wenn das das ist, was Sie brauchen.Aber wenn Sie ein Element nur visuell ausblenden möchten, es aber trotzdem für Screenreader zugänglich sein soll, dann hilft eine Art „screenreader-only“-Klasse, die das Element aus der Ansicht ausschneidet, um das Problem zu lösen. Und so weiter…
Also, das Fazit: Es ist völlig in Ordnung, Dinge mit
display: noneauszublenden. Aber wenn Sie ein Element selektiv so ausblenden müssen, dass es für assistierende Technologien zugänglich bleibt oder physischen Platz einnimmt, dann gibt es andere Techniken.Ich dachte ähnlich wie caj.
Was ist, wenn ein ausgeblendetes Seitenleistenmenü nicht durch Hover geöffnet wird, sondern durch einen Menüknopf im Header, den der Screenreader sehen kann? Wäre display: hidden dann nicht in Ordnung?