Einleitung
Ab dem 28. Juni 2025 treten Vorschriften in Kraft, die mit der Umsetzung des Gesetzes über die Gewährleistung der Barrierefreiheit bestimmter Produkte und Dienstleistungen zusammenhängen. Dieses Gesetz setzt die sogenannte Europäische Barrierefreiheitsrichtlinie (EAA) – die EU-Richtlinie 2019/882 – in deutsches Recht um. Ziel des Gesetzes ist es, sicherzustellen, dass zentrale Produkte und Dienstleistungen für alle Nutzer, einschließlich Menschen mit Behinderungen, zugänglich sind.
Unternehmen haben bis zum 28. Juni 2025 Zeit, ihre Produkte und Dienstleistungen an die neuen Anforderungen anzupassen.
Dieser Artikel stellt die grundlegenden Prinzipien und technischen Richtlinien vor, deren Umsetzung die Zugänglichkeit Ihrer Website verbessert. Er soll Liquid-Programmierern dabei helfen, barrierefreie digitale Anwendungen und Websites zu erstellen. Die Barrierefreiheit von Websites ist heutzutage ein zentraler Aspekt ihrer Gestaltung. Ziel ist es, allen Nutzern einen gleichberechtigten Zugang zu den Inhalten zu ermöglichen, unabhängig von ihren individuellen Bedürfnissen oder Einschränkungen. Die Einhaltung bewährter Praktiken im Bereich der Barrierefreiheit unterstützt nicht nur Menschen, die auf unterstützende Technologien angewiesen sind, sondern verbessert auch die allgemeine Benutzerfreundlichkeit und Funktionalität der Website. In diesem Artikel stellen wir bewährte Praktiken für die Barrierefreiheit vor, die bei der Verwendung von HTML- und CSS-Code berücksichtigt werden sollten. Jedes dieser Elemente spielt eine wichtige Rolle beim Aufbau einer benutzerfreundlichen und zugänglichen digitalen Umgebung. Die behandelten Themen umfassen: Barrierefreiheit ist ein entscheidender Aspekt bei der Erstellung von Websites und Anwendungen. Die Einhaltung bewährter Praktiken im Bereich Barrierefreiheit hilft sicherzustellen, dass deine Inhalte für alle Nutzer zugänglich sind, unabhängig von deren individuellen Fähigkeiten. Denk daran, dass Barrierefreiheit ein kontinuierlicher Prozess ist – regelmäßige Tests und Aktualisierungen der Inhalte sind unerlässlich, um hohe Standards der Barrierefreiheit aufrechtzuerhalten.Bewährte Verfahren
Allgemeine Grundsätze
Verwende geeignete HTML-Tags wie <header>, <nav>, <main>, <footer>, um eine logische und verständliche Struktur der Seite sicherzustellen. Falls deine Vorlage benutzerdefinierte Strukturen oder Elemente enthält, achte darauf, dass diese korrekt gekennzeichnet und für Screenreader zugänglich sind, z.B. durch die Verwendung von ARIA-Landmarks.
Sorge für ausreichenden Kontrast zwischen Text und Hintergrund. Nutze Tools zur Kontrastprüfung, um sicherzustellen, dass du die WCAG-Standards erfüllst. Verwende beispielsweise die DevTools zur Farbkontrastprüfung oder Tools wie den WebAIM Contrast Checker oder das WAVE-Browser-Plugin.
Füge immer Alt-Texte für Bilder hinzu, damit Screenreader-Nutzer den Inhalt verstehen können. In den meisten Fällen sorgt der Liquid Img-Filter automatisch für passende Alt-Attribute. Wenn du jedoch benutzerdefinierte Bilder einfügst, achte darauf, dass du ein alt- oder aria-label-Attribut für das <img>-Element hinzufügst.
Ermögliche die Navigation auf der Website per Tastatur und stelle sicher, dass alle interaktiven Elemente zugänglich sind. Achte darauf, den Stil für :focus und :focus-visible zu definieren, damit Benutzer leicht erkennen können, welches Element gerade aktiv ist. Einige HTML5-Tags sind standardmäßig tastaturzugänglich, wie <button>, <a>, <input>. Wenn du jedoch benutzerdefinierte Elemente wie <div> oder <span> verwendest, füge tabindex=”0″ und die entsprechenden ARIA-Rollen hinzu.
Verwende eine einfache und klare Sprache. Vermeide komplexe Sätze und Fachbegriffe, die für einige Benutzer schwer verständlich sein könnten. Interaktive Elemente
Verwende geeignete Formular-Tags wie <input>, <select>, <textarea> und stelle sicher, dass diese korrekt gekennzeichnet sind. Verwende aria-label oder aria-labelledby, wenn Labels nicht sichtbar sind. Falls in der Vorlage benutzerdefinierte Formularelemente wie <div> oder <span> verwendet werden, stelle sicher, dass diese für Screenreader und Tastaturnutzer zugänglich sind, z.B. durch Hinzufügen von role=”checkbox” oder role=”button” sowie den entsprechenden ARIA-Attributen.
Verwende <button> anstelle von <div> oder <span>, um Buttons zu erstellen. Wenn du Icons als Buttons verwendest, füge ein aria-label oder title hinzu, um deren Funktion zu beschreiben. Icons ohne Informationsgehalt sollten aria-hidden=”true” oder role=”presentation” erhalten, damit sie von Screenreadern ignoriert werden.
Verwende <a> für Links. Der Linktext sollte sein Ziel eindeutig beschreiben. Vermeide allgemeine Formulierungen wie „hier klicken“. Falls du zusätzliche Informationen bereitstellen möchtest, verwende ein aria-label, z.B. bei Download-Links: <a href=”datei.pdf” aria-label=”PDF-Datei herunterladen”>Herunterladen</a>.
Verwende ARIA-Rollen, um die Zugänglichkeit von Elementen zu verbessern, die in HTML keine semantische Bedeutung haben. Wenn du beispielsweise ein <div> als Button verwendest, füge role=”button” hinzu und stelle die erforderlichen ARIA-Attribute wie aria-pressed für Umschaltbuttons bereit. Integriere Übersetzungen in deine Vorlage, um sicherzustellen, dass die in ARIA-Attributen verwendeten Texte wie aria-label, aria-labelledby und aria-describedby auch in verschiedenen Sprachen verfügbar sind, z.B. aria-label=”{{translations.DownloadFile}}”. Inhaltsstruktur
Verwende Überschriften von <h1> bis <h6> in einer logischen Hierarchie. Die <h1>-Überschrift sollte nur einmal pro Seite verwendet werden, und die weiteren Überschriften sollten entsprechend der Hierarchie genutzt werden.
Verwende <ul> für ungeordnete Listen und <ol> für geordnete Listen. Vermeide die Verwendung von <div> oder <span> zur Darstellung von Listen.
Verwende Tabellen zur Darstellung von Daten. Füge ein <caption> hinzu, um die Tabelle zu beschreiben, und verwende Tabellenüberschriften <th> mit dem Attribut scope=”col” oder scope=”row”, um die Zugänglichkeit zu verbessern.
Vermeide automatische Animationen, die für Nutzer verwirrend sein könnten. Falls Animationen notwendig sind, stelle sicher, dass sie deaktiviert oder reduziert werden können. Nutze in CSS prefers-reduced-motion, um Animationen an die Nutzerpräferenzen anzupassen.
Stelle Untertitel und Transkriptionen für Video- und Audiomaterial bereit. Verwende die Tags <video> und <audio> mit geeigneten Attributen wie controls, damit Nutzer mit den Medien interagieren können.
Wenn du JavaScript verwendest, um Inhalte dynamisch zu aktualisieren, achte darauf, dass Änderungen für Screenreader angekündigt werden. Verwende dazu aria-live und aria-atomic, um zu steuern, wie Änderungen Nutzern mit unterstützenden Technologien mitgeteilt werden.
Teste deine Website regelmäßig auf Barrierefreiheit mit Tools wie Lighthouse, Axe oder WAVE. Teste außerdem mit Nutzern, die unterstützende Technologien verwenden, um authentisches Feedback zur Barrierefreiheit deiner Website zu erhalten. Verwende auch manuelle Tests: Nutze Screenreader wie NVDA oder VoiceOver, um zu überprüfen, wie deine Website von Nutzern mit assistiven Technologien wahrgenommen wird. Teste auf verschiedenen Geräten und in unterschiedlichen Browsern, um sicherzustellen, dass die Barrierefreiheit unter allen Bedingungen gewährleistet ist.
Zusammenfassung