Wie kann man barrierefrei programmieren? Dieser Artikel gibt Tipps, wie HTML-Zugänglichkeit den Nutzern mehr und bessere Möglichkeiten zur Navigation auf Ihrer Website bieten kann.
Tauchen Sie ein in diesen leicht verständlichen Leitfaden für barrierefreies HTML und denken Sie daran, dass die Verwendung von CSS und HTML eine großartige Möglichkeit sein kann, Ihren Gewinn zu steigern.
Erste Schritte mit CSS und HTML Barrierefreiheit
HTML und CSS gehen bei der Erstellung von Websites Hand in Hand.
Kurz gesagt, HTML wird verwendet, um den eigentlichen Inhalt der Webseite zu erstellen (wie geschriebener Text), während CSS verwendet wird, um eine Webseite zu gestalten – mit anderen Worten, der Stil der Webseite hängt von CSS ab. Dazu gehören die Hintergrundfarbe, die visuellen Effekte und das Layout selbst.
Wann immer Sie HTML- und CSS-Code schreiben, sollten Sie die Barrierefreiheit im Auge behalten. Besonders bei CSS sollten Sie darauf achten, dass Sie es nicht versehentlich übertreiben und die Zugänglichkeit Ihrer Website beeinträchtigen. Zum Beispiel sollte Ihre Textfarbe einen schönen Kontrast zur Hintergrundfarbe bilden.
Was ist CSS/HTML?
HTML steht für Hypertext Markup Language. Es ist eine der drei primären Sprachen, die zur Erstellung von Webseiten verwendet werden. HTML ist gewissermaßen das Fundament einer Website – es gibt der Website Struktur. Die Entwickler tun dies mit Hilfe von Tags, Elementen und Attributen.
HTML ist die Sprache, die Sie verwenden, wenn Sie Überschriften, Links, Listen und Bilder wünschen. Sie verwendet Tags, mit denen Sie Absätze, Überschriften und andere Strukturelemente hinzufügen können.
CSS steht für Kaskadierende Formatvorlagen. Damit können Sie Ihre Seite besser gestalten, indem Sie die Größe der einzelnen Elemente und die Art ihrer Darstellung wählen.
CSS ist eine Ergänzung zu HTML. Wenn Sie sich HTML als den Knochen vorstellen, ist CSS die Haut. Es sorgt dafür, dass die Webseite fantastisch aussieht. Wenn Sie z. B. ein Wort auf Ihrer Website zentrieren und die Schriftgröße erhöhen möchten, können Sie dies mit CSS erreichen
Wie beginnt man mit barrierefreiem CSS- und HTML-Code?
Wenn Sie Webentwickler sind, müssen Sie sicherstellen, dass Ihre Website für alle zugänglich ist, auch für Menschen mit Behinderungen. Sie sollten eine Website entwerfen, die ein gutes Benutzererlebnis bietet, und dabei CSS- und HTML-Codierungsverfahren für Barrierefreiheit verwenden.
A11y ist ein Projekt, das kostenlose Schulungen für barrierefreies Programmieren anbieten will.
A11y Projekt →
Eine der besten Möglichkeiten, CSS- und HTML-Programmierung für Barrierefreiheit zu lernen, ist das A11y Projekt. Dabei handelt es sich um eine von der Gemeinschaft betriebene Initiative auf GitHub, die sich an Entwickler richtet, die Hilfe bei der Programmierung von Barrierefreiheitslösungen benötigen.
Über GitHub wurden mehrere Projekte ins Leben gerufen, die Entwicklern bei der Kodierung von Lösungen für die Barrierefreiheit helfen sollen.
Wie wendet man CSS- und HTML-Zugänglichkeit bei der Codierung an?
Wenn Sie diese Tipps beherzigen, sind Sie auf dem richtigen Weg, wenn es um barrierefreie Kodierung geht.
Definieren Sie die natürliche Sprache des Dokuments
Es hat viele Vorteile, die Sprache des Dokuments zu definieren. Wenn Sie dies auf einer HTML-Seite tun, ist es für unterstützende Technologien einfacher, das richtige Sprachprofil oder den richtigen Zeichensatz auszuwählen.
Wenn Sie Ihrem Browser mitteilen, welche Sprache Sie verwenden, hilft das auch der Suchmaschinenoptimierung und zeigt Übersetzungsprogrammen und Browsern von Drittanbietern, wie sie das richtige Wörterbuch und die richtige Sprache identifizieren können.
Das IANA Sprache Subtag Register enthält eine Liste von Sprachcodes.
Strukturieren Sie Ihren Code mit Überschriften
Wenn Sie eine Gliederung mit den
–Überschriften erstellen, können die Besucher die Struktur Ihrer Seite und die Beziehung zwischen den einzelnen Abschnitten viel leichter verstehen.
Das ist etwas, was viele Menschen, die unterstützende Technologien nutzen, zu schätzen wissen. Bildschirmlesegeräte bieten verschiedene Möglichkeiten, um von einem Inhalt zum anderen zu navigieren. Der NVDA Bildschirmleser bietetbeispielsweise eine einfache Lösung für die Navigation von einer Überschrift zu einer anderen – die Tastenkombination H und Umschalt+H.
Bei der Verschachtelung von Überschriften sollten Sie es vermeiden, Ebenen zu überspringen. Und verwenden Sie nicht viele verschachtelte
elemente, um eine Gliederung aufzubauen.
Landmarken: Wie man sie hinzufügt und wie man sie verwendet
Es ist eine gute Idee, <Artikel>, <beiseite>, <nav>, <Abschnitt> Landmarken hinzuzufügen. Eine weitere Möglichkeit sind die WAI-ARIA-Rollenattribute, in älteren Browsern und Abschnitten ohne das Such-Tag.
Gliederungselemente sind keine Stellvertreter für das
Das Tolle daran ist, dass Screenreader-Benutzer von Abschnitt zu Abschnitt springen können, was ihre gesamte Benutzererfahrung erleichtert. Solche navigierbaren Abschnitte werden als Orientierungspunkte bezeichnet.
Tastaturzugänglichkeit mit CSS und HTML
Die Tastaturzugänglichkeit ist ein wesentlicher Bestandteil der Bewegung für barrierefreie Webentwicklung. Sie stellt sicher, dass Website-Besucher nur mit ihrer Tastatur auf einer Webseite navigieren können. Einige Websites vernachlässigen die Tastaturzugänglichkeit und machen so ihre Inhalte, Dienstleistungen und Produkte für Menschen mit Behinderungen unzugänglich.
Für wen ist es gedacht?
Hier sind die wichtigsten Zielgruppen für die Zugänglichkeit von Tastaturen:
- Menschen mit motorischen Behinderungen finden es schwierig, eine Maus zu benutzen, da sie nicht in der Lage sind, auf kleine Dinge zu klicken.
- Sehbehinderte Internetnutzer bevorzugen meist die Verwendung einer Braille-Tastatur und schätzen Websites, die über eine Tastatur zugänglich sind.
- Menschen mit angeborener Amputation und Amputierte verwenden häufig Hardware, die keine Tastatur ist, aber deren Verwendung nachahmt.
- Menschen, die keinen Zugang zu einer funktionierenden Maus oder einem Touchpad haben.
Wie man es umsetzt
Im Folgenden finden Sie einige Tipps, wie Sie die Tastaturzugänglichkeit richtig umsetzen können:
- Testen Sie Ihre Website auf Tastaturzugänglichkeit: Prüfen Sie, wie leicht oder schwer es ist, mit den Tastenkombinationen Shift und Tab durch die Website zu navigieren.
- Verwenden Sie nicht-farbige Markierungen für Links: Hyperlinks sollten für diejenigen, die Schwierigkeiten haben, Farben zu unterscheiden, auch durch etwas anderes als Farben erkennbar sein. Unterstreichen Sie Hyperlinks beispielsweise immer, oder versehen Sie sie mit Rahmen, Farben und Umrissen.
Wie man damit navigiert
Wenn Sie ein Formular, ein interaktives Element, ausfüllen müssen, können Sie dies über Ihre Tastatur tun. Testen Sie alle Formulare auf Ihrer Website, um sicherzustellen, dass sie für die Tastatur zugänglich sind. Das gilt für alle Formulare – Registrierungsformulare, Newsletter, Anmeldeformulare, Einkaufswagen usw.
Sie können mit nativen Steuerelementen auf der Website navigieren. Das ist der beste Weg. Native Steuerelemente verfügen über eine bereits implementierte Tastaturanpassung. Mit anderen Worten: Sie reagieren standardmäßig auf Tastaturen. Das sind sie:
Wie man es benutzt
Überprüfen Sie stets jeden Winkel Ihrer Website auf Zugänglichkeit. Viele Bedienelemente für die Tastaturzugänglichkeit sind in der Tabulatortaste zusammengefasst. Auf diese Weise navigieren Benutzer, die nur die Tastatur benutzen, durch eine Website.
Testen Sie also Ihre Seite, indem Sie die Tabulatortaste drücken und von oben nach unten gehen.
Fazit
Was auch immer Sie tun, Sie müssen immer an Inklusion und Barrierefreiheit denken. Die Zugänglichkeit von Webinhalten ist nicht nur ein weiterer Punkt, den Sie als Webentwickler von Ihrer Liste streichen können. Es ist fast schon eine Pflicht. Ihre Inhalte sind teilweise nutzlos, wenn sie nicht zugänglich sind.
Aus diesem Grund haben wir diesen hilfreichen Leitfaden für Anfänger im Bereich der barrierefreien HTML-Codierung zusammengestellt. Nutzen Sie Ihr Wissen und machen Sie die Bedeutung der Barrierefreiheit bekannt.
Wenn Ihnen unser Artikel gefallen hat, fahren Sie mit unserem nächsten fort:
