Barrierefreiheit & Zugänglichkeit mit Contao

Wie geht man vor, wenn man eine Webseite barrierefrei gestalten möchte und welche gesetzlichen Vorgaben müssen eingehalten werden. Mit den folgenden Infos und einem Leitfaden zeige ich euch wie Webseiten, oder ein online Shop mit Contao die Barrierefreiheit effizient und nachhaltig umgesetzt werden kann.

Hier erst mal eine kurze Einführung zum Barrierefreiheitsstärkungsgesetz (BFSG) das ab dem 28.06.2025 in Kraft tritt.

Aktuell (08/2024) ist der weltweite Standard die Web Content Accessibility Guidelines (WCAG) 2.2 der Entwurf für 3.0 ist schon veröffentlicht.

Für einfache Webseiten sollte der WCAG 2.1 / WCAG 2.2 mit Level AA weitestgehend ausreichen.

Ab Mitte 2025 gilt für Websites und Apps die unter die Produkte und Dienstleistungen fallen, die gesetzliche Pflicht zur Barrierefreiheit.

Hier ein kurzer Auszug:

Mit dem Barrierefreiheitsstärkungsgesetz (BFSG) wurde im Juli 2021 der European Accessibility Act (EAA) ins nationale Recht überführt. Die Verordnung zum Barrierefreiheitsstärkungsgesetz (BFSGV) wurde am 15.06.2022 verabschiedet und definiert Barrierefreiheitsanforderungen für Produkte und Dienstleistungen, die nach dem 28.06.2025 in den Verkehr gebracht bzw. für Verbraucherinnen und Verbraucher erbracht werden. Dies umfasst u.a. den gesamten Online-Handel, Hardware, Software, aber auch überregionalen Personenverkehr oder Bankdienstleistungen.

Weitere Infos zum Barrierefreiheitsstärkungsgesetz (BFSG) findet man auf der Seite vom Bund.

Wenn folgende Kriterien des Unternehmen nicht erfüllt sind fallen sie nicht unter das BFSG.

Kleinunternehmen die betroffene Produkte (Link zum bund.de hier oben, oder hier unten anhand eines Beispiel) herstellen und

• weniger als 10 Personen beschäftigen
• und entweder einen Jahresumsatz von höchstens 2 Millionen Euro erzielen
• oder deren Jahresbilanzsumme sich auf höchstens 2 Millionen Euro beläuft sind vom Gesetz teilweise ausgenommen

Bei Nichteinhaltung können Marktüberwachungsbehörden die Bereitstellung des Produkts oder der Dienstleistung einschränken, oder untersagen, oder dafür sorgen, dass Produkte zurückgenommen, oder zurückgerufen werden. Dies betrifft nicht nur Hersteller, sondern auch Händler und Importeure.

Dienstleistungen im elektronischen Geschäftsverkehr mit Verbrauchern (z.B. E-Commerce / online Shops, online Termin-Buchungs-Tools). Im Bereich Webseiten würde ich es bei Personenbeförderungsdienste wie beispielsweise Webseiten und Apps sehen. Das bedeutet, das Web-Shops und Apps auf jeden Fall betroffen sind, wenn auf eine der oben gelisteten Kriterien übersteigt.

Vom Behindertengleichstellungsgesetz waren und sind darüber hinaus weitere Institutionen und Branchen betroffen. Dazu zählen:

• Zweckverbände
• Stiftungen
• Gesetzliche Krankenkassen
• Hochschulen, Universitäten und Fachhochschulen
• Sozialversicherungen
• Landschaftsverbände
• Industrie- und Handelskammern, Handwerkskammern, Rechtsanwalts- und Ärztekammern, Berufsgenossenschaften und Innungen
• Sparkassen, staatliche Vermögensverwaltungen und Finanzdienste
• Schulen und Kindergärten mit Online-Verwaltungsfunktion
• Öffentlicher Nahverkehr und Personenbeförderung

• Ein Friseursalon mit 9 Mitarbeitenden und weniger als 2 Millionen Jahresumsatz ist nicht betroffen. Noch ist die Dienstleistung explizit erfasst noch ist das Unternehmen groß genug.
• Ein Friseursalon mit 11 Mitarbeitenden, das die Terminbuchung und den Verkauf von Produkten über seine Webseite anbietet, ist betroffen. Da das Unternehmen groß genug ist und es bietet Dienstleistungen im elektronischen Geschäftsverkehr an.

Der ideale Zeitpunkt um ein barrierefreies Webdesign umzusetzen und vor allen zu planen ist mit einem Relaunch, oder der Neugestaltung einer Webseite. Deshalb würde ich gleich bei der Planung und dem Konzept auf einen barrierefreien Ansatz setzen. Der Vorteil ist mit der Umsetzung einer barrierefreien Webseite, das die auch schon zum größten Teil SEO optimiert ist. Den Google ist der größte blinde und gehörlose Usern.

Das betrifft bei der Planung und dem Konzept folgende Punkte die für die Vorgaben der WCAG 2.2 AA / AAA erfüllt werden sollen:

Farben und Kontraste für Navigationselemente, Buttons, Links oder Hintergrundfarben sollten ein ausreichendes Kontrastverhältnis haben. Die aktuelle WCAG 2.2 Richtlinie schreibt ein Kontrastverhältnis von 3:1 bei einer AA Konformität vor. Bei AAA gilt der Verhältnis von 4.5:1.

Bei den eingesetzten Schriftarten (Typografie) und der Schriftfarbe zum Hintergrund ist mindestens 4,5:1 bei AA beziehungsweise 7:1 für AAA erforderlich. Also hellgrauer Text auf weissen Hintergrund geht nicht und schon gar nicht für das klein gedruckte im Footer. Hier sollten auch die Abstände nach außen großzügig gewählt werden und die Größe der Schriftart. Bei der Umsetzung sollten Pixelwerte px gleich durch em Werte gesetzt werden, das macht es bei der Skalierung später leichter.

Die Lesbarkeit für die AAA Konformität sieht noch Textlängen kleiner 80 Zeichen vor, das die Vorder- und Hintergrundfarben durch die Anwender*innen gewechselt werden können, der Zeilenabstand soll mindestens das 1,5-fache betragen.

Das CMS Contao bietet hier schon eine sehr gute Basis was den Quellcode / DOM angeht und liefert eine logische Reihenfolge das Screenreader den Inhalt wiedergegeben können. Hier kleiner Auszug auf was es ankommt.

Das Attribut für die Sprache im HTML mit beispielsweise <html lang="de">, Metaangaben wie description, title, oder alternate Angaben für eine andere Sprache + Link sollten unbedingt im HTML Headbereich enthalten sein. Wie für SEO auch sollten die Metabeschriftungen für Seitentitel, alt- und title-Texte für Grafiken gesetzt werden.

Die Bedienbarkeit einer Webseite sollte per Maus, Touch, Keyboard, Tastatur und Sprache über entsprechende Software möglich sein.

Die Basis bildet die Navigation die z.B. per Tastaturnavigation mit Tabulator bedient werden muss. Voraussetzung dafür ist im <header> das der Navigationsbereich <nav> mit dem Navigationsmodule in Contao alle nötigen Attribute beinhaltet, damit per Tapp die Navigationspunkte angesprungen werden können. Im Seitenbaum sollte zusätzlich Tabindex mit der richtigen Reihenfolge gepflegt werden.

Das CSS für die Menülinks sollte um :focus mit einer outline erweitert werden. Die Skiptlinks vor und nach dem <nav> sollte sichtbar gemacht werden mit .invisible:focus und eine sinnvolle Beschriftung der Skiplinks Navigation am Template je nach Sprache. Wenn ein Headerslider zwischen der Navigation und dem relevanten Content ist, kann ein zusätzlicher Skiptlink zum Anker #main + "Direkt zum Inhalt" Text hilfreich sein.

Wie oben schon für die Schriftarten (Typografie) beschrieben, gilt auch hier ausreichend Farbkontraste Schriftgröße, um eine gute Lesbarkeit und Erkennbarkeit zu gewährleisten. Schriftschnitte die zu schmal laufen sind ungeeignet. Eine Übersicht bietet das Contrast Tools mit der nach WCAG 2 + WCAG 3 ersichtlich ist, welcher Schnitt und Größe geeignet ist.

Der Einsatz von H-Überschriften sollte in semantisch korrekter Reihenfolge eingesetzt werden. Z.B. H1 H2 H3 wobei die H1 nur ein mal vorkommen darf. Beim Einsatz von H-Überschriften, können die auch per CSS überlagert werden. Z.B. eine Überschrift soll wie einen H1 aussehen, ist aber eine H3 und wird mit einer CSS-Klasse h1 übersteuert. Somit kann der Redakteur die richtige Reihenfolge der H-Überschriften einhalten, ohne auf das Layout / CI zu verzichten.

Bei der fixen Positionierung von Elementen im Kopfbereich, sollte auf unlogische Reihenfolgen per CSS verzichtet werden. Z.B. ein wichtiges SubMenü im HTML-DOM zu weit unten, oder per Tastatur nicht benutzbar einzusetzen.

Neben Bildelemente die über das ALT-Attribut mit einem alternativen Text beschrieben werden, wird es mit Videos oder interaktiven Karten sehr viel schwerer, die barrierefreie bereitzustellen. Z.B. ein eingebundenes Youtube Video per iFrame ohne Untertitel ist für Menschen mit Hörbehinderung nicht wahrnehmbar. Hier müsste mit dem Untertitel-Editor von Youtube ein Untertitel hinzugefügt werden.

Nativ eingebundene Videos sollten mit einer Beschreibung ergänzt werden. Dem Contao Videoplayer sollten die Steuerelemente anspringbar gemacht werden und die bedienbar mit CSS :focus.