Zu den Anforderungen an das Webdesign gehört zunehmend auch eine verbesserte Barrierefreiheit im Web. Aber reicht es nicht aus, die Website für alle gängigen Browser mit Kompatibilität mit mehreren Geräten zu optimieren? Mit Google Lighthouse können Sie ganz einfach die Leistung Ihrer Website, die Zugänglichkeit, Best Practices und SEO messen. Warum ist Barrierefreiheit also wichtig?

Nach Angaben der CDC (Centers for Disease Control and Prevention) leben über 60 Millionen Amerikaner mit einer Behinderung. Wenn Sie sich an die Richtlinien zur Barrierefreiheit von Webinhalten halten, können Sie einige Vorüberlegungen anführen, die dazu beitragen, eine barrierefreie Website zu erstellen. Hier finden Sie alles, was Sie für den Einstieg in die Barrierefreiheit im Web mit HTML und CSS benötigen.

Strukturiertes HTML mit richtiger Semantik

Während die Website optisch ansprechend gestaltet wird, sollten Benutzer von Hilfstechnologien nicht verwirrt werden. Obwohl viele Content-Management-Systeme wie WordPress HTML anwenden, liegt es in Ihrer Verantwortung, die korrekte Anwendung erneut zu überprüfen und zu bestätigen.

Zum Beispiel a

Weiterlesen: Einfache HTML-Code-Beispiele, die Sie in 10 Minuten lernen können

Semantisches HTML ist einfacher zu entwickeln, da Sie zusätzliche Funktionalitäten erhalten. Auf dem Handy funktioniert es super. Auch wenn Sie Schlüsselwörtern Bedeutung beimessen, die darin eingeschlossen sind

oder Tag, es hilft bei SEO.

Strukturierter Inhalt für Screenreader-Benutzer

Hier ist ein Beispiel für semantisches HTML gut vs. Schlecht.

Gutes semantisches HTML
Meine Überschrift

So erstellen Sie eine barrierefreie Website mit HTML und CSS

Meine zweite Überschrift

Schlechtes semantisches HTML
Meine Überschrift

So erstellen Sie eine barrierefreie Website mit HTML und CSS

Der erste Fall ist für Screenreader ziemlich einfach zu navigieren. Es liest die Kopfzeile, die über die Überschrift und den Absatz informiert. Es wird nach jedem Element für eine Sekunde angehalten. Sie können einige Überschriften überspringen oder mit Enter/Return zur vorherigen zurückkehren. Sie können auch ein Inhaltsverzeichnis erstellen, indem Sie das header-Tag verwenden.

Wenn Sie Präsentations-HTML anstelle von semantischem HTML schreiben (im zweiten Fall), bricht die Zeile unnötig um und führt zu einer schlechten Erfahrung. Es ist, als würde man einen riesigen Block vorbereiten, der viel schwieriger zu kaskadieren und zu manipulieren ist, da es keine potenziellen Selektoren gibt.

Sprache und Layouts für barrierefreie Websites

Sie sollten eine präzise Sprache mit erweiterten Akronymen und Abkürzungen verwenden. Versuchen Sie, wenn möglich, Bindestriche zu vermeiden, indem Sie 9-5 -> 9 bis 5 schreiben. Früher wurden HTML-Tabellen verwendet, um die Seitenlayouts zu erstellen. Früher behinderte es das korrekte Auslesen aufgrund verschachtelter Tabellen, die ein recht komplexes Layout bildeten. Hier ist eine moderne Website-Struktur:

Dies ist eine Überschrift



Inhalt der Hauptseite

enthaltender Artikel

Artikelüberschrift

Artikelinhalt



Website-Fußzeile

Wie Sie sehen können, ist dieses Layout also Screenreader-freundlich. Das Markup ist mit einem klaren und prägnanten Code verständlich. Außerdem ist es einfach zu warten und erfordert weniger Bandbreite beim Herunterladen. Stellen Sie sicher, dass Sie den Quellcode logisch platziert haben; es wird den Unterschied machen.

Überdenken Sie UI-Steuerelemente, Tabellen und Alternativtext

In der Regel handelt es sich bei UI-Steuerelementen um Schaltflächen, Formulare und Link-Steuerelemente Ihres Webdokuments. Als Faustregel gilt, dass sie per Tastatur manipuliert werden können. Sie haben einen Standardstil (kann sich in verschiedenen Browsern unterscheiden), bei dem Sie mit der Tabulatortaste zu anderen Optionen springen und die Eingabetaste / Return drücken können, um zu einer Schlussfolgerung zu gelangen. Sie können die Textbeschriftungen verwalten, indem Sie unverwechselbare und aussagekräftige Ankertexte hinzufügen, anstatt "hier klicken".

Um barrierefreie Tabellen zu erstellen, fügen Sie Tabellenüberschriften hinzu

und geben Sie die Zeilen oder Spalten mit dem Scope-Attribut an. Darüber hinaus können Sie die oder Summary-Attribut, um den Screenreadern einen schnellen Überblick über den Inhalt der Tabelle zu geben.

Alternativer Text liefert den Webcrawlern und Screenreadern die Kontextinformationen des Bildes oder Videos. Wenn Ihr Bild dekorativen Zwecken dient, ist es besser, das Alt-Tag leer zu lassen. Ansonsten hilft eine detaillierte Beschreibung des Bildes sehr.

In den meisten Fällen liest der Screenreader den Alt-Text, den Dateinamen und das Titelattribut vor (Sie können es überspringen). Wenn Sie keinen Alternativtext verwenden oder mehreren Bildern dasselbe Label hinzufügen möchten, finden Sie hier einen kurzen Tipp:

Eine rote Blume...

Sie haben das aria-labelledby-Attribut verwendet, um auf diese ID zu verweisen. Es wird den Screenreadern ermöglichen, Alt-Text in Form dieses Absatzes zu verwenden.

Standard-CSS für bessere Zugänglichkeit

Die Gestaltung barrierefreier Seitenfunktionen bedeutet, dass sich Ihr Design gemäß dem Kerninhalt der Seite verhalten sollte. Zum Beispiel für a

,

, und

-Element sollte ein typisches CSS sein:

h1 {
Schriftgröße: 4rem;
}
p, li {
Schriftgröße: 1,5rem;
Farbe blau;
}

Die Schriftgröße, der Buchstabenabstand, die Schriftfamilie usw. sollen zu einem komfortablen Lesen beitragen. Überschriften sollten sich vom Fließtext abheben (Standardstil ist auch gut). Außerdem sollte der Text eine kontrastierende Farbe vom Hintergrund, den Sie mit CSS auswählen.

Text, Links und Beschriftungen gestalten

Mikrointeraktionen sind mit einem barrierefreien CSS möglich. Es kann so klein sein, wie das Hervorheben des Textes oder das Hervorheben der Links in geeigneter Weise. Du kannst den... benutzen und markant kennzeichnen. Sie können eine gepunktete Unterstreichung hinzufügen, indem Sie die Element.

Der Standardlink sollte mit einer Standardfarbe unterstrichen werden: Blau und ein zuvor besuchter Link mit einer Standardfarbe: Lila (Sie können ihn anpassen).

ein {
Farbe: #ff0000;
}
a: aktiv {
Farbe: #000000;
Hintergrundfarbe: #a60000;
}
a: schweben, a: besucht, a: fokussieren {
Farbe: #a60000;
Textdekoration: keine;
}

Daher sollten Sie bei einer Änderung des Mauszeigers den fokussierten Text hervorheben. Der Zeigercursor und die Gliederung spielen eine wichtige Rolle bei der Barrierefreiheit im Web.

Verwenden Sie CSS, um den Formularelementen und Beschriftungen ein sauberes Aussehen zu verleihen. Legen Sie außerdem Fokus-/Hover-Zustände fest, die in den meisten Browsern konsistent sind. Denken Sie daran, dass diese kleinen Hinweise den Leuten helfen, Ihre Webseite zu verstehen.

Farbkontrast und Ausblenden von Werten

Passen Sie das Farbschema der Website so an, dass die Vordergrundfarbe (Text/Bild) im Kontrast zur Hintergrundfarbe steht vor allem, weil es für Menschen mit Sehbehinderungen (z. B. Farbenblindheit) schwieriger ist, den Inhalt zu lesen richtig. Sie können verwenden Farbkontrast-Checker um eine anständige Farbgebung nach den WCAG-Kriterien zu erhalten. Versuchen Sie auch, Markup-Zeichen (wie ein Sternchen) zusammen mit Warnungen oder Allgemeinen Geschäftsbedingungen (nicht nur eine rote Warnung) hinzuzufügen.

Screenreader müssen sich keine Sorgen machen, bis die Quellcodereihenfolge anständig geschrieben ist. Vermeiden Sie die Verwendung von display: none oder visible: hidden Eigenschaften, da sie den Inhalt vor den Bildschirmleseprogrammen verbergen.

Machen Sie es einfach, den Stil zu überschreiben

Der entscheidende Punkt ist, egal wie gut Sie die Site gestalten, Benutzer haben verschiedene Gründe, den Stil zu überschreiben. Einige möchten beispielsweise eine größere Textgröße oder möchten die Text- und Hintergrundfarbe aus Gründen der Lesbarkeit ändern. Ihr Inhaltsbereich sollte also vollständig damit umgehen können.

Zusammenfassung: Kombinieren Sie HTML und CSS

Jetzt kennen Sie die Grundlagen für den Einstieg in semantisches HTML und das Schreiben eines sinnvollen Quellcodes in der richtigen Reihenfolge für eine barrierefreie Website. Konzentrieren Sie sich auf HTML und machen Sie ein barrierefreies CSS, sobald es fertig ist.

Mit den oben genannten Techniken können Sie die Benutzererfahrung verbessern und ein schönes Publikum bedienen. Beginnen Sie also damit, Websites zu erstellen, die reaktionsschnell und zugänglich sind.

So erstellen Sie eine Website: Für Anfänger

Heute werde ich Sie durch den Prozess führen, eine komplette Website von Grund auf neu zu erstellen. Machen Sie sich keine Sorgen, wenn das schwierig klingt. Ich begleite Sie bei jedem Schritt.

Weiter lesen

Über den Autor

Erweitern, um die ganze Geschichte zu lesen