In der heutigen digitalen Landschaft ist die Zugänglichkeit von Websites für alle Nutzer von entscheidender Bedeutung. Dies gilt insbesondere für Nutzer mit Behinderungen, die oft auf spezifische Funktionen angewiesen sind, um die Informationen und Dienstleistungen im Internet nutzen zu können. TYPO3, ein beliebtes Content-Management-System (CMS), bietet zahlreiche Möglichkeiten zur Implementierung von Barrierefreiheit, um sicherzustellen, dass alle Nutzer – unabhängig von ihren Fähigkeiten – auf die Inhalte zugreifen können.

In diesem Artikel werden wir die wichtigsten Aspekte der TYPO3-Barrierefreiheit untersuchen, die Web Content Accessibility Guidelines (WCAG) sowie spezifische TYPO3-Extensions und Best Practices vorstellen.

Die Bedeutung der Barrierefreiheit

Barrierefreiheit ist ein grundlegendes Prinzip, das sicherstellt, dass Websites so gestaltet sind, dass alle Nutzer unabhängig von ihren körperlichen oder technischen Einschränkungen gleichermaßen und ohne Hindernisse darauf zugreifen können. In der heutigen digitalen Welt ist es von entscheidender Bedeutung, dass niemand ausgeschlossen wird. Etwa 15 % der Bevölkerung leben mit einer Form von Behinderung, die ihre Fähigkeit einschränkt, digitale Inhalte, wie sie auf Websites bereitgestellt werden, zu nutzen. Dieser bedeutende Anteil der Gesellschaft zeigt auf, wie wichtig es ist, Zugänglichkeit nicht nur als rechtliche Verpflichtung wahrzunehmen, sondern barrierefreie Websites auch als ethische Verantwortung gegenüber allen Nutzern zu sehen.

Die Umsetzung zugänglicher Websites ist somit kein bloßes Nice-to-have, sondern ein Muss in einer inklusiven Gesellschaft. Wenn wir die Prinzipien der Barrierefreiheit in unsere Webdesign-Strategien integrieren, schaffen wir nicht nur eine benutzerfreundlichere Umgebung für Menschen mit Behinderungen, sondern fördern auch ein positives Nutzererlebnis für alle. Die digitale Welt sollte ein Ort sein, an dem Vielfalt begrüßt wird und jeder ein Teil des Geschehens sein kann.

Besondere Beachtung sollte den Web Content Accessibility Guidelines (WCAG)geschenkt werden, die als international anerkanntes Regelwerk zur Sicherstellung der Zugänglichkeit im Internet fungieren.

Diese Richtlinien bestehen aus vier grundlegenden Prinzipien:

Dies bedeutet zum Beispiel, dass alle Informationen auf einer Website für Seh- und Hörgeschädigte in geeigneter Form präsentiert werden müssen.

  • Es sollte möglich sein, durch die Seite allein mit Hilfe der Tastatur zu navigieren.
  • Alle Nutzer sollten genügend Zeit haben, um Inhalte wahrzunehmen.
  • Eingabefelder wie etwa Formulare sollten im Backend klar ausgezeichnet sein, damit man diese auch ohne Tastatur nutzen kann.
  • Inhalte sollten so gestaltet sein, dass die Wahrscheinlichkeit eines epileptischen Anfalls so gering wie möglich ist.
  • Inhalte sollten einfach zu lesen und zu verstehen sein. Das kann beispielsweise die Schriftgröße betreffen oder den Kontrast von Schrift und Hintergrund.
  • Web-Konventionen sollten eingehalten werden, beispielsweise sollten Links unterstrichen und wenn möglich in einer Farbe, z.B. in Blau, dargestellt werden.
  • Die Website sollte Feedback bei Fehlern geben und helfen, diese zu korrigieren, dazu gehören beispielsweise deutliche Fehlermeldungen.

Die Website sollte Hilfsmitteln wie Screenreader unterstützen und damit auch in Zukunft kompatibel sein.

Indem wir uns an diesen Richtlinien orientieren und barrierefreie Websites priorisieren, können wir eine digitale Landschaft schaffen, die nicht nur für Menschen mit Behinderungen zugänglich ist, sondern auch die Benutzererfahrung aller verbessert.

FullImage

Implementation measures for companies in the private sector

Companies can take the following steps to ensure compliance:

  • Conduct accessibility audits
  • Setting up accessibility consulting services
  • Developing accessible websites and apps according to WCAG guidelines
  • Train employees in accessible services and the use of assistive technologies

The BITV self-test for your website can be carried out here free of charge after registration:
https://studio.bitvtest.de/registrierung​​​​​​​

Barrierefreiheit in TYPO3

Barrierefreiheit in TYPO3 ist ein zentrales Thema, das durch mehrere Funktionen unterstützt wird, um eine inklusive Nutzung zu gewährleisten. Zu den wichtigsten Merkmalen gehören:

  • Keyboard-Navigation: Es ermöglicht eine umfassende Navigation der Website ausschließlich mittels Tastatur. Diese Funktion ist unerlässlich für Menschen mit motorischen Einschränkungen, da sie den Zugang zu Inhalten ohne Mausbedienung erlaubt.
  • Text-Alternativen für Bilder: Jedes Bild kann mit einem Alternativtext versehen werden. Diese Texte bieten eine Beschreibung des Bildinhalts und sind besonders wichtig für Menschen mit Sehbehinderungen. So können Screenreader die Informationen vorlesen und den NutzerInnen den Inhalt verständlich machen.
  • Responsive Design: TYPO3-Themes punkten durch ihre Anpassungsfähigkeit an verschiedene Geräte und Bildschirmgrößen. Ein responsives Design stellt sicher, dass die Benutzeroberfläche stets optimal dargestellt wird, egal ob auf einem Desktop, Tablet oder Smartphone. Dadurch wird eine gleichbleibend gute Nutzererfahrung für alle ermöglicht.

Diese Funktionen unterstreichen das Engagement von TYPO3, eine barrierefreie und zugängliche Plattform für alle NutzerInnen bereitzustellen.

FullImage (copy 3)

Barrierefrei gestaltete TYPO3 Extensions

Die Verwendung spezieller Extensions kann die Barrierefreiheit erheblich ausweiten, indem sie sowohl die Zugänglichkeit verbessern als auch den Entwicklungsprozess optimieren. Eine der empfehlenswerten Erweiterungen ist eine automatische Farbkontrastprüfung, die sicherstellt, dass Texte vor jedem Hintergrund gut lesbar sind. Eine weitere nützliche Extension ermöglicht das Hinzufügen von strukturierten Daten zu Bildern, was für Screenreader von Vorteil ist und den Nutzern beim Navigieren der Website zusätzliche Informationen bietet. Zudem sind Plug-ins verfügbar, die benutzerdefinierte Tastaturkürzel ermöglichen, was besonders für Nutzer mit motorischen Einschränkungen hilfreich ist.

Durch die Implementierung dieser barrierefreien Extensions in TYPO3 wird nicht nur die Einhaltung der gesetzlichen Vorgaben unterstützt, sondern auch ein inklusives Nutzererlebnis geschaffen, das das volle Potenzial der digitalen Welt ausschöpft. Um die Barrierefreiheit noch weiter zu optimieren, können folgende Extensions verwendet werden:

  • Accessibility: Überprüft automatisch die Zugänglichkeit und passt die Website an Empfehlungen zur Einhaltung der WCAG an.
  • T3AI: Diese KI-gesteuerte Extension verbessert die Benutzererfahrung durch die Generierung von Inhalten und die Umsetzung von SEO-Optimierungen.
  • Accessibility Checker: Ein Tool zur Überprüfung, ob die TYPO3-Website den Barrierefreiheitsstandards entspricht.

Hier finden Sie eine Übersicht der wichtigsten TYPO3-Erweiterungen für eine optimale Barrierefreiheit:

TYPO3-Erweiterung, die die semantische Struktur von Überschriften vereinfacht.

  • Ziel: Optimierung der Struktur von Überschriften in TYPO3-Inhaltselementen für eine klare und konsistente Darstellung.
  • Vorteile:
    • Verbessert die Benutzererfahrung für Redakteure.
    • Sicherstellung der Einhaltung von TYPO3-Standards und -Best Practices.
    • Förderung der Barrierefreiheit und SEO-Optimierung durch klare Überschriftsebenen.

Für weitere Details können Sie die Quelle hier besuchen: https://extensions.typo3.org/extension/z7_semantilizer

Ein Zugänglichkeitstool, das in Ihre TYPO3-Website integriert wird.

  • Ziel: Verbesserung der Benutzerfreundlichkeit und Zugänglichkeit für alle Besucher.
  • Vorteile:
    • Optimierung der Zugänglichkeitsfunktionen auf TYPO3-Websites.
    • Unterstützung von Standards zur Barrierefreiheit, um sicherzustellen, dass die Website für alle Benutzer leicht navigierbar ist.
    • Erhöhung der Nutzerzufriedenheit durch eine verbesserte Benutzererfahrung.

Für weitere Details können Sie die Quelle hier besuchen: https://extensions.typo3.org/extension/accessibility4typo3

Implementiert die Textteilsprachfunktion für CKEditor 5.

  • Ziel: Hinzufügen von Unterstützung für verschiedene Sprachen innerhalb des CKEditor.
  • Vorteile:
    • Erlaubt die Nutzung mehrerer Sprachen in unterschiedlichen Textteilen.
    • Fördert die Mehrsprachigkeit und Benutzerfreundlichkeit in TYPO3-Instanzen.
    • Optimiert die Textbearbeitung für mehrsprachige Inhalte.

Für weitere Details können Sie die Quelle hier besuchen: https://extensions.typo3.org/extension/rte_ckeditor_textpartlanguage

Konfigurierbarer Zugänglichkeitscheck für TYPO3-Inhaltselemente und Erweiterungsaufzeichnungen.

  • Ziel: Sicherstellung der Barrierefreiheit durch regelmäßige Überprüfungen von Inhalten.
  • Vorteile:
    • Bietet anpassbare Prüfungen zur Überwachung der Barrierefreiheit in TYPO3.
    • Ermöglicht Redakteuren die Identifizierung und Behebung von Zugänglichkeitsproblemen.
    • Unterstützung für die Einhaltung von Barrierefreiheitsstandards und -richtlinien.

Für weitere Details können Sie die Quelle hier besuchen: https://extensions.typo3.org/extension/uw_a11y_check

Sprachsynthese- und Vorlesesoftware für Inhalte auf der Webseite.

  • Ziel: Ermöglicht die Sprachausgabe von Texten auf TYPO3-Websites.
  • Vorteile:
    • Integriert einen Online-Screenreader, der Texte in gesprochene Sprache umwandelt.
    • Unterstützt die Barrierefreiheit, indem Inhalte für hörgeschädigte oder sehbehinderte Benutzer zugänglicher gemacht werden.

Für weitere Details können Sie die Quelle hier besuchen: https://extensions.typo3.org/extension/wes_reader

Fügt Abkürzungsfunktionen in CKEditor hinzu.

  • Ziel: Verbesserung der Textbearbeitung durch Unterstützung für Abkürzungen.
  • Vorteile:
    • Erlaubt das einfache Hinzufügen von Abkürzungen während der Textbearbeitung.
    • Verleiht Redakteuren die Möglichkeit, Texte klarer und präziser zu gestalten.
    • Unterstützt die Einhaltung von Standards für Barrierefreiheit und Lesbarkeit.

Für weitere Details können Sie die Quelle hier besuchen: https://extensions.typo3.org/extension/rte_ckeditor_abbr

Integriert ReadSpeaker WebReader und DocReader-Dienste für Text-to-Speech.

  • Ziel: Ermöglicht Sprachfunktionen und Dokumentenlesedienste auf TYPO3-Websites.
  • Vorteile:
    • Bietet die Sprachausgabe von Inhalten in über 30 Sprachen mit mehr als 50 verschiedenen Stimmen.
    • Unterstützt die Zugänglichkeit für hörgeschädigte oder sehbehinderte Benutzer.
    • Ermöglicht das direkte Vorlesen von Texten und Dokumenten, wie PDFs, direkt auf der Webseite.

Für weitere Details können Sie die Quelle hier besuchen: https://extensions.typo3.org/extension/t3readspeaker

If user stories are too large, they need to be split to be able to realize them within a sprint. How to split should be strictly based on the value of the user ("As a [user], I want[feature] to achieve [value].") and not on the technology.

The process is optimally done as a team. This allows avoiding unnecessary dependencies between user stories, early description of solutions, and excessive production of less solution-oriented spike stories.

Acceptance criteria help to determine whether user stories have been successfully implemented. Here, key results are defined that are to be fulfilled by the user story. A much-used way to define acceptance criteria is to question keywords. The latter are specifically specific verbs, adjectives, and nouns:

  • Who does what, when, and where?
  • What happens as a consequence of this action?
  • What options does the actor have?

Using such W-questions, acceptance criteria are relatively easy to establish.

User stories should always be independent of each other. In practice, however, this is not always as easy as it first seems. Technical, content-related or functional, time-related or normative or regulatory dependencies regularly emerge. Even different competencies in the team can indirectly lead to dependencies in the realization of user stories.

In order to effectively exclude such and similar dependencies, it helps to perform a visualization in the sense of user story mapping. In the course of this, it should be possible to quickly identify critical points. An alternative method is to document dependencies in separate tables or as supplementary notes.

Dokumentation und Schulung

Ein zentraler Aspekt einer erfolgreichen Barrierefreiheit ist die umfassende Schulung aller beteiligten Redakteure und Entwickler. Es ist essenziell, dass diese Personen über das notwendige Wissen und Verständnis der Richtlinien zur Barrierefreiheit verfügen. Hierzu sollten regelmäßige Schulungsprogramme organisiert werden, die nicht nur die Grundlagen der Barrierefreiheit erläutern, sondern auch spezifische Funktionen und Möglichkeiten von TYPO3 aufzeigen. Eine gut dokumentierte Vorgehensweise hilft nicht nur den aktuellen Teammitgliedern, sondern sorgt auch dafür, dass neue Mitarbeiter schnell eingearbeitet werden können. Eine klare Dokumentation fördert zudem die Transparenz im gesamten Entwicklungsprozess.

Regelmäßige Tests

Um sicherzustellen, dass Ihre Website den verschiedenen Barrierefreiheitsstandards entspricht, sind regelmäßige Tests unverzichtbar. Diese Tests sollten nicht nur zu Beginn eines Projekts durchgeführt werden, sondern kontinuierlich, während des gesamten Lebenszyklus der Website, stattfinden. Verschiedenste Testmethoden können eingesetzt werden, darunter manuelle Überprüfungen durch Benutzer mit unterschiedlichen Fähigkeiten sowie automatisierte Tools zur Überwachung von technischen Barrieren. Regelmäßige Tests ermöglichen es Ihnen, frühzeitig Probleme zu identifizieren und Anpassungen vorzunehmen. Dadurch verhindern Sie nicht nur mögliche rechtliche Konsequenzen, sondern tragen auch aktiv zur Verbesserung der User-Experience für alle Nutzer bei.

Eingängige Benutzeroberfläche

Die Benutzeroberfläche Ihrer Website spielt eine entscheidende Rolle dabei, wie intuitiv und benutzerfreundlich die Inhalte wahrgenommen werden. Alle Elemente auf der Seite sollten klar beschriftet und leicht verständlich sein. Dies betrifft sowohl Menüeinträge als auch Formulare und interaktive Komponenten. Ebenso ist es wichtig, Feedback zu Benutzeraktionen bereitzustellen – sei es durch visuelle Hinweise oder akustische Signale – um den Nutzern zu zeigen, dass ihre Eingaben korrekt erfasst wurden oder sie auf dem richtigen Weg sind. Eine durchdachte Gestaltung der Benutzeroberfläche fördert nicht nur die Zugänglichkeit, sondern verbessert auch die allgemeine Benutzererfahrung erheblich.

What obligations arise from the BFG?

Companies must gradually fulfil the requirements of the Accessibility Improvement Act. The core obligations include

1. design and functionality: products and services should be designed in such a way that they can be used independently by people with disabilities as far as possible. This includes websites, mobile applications and electronic devices.

2. information and customer service: Information on products and services should be provided in accessible formats and customer service barriers should be removed.

3. staff training: Companies should ensure that their employees are trained in dealing with accessible products and services.

4. feedback mechanisms: Implement procedures through which users can provide feedback on accessibility.

FullImage (copy 2)

Checkliste zur Barrierefreiheit in TYPO3

Klare Strukturierung der Inhalte

  • Verwenden Sie Überschriften, Listen und Absätze, um den Inhalt logisch zu gliedern.
  • Stellen Sie sicher, dass die Überschriftenhierarchie korrekt angewendet wird (H1, H2, H3 etc.).

Farben mit Bedacht wählen

  • Achten Sie darauf, dass der Kontrast zwischen Text und Hintergrund ausreichend hoch ist.
  • Vermeiden Sie es, wichtige Informationen ausschließlich über Farben zu kommunizieren.

Formulare zugänglich gestalten

  • Alle Formularelemente sollten Beschriftungen und Bezeichnungen enthalten.
  • Stellen Sie sicher, dass Fehleingaben klar markiert und zusammen mit hilfreichen Hinweisen erklärt werden.

Verzicht auf automatische Medienwiedergabe

  • Vermeiden Sie automatisch abspielende Videos oder Audiodateien.
  • Falls dies unvermeidlich ist, bieten Sie den Nutzern eine einfache Möglichkeit, die Wiedergabe zu stoppen.

Testen mit Screenreadern

  • Nutzen Sie Screenreader-Software, um die Zugänglichkeit Ihrer Webseite aus der Sicht von Nutzern mit Sehbehinderungen zu überprüfen.
  • Achten Sie darauf, dass alle wichtigen Informationen von Screenreadern erfasst und vorgelesen werden.

Alternative Texte für Bilder

  • Fügen Sie beschreibende alternative Texte (Alt-Texte) für alle Bilder hinzu.
  • Die Alt-Texte sollten den Inhalt und die Funktion des Bildes kurz erläutern.

Barrierefreie Navigation

  • Überprüfen Sie, ob die Webseite mit der Tastatur navigierbar ist.
  • Verwenden Sie klare und aussagekräftige Linktexte, die den Zweck des Links beschreiben.

Verwendung von ARIA-Rollen

  • Implementieren Sie aria-role-Attribute, um die semantische Bedeutung der Elemente zu verbessern.
  • Achten Sie darauf, dass die ARIA-Rollen sinnvoll und kontextgerecht eingesetzt werden.

Video- und Audiodateien

  • Stellen Sie Untertitel für Videos und Transkripte für Audiodateien bereit.
  • Sorgen Sie dafür, dass Videos und Audiodateien steuerbar sind (Start, Pause, Lautstärke).

Regelmäßige Überprüfung und Aktualisierung

  • Führen Sie regelmäßige Audits zur Barrierefreiheit durch, um sicherzustellen, dass die Webseite den aktuellen Standards entspricht.
  • Seien Sie bereit, Barrieren zu adressieren und notwendige Anpassungen vorzunehmen.

Conclusion

With buyer personas you give your target group a face - or in most cases even several faces. This is extremely helpful for maximally efficient and effective marketing. You can carry out exactly those measures that really appeal to your target customers - and because you are sure to reach them, you are especially likely to really convince them.

Use all the information you can get for your buyer personas. You will get the greatest possible yield for maximally useful personas from conducting and evaluating interviews. The more differentiated your approach, the more useful the results will be.

Container mit Bild

How we can support your company around the topic BITV and accessible websites:

  • We offer comprehensive advice on the requirements and guidelines of the BITV and perform an accessibility analysis of your existing website to identify potential weaknesses.
  • We are happy to support you in redesigning or adapting your website to meet the requirements of BITV. This includes the design of a user-friendly and accessible user interface as well as the implementation of accessible techniques and functions. In addition, we can support you in creating accessible content.
  • In training courses and workshops, we can raise awareness of accessibility and impart knowledge about the implementation of accessible websites according to BITV. This can help ensure that your organization complies with accessible standards in the long term.
  • If desired, we can also help you obtain an official accessibility certificate for your website. This can officially validate your efforts to create an accessible online presence.

Do you have any other questions?

Oliver Parrizas will be happy to answer any questions you may have on the subject. +49-800-911-91-91

Book desired date