Barrierefreiheit auf Websites ist für alle hilfreich – und ab 2025 gesetzlich vorgeschrieben!
Barrierefreie Websites sind nicht nur für Menschen mit (Schwer-)Behinderung wichtig. Die Gruppe, der Barrierefreiheit auf Websites das Leben erleichtert, ist viel größer!
Hört man das Wort Barrierefreiheit, denkt man an Menschen im Rollstuhl mit schweren Behinderungen oder Einschränkungen. Aber tatsächlich ist eine barrierefreie Website für alle(!) Menschen zumindest zeitweise hilfreich. Sei es, weil sie temporär etwa durch eine Verletzung eingeschränkt sind oder auch nur situativ durch
- Lärm am Bahnhof,
- ein Baby auf dem Arm,
- eine Katze auf dem Schoß,
- eine Sprachbarriere,
- ungünstige Sichtverhältnisse.
Wann haben Sie sich das letzte Mal über zu viele Klicks oder eine unübersichtliche Website geärgert? Zahlreiche Studien zeigen:
Sie würden gerne sehen, wie eine barrierefreie Website in TYPO3 aussieht?
Das Jobcenter Bremen ist mit uns den Weg zur barrierefreien Website mit unserer Basis und TYPO3 gegangen. Lesen Sie hier alles über das Projekt: Ich bin … die benutzerfreundlichste Jobcenter-Website in Deutschland.
Das kommende EU-Gesetz zur Barrierefreiheit
Ab 2025 führt die Europäische Union wahrscheinlich ein neues Gesetz zur digitalen Barrierefreiheit ein. Das Gesetz würde viele Unternehmen und Organisationen verpflichten, ihre Websites und mobilen Anwendungen barrierefrei zu gestalten. Informieren Sie sich deswegen, ob das Gesetz für Sie gilt. Eine frühzeitige Anpassung an diese gesetzlichen Anforderungen schützt Sie vor möglichen Sanktionen. Und: Es verschafft Ihnen einen Vorsprung gegenüber der Konkurrenz – so oder so, denn …
Die Vorteile einer barrierefreien Website (in TYPO3)
- Erweiterte Zielgruppe: Eine barrierefreie Website ermöglicht es Menschen mit Behinderungen und Einschränkungen, Ihre Produkte und Dienstleistungen zu nutzen. Das bedeutet: mehr potenzielle Kund*innen für Ihr Unternehmen.
- Höhere Performance: Barrierefreie Websites sind oft intuitiver und benutzerfreundlicher. Das führt zu höherer Verweildauer, niedriger Absprungrate und besseren Konversionsraten. Wir haben alles dafür gegeben, dass die artundweise-Basis in TYPO3 barrierefreie Websites bestmöglich performen lässt – optimiert auf Ihre KPIs.
- Suchmaschinenoptimierung (SEO): Es gibt eine positive Korrelation zwischen Barrierefreiheit und hoher Sichtbarkeit in Suchmaschinen. Das ist kein Zufall: Barrierefreiheit bedeutet oft automatisch bessere Strukturen, eine gute UX und gute Lesbarkeit der Inhalte – davon profitiert moderne SEO. TYPO3 bietet alle SEO-Kriterien, die wichtig sind, damit Ihre barrierefreie Website optimal bei Google rankt.
- Rechtliche Sicherheit: Mit der Einhaltung des kommenden EU-Gesetzes zur Barrierefreiheit sind Sie auf der sicheren Seite und vermeiden rechtliche Konsequenzen.
- Fortschrittliches Markenimage: Ein Unternehmen, das auf Barrierefreiheit achtet, wird als sozial verantwortlich und fortschrittlich wahrgenommen. Das stärkt das Vertrauen und die Loyalität Ihrer Kund*innen.
1. Barrierefreiheit-Quick-Check
Wir checken den aktuellen Stand Ihrer TYPO-Website, identifizieren Barrieren und zeigen Ihnen, was Barrierefreiheit für genau Ihre Website bedeutet. Wir führen Sie an das Thema barrierefreie Websites heran – ohne dabei direkt in komplexe technische Details einzutauchen. Anschließend beraten wir Sie zu passenden technischen Lösungen, um Ihre Website barrierefrei zu gestalten.
2. Tiefgehende Barrierefreiheitsprüfung
Hier tauchen unsere Programmierer*innen (hier arbeiten wir ggf. auch mit externen Expert*innen zusammen) ganz tief in Ihre Website ein. Übrigens ganz unabhängig vom System! Alle technischen Details und Features werden mit der Barrierefreiheits-Brille intensiv geprüft. Das Ergebnis ist ein ausführliches Lastenheft, das alle Anforderungen an Ihre Website vollständig darlegt – und damit eine barrierefreie Website ermöglicht.
3. Umsetzung Ihrer barrierefreien Website
Barrierefreies Backend, Webdesign und Frontend – das können wir alles für Sie übernehmen. Unser Backend-Team löst alle technischen Schritte, während unsere erfahrenen Webdesigner*innen benutzerfreundliche und barrierefreie Designs erstellen, die sowohl ästhetisch ansprechend als auch funktional sind. Wir setzen im Frontend auf moderne Technologien und bewährte Praktiken, um sicherzustellen, dass Ihre Website allen Nutzer*innen gerecht wird.
4. Schulung und Unterstützung
Zu unserem Angebot gehört immer auch eine TYPO3-Schulung, in der Sie den Umgang mit Ihrer neuen Website von unseren Entwickler*innen lernen. Auch Teil der Schulung: die Prinzipien der Barrierefreiheit und wie Sie diese in Ihren täglichen Arbeitsablauf integrieren. Darüber hinaus stehen wir Ihnen auch nach der Implementierung auf Wunsch mit technischem Support und regelmäßigen Updates zur Seite.
5. Barrierefreier Content
Barrierefreiheit endet nicht beim Design und Code – sie geht weiter in den Inhalten. Wir helfen Ihnen, Texte, Bilder und Multimedia-Elemente so aufzubereiten, dass sie für alle Nutzer*innen zugänglich sind. Dazu gehören gut strukturierte Inhalte, verständliche Sprache, alternative Bildbeschreibungen und barrierefreie PDFs. Unsere Expert*innen zeigen Ihnen, worauf es ankommt, und unterstützen Sie bei der Erstellung oder Optimierung Ihrer Inhalte. So stellen sie sicher, dass Ihre Website nicht nur technisch barrierefrei ist, sondern auch inhaltlich für alle funktioniert.
Tab-Fallen
Eine Tab-Falle entsteht, wenn ein*e Nutzer*in nicht mehr aus einem bestimmten Bereich einer Website heraus navigieren kann, nachdem er/sie ihn mit der Tab-Taste betreten hat. Dies kann dazu führen, dass Nutzer*innen, die auf die Tastatur angewiesen sind, „gefangen“ sind: Sie können die Seite nicht mehr ordnungsgemäß bedienen.
Ein Beispiel für Tab-Fallen:
Stellen Sie sich ein modales Fenster (Pop-up) auf einer Website vor. Wenn dieses Fenster erscheint und der/die Nutzer*in hinein „tabbt“, sollte er/sie idealerweise durch alle interaktiven Elemente innerhalb des Fensters navigieren können und dann wieder zurück zur Hauptseite „tabben“ können, wenn das Fenster geschlossen ist. Eine Tab-Falle entsteht, wenn der/die Nutzer*in im modalen Fenster gefangen ist und nicht mehr zur Hauptseite zurückkehren kann. Dies kann passieren, wenn das Schließen des Fensters per Tastatur nicht korrekt implementiert ist.
Die Lösung:
- Fügen Sie ein klares, gut sichtbares Schließen-Symbol hinzu, das auch per Tastatur erreichbar ist.
- Beim Schließen des Fensters sollte der Fokus zurück auf das Element gelenkt werden, welches das Fenster geöffnet hat.
Nutzbarkeit für Screenreader
Screenreader sind Softwareprogramme, die sehbehinderten Nutzer*innen helfen, die Inhalte einer Website durch Vorlesen des Textes und Beschreiben von Elementen zugänglich zu machen. Damit Screenreader effektiv arbeiten können, müssen Websites bestimmte Standards und Praktiken einhalten.
Ein Beispiel, was es für Screenreader zu beachten gibt:
Nehmen wir an, eine Website hat ein komplexes Navigationsmenü mit mehreren Untermenüs. Für eine*n sehende*n Nutzer*in ist es einfach zu erkennen, welches Menü-Element fokussiert ist und welche Untermenüs geöffnet sind. Ein*e Screenreader-Nutzer*in hingegen benötigt klare Hinweise und Beschreibungen, um zu verstehen, wie das Menü strukturiert ist und wie es navigiert werden kann.
Die Lösung(en):
- ARIA-Labels und -Rollen: Verwenden Sie ARIA-(Accessible Rich Internet Applications)Attribute, um Screenreadern zusätzliche Informationen zu geben. Zum Beispiel kann das Attribut ‘aria-expanded’ anzeigen, ob ein Menüelement ein Untermenü hat und ob dieses geöffnet oder geschlossen ist.
- Sinnvolle Alternativtexte: Stellen Sie sicher, dass Bilder und grafische Elemente mit Alternativtexten (‘alt’-Attribut) versehen sind, die den Inhalt oder Zweck des Bildes beschreiben.
- Überschriftenstruktur: Nutzen Sie eine klare Hierarchie von Überschriften (‘<h1>’, ‘<h2>’, ‘<h3>’), um den Screenreader-Nutzer*innen eine sinnvolle Struktur der Inhalte zu bieten.
- Beschriftung von Formularfeldern: Jedes Formularfeld sollte ein zugehöriges ‘Label’ haben, das den Zweck des Feldes beschreibt. Dies hilft Screenreadern, die Felder korrekt zu identifizieren und den Nutzer*innen zu vermitteln.
Unsere Erfolgsgeschichte mit dem Jobcenter Bremen
Auf der Website des Jobcenters Bremen finden Sie im Footer das BITV-konform-Siegel von BIK für alle. Es zertifiziert, dass die Website den BITV-Test für Barrierefreiheit bestanden hat. In diesem Test wird eine Website in 98 Prüfschritten (achtundneunzig!) auf digitale Barrierefreiheit geprüft – und zwar auf Herz und Nieren! Ein Fehler bedeutet: nicht bestanden. Sie werden es sich gedacht haben: Mit der Website des Jobcenters haben wir den Test bestanden. Und von allem, was wir dabei gelernt haben, profitiert auch Ihre Website. Den Test müssen Sie dann selbst durchführen lassen, aber unsere Basis bringt alles mit, um ihn zu bestehen!
