Die CSS-Praktiken, die die Barrierefreiheit beeinträchtigen können

CSS ist zu einer allmächtigen Sprache geworden. Was als Mittel zum einfachen Gestalten von Text und anderen Designelementen begann, kann heute viel mehr.

Wir können damit praktisch jedes erdenkliche Layout erstellen. Spezialeffekte und Interaktivität, die früher JavaScript oder Browser-Plugins erforderten, werden jetzt nativ unterstützt. Die Sprache hat sich von einem einfachen Werkzeug zu einer der grundlegenden Technologien hinter jeder Website entwickelt.

Aber wie jedes mächtige Werkzeug kann auch CSS unbeabsichtigte Nebeneffekte haben. Barrierefreiheit gehört zu den größten Bedenken. Einige Implementierungen können tatsächlich mehr schaden als nützen.

Schauen wir uns vor diesem Hintergrund einige CSS-Praktiken an, die die Barrierefreiheit beeinträchtigen können. Sie enthalten allgemeine Funktionen, die sorgfältig geprüft werden müssen, bevor Sie mit dem Schreiben von Code beginnen. Lass uns anfangen!

Anzeigen von wichtigem Text mithilfe der content -Eigenschaft

Die CSS- content bietet eine elegante Möglichkeit, einem Element visuelle Verbesserungen hinzuzufügen. Sie können es beispielsweise in Kombination mit einem Pseudoelement verwenden, um ein Symbol vor einer Textpassage oder einem Listenelement hinzuzufügen. Es kann auch Bilder oder Textfolgen anzeigen.

Aber letzteres kann besonders lästig sein. Über die content -Eigenschaft hinzugefügter Text ist nicht im Dokumentobjektmodell (DOM) enthalten. Das bedeutet, dass Hilfstechnologien wie Bildschirmlesegeräte es möglicherweise nicht erkennen.

Dies ist für reine Dekorationsartikel in Ordnung. Es könnte jedoch zu Barrierefreiheitsproblemen führen, wenn der Text einen wichtigen Kontext für eine Seite bereitstellt. Benutzer können wichtige Informationen verpassen.

Daher ist es am besten, die content -Eigenschaft nicht zum Anzeigen von Text zu verwenden. Es sei denn, Sie sind sicher, dass die Fähigkeit eines Benutzers, die Seite zu verstehen, dadurch nicht beeinträchtigt wird.

Erstellen intensiv blinkender animierter Sequenzen

Animation ist ein Bereich, in dem CSS eine große Entwicklung erlebt hat. Effekte, die einst das Gebiet von Bibliotheken von Drittanbietern waren, können jetzt relativ einfach hergestellt werden. Und da sie nativ unterstützt werden, können sie Funktionen wie Hardwarebeschleunigung nutzen, um die Leistung zu steigern.

Grundlegende Übergänge und Transformationen können Wunder bewirken, um eine Stimmung zu erzeugen und die Aufmerksamkeit eines Benutzers zu erregen. Und es ist auch möglich, unglaublich realistische Effekte mit Hilfe von JavaScript zu konstruieren.

Aber bestimmte Animationsstile können negative Auswirkungen haben. Für einige Benutzer kann zu viel Bewegung desorientierend sein – oder noch viel schlimmer. Intensive Blitz- oder Stroboskopeffekte können zu Krampfanfällen führen. Dies ist im Web möglich – genauso wie in Filmen, Fernsehprogrammen und Videospielen.

Die WCAG 2.0 bietet einige forschungsgestützte Anleitungen zum Erstellen von Animationen, die keine Anfälle oder andere Nebenwirkungen auslösen. Beispielsweise wird empfohlen, eine Präsentation so einzustellen, dass sie nicht öfter als dreimal pro Sekunde blinkt, die Größe klein zu halten und die Farbe Rot zu vermeiden.

Glücklicherweise schränkt dies unsere Fähigkeit, Benutzer mit Bewegung zu beeindrucken, nicht ein. Es gibt noch viele Möglichkeiten, unsere Arbeit zu verbessern. Aber die Art der verwendeten Animation und ihre potenziellen Auswirkungen müssen hinterfragt werden.

Nicht intuitive :hover hover- oder :focus -Zustände auf interaktiven Elementen

CSS ist geschickt darin, interaktive Elemente zu gestalten. Überlegen Sie, was mit alltäglichen Elementen wie Hyperlinks und Formularfeldern möglich ist. Sie können so angepasst werden, dass sie im Vergleich zu ihrem Standard-Look nicht wiederzuerkennen sind.

Das ist alles schön und gut. Aber es ist auch wichtig, darüber nachzudenken, was passiert, wenn ein Benutzer mit einem Element interagiert. Stellen Sie sich vor, Sie klicken auf eine Schaltfläche, die keine visuellen Hinweise bietet, um zu bestätigen, was passiert ist. Oder verwenden Sie eine Tastatur, um durch ein Menü zu navigieren, das den aktuellen Link nicht hervorhebt.

Sie mögen einfach sein, aber diese Mikrointeraktionen helfen, den Benutzern Kontext zu bieten. Das Bestätigen eines Tastenklicks oder das Verstehen, auf welches Menüelement sich Ihr Cursor konzentriert, sind nur zwei Beispiele. Und jeder vermittelt ein Gefühl des Vertrauens, wenn ein Besucher eine Website durchsucht.

Das anfängliche Styling eines interaktiven Elements ist nur die halbe Miete. Das Angebot intuitiver Stile für die :hover und :focus rundet die Benutzererfahrung ab.

Es ist erwähnenswert, dass diese Stile leicht wahrnehmbar sein sollten. In der Praxis bedeutet das, mehr als nur Farbe als Indikator zu verwenden. Das Hinzufügen von Animationen, Umrissen oder Symbolen kann dazu beitragen, dass niemand ausgelassen wird.

Die Grundlagen des barrierefreien Designs für selbstverständlich halten

Das haben wir alle schon durchgemacht. Ein Projekttermin nähert sich schnell und Sie müssen Dinge erledigen. Im Rennen um die Markteinführung könnten einige Elemente im Zusammenhang mit der Barrierefreiheit durch die Ritzen rutschen.

Nicht selten bleiben die Grundlagen barrierefreien Designs auf der Strecke. Diese CSS-Praktiken, die Designer als selbstverständlich ansehen und annehmen, entsprechen bereits dem Standard.

Paradebeispiele sind Grundlagen wie lesbare Typografie und akzeptable Farbkontrastverhältnisse. Wenn Sie diese Punkte nicht berücksichtigen und testen, ist eine Website möglicherweise nicht so barrierefrei, wie Sie denken.

Aus diesem Grund lohnt es sich, sich etwas mehr Zeit zu nehmen, um die breiteren Aspekte des Stils Ihrer Website zu überprüfen. Selbst wenn ein Artikel die „Augapfel“-Inspektion besteht, gehen Sie die Extrameile, um ein Audit durchzuführen. Sie werden überrascht sein, wie viele Möglichkeiten für subtile Verbesserungen Sie finden werden.

Es geht um den verantwortungsvollen Umgang mit CSS

Da CSS so leistungsfähig ist, lässt man sich leicht von den Möglichkeiten verführen, die es zu bieten hat. Warum sich mit einer einfachen Animation zufrieden geben, wenn Sie etwas Kinoartiges erstellen können? Und wie könnten wir die Bequemlichkeit nicht lieben, damit Inhalte zu generieren?

Es kommt auf Empathie und Verantwortung an. Wie jedes Tool ist CSS zu großartigen Dingen fähig. Aber nur weil wir ein bestimmtes Feature implementieren können , bedeutet das nicht, dass es für Barrierefreiheit geeignet ist. Wir leben in einer Welt, in der Menschen aus allen Gesellschaftsschichten konsumieren, was wir bauen. Und es ist unsere Aufgabe, dafür zu sorgen, dass sie dies ohne Hindernisse tun können.

Die gute Seite ist, dass die Vermeidung der oben genannten Praktiken für jeden erreichbar ist. Zum größten Teil geht es darum, über die möglichen Auswirkungen unseres Handelns nachzudenken. Von dort aus liefern uns Tests die Daten, die wir benötigen, um die Dinge weiter zu verfeinern.

CSS ist dazu da, die Barrierefreiheit zu erleichtern. Es hängt alles davon ab, wie wir es verwenden.