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.

Accessibility Meaning in the context of BFSG

Interestingly, the legal text of the BFSG does not contain any precise definitions for the application of accessibility; it merely refers to the European standard EN 301 549. This in turn refers to the AA standards of the Web Content Accessibility Guidelines (WCAG) 2.1. These guidelines generally provide a good definition of accessibility and show what accessibility means for websites.

To list all standards in detail at this point would certainly go beyond the scope of the whole. In general, however, the accessibility requirements can be divided into four principles:

Non-compliance can lead to sanctions, including fines. A proactive approach is therefore necessary.

This includes text alternatives to images and simple layouts in which information is clearly structured and content can be easily received both visually and audibly.

  • It should be possible to navigate through the site using only the keyboard.
  • All users should have enough time to perceive content.
  • Input fields such as forms should be clearly labelled in the backend so that they can also be used without a keyboard.
  • Content should be designed in such a way that the likelihood of an epileptic seizure is minimised.
  • Content should be easy to read and understand. This may concern the font size or the contrast between font and background, for example.
  • Web conventions should be adhered to, for example links should be underlined and, if possible, displayed in one colour, e.g. blue.
  • The website should provide feedback in the event of errors and help to correct them, including clear error messages, for example.

The website should support assistive devices such as screen readers and thus be compatible in the future.

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​​​​​​​

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 3)

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

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

A user story should always be written in the shortest possible sentences and in simple words. This ensures that all colleagues involved can understand it, even without expert knowledge. The formulation is always done from the perspective of the customer or user. It is important to name a real benefit.

In particular, the story should highlight who wants what and why. The cornerstones of the question "who", "what", and "why" are to be relatively freely assigned a concrete user or role (who), a fact or function (what), and a reason or value (why) according to the respective context. This results in the following basic sentence structure when writing a user story: As (user), I want (function) to achieve (value). In this context, important terms are Epic Agile and Story Mapping Agile. User stories are collected in agile epics. These collections describe requirements in higher levels of abstraction. The user stories here form the individual steps that users or customers go through until they complete an Epic. To create an agile user story mapping, rough process and work steps are recorded individually in epics and presented in a visual user story template. Using such a visualized user story mapping, the specific requirements can be worked through very clearly. The planning of tasks with regard to the achievement of the respective goal can thus be better estimated and precisely compared at any time of the development using the map. Deviations can be detected as quickly as possible and a prompt, targeted response can be made.

An important question when creating user stories is: How do you correctly estimate the corresponding effort? The short answer is: in person days or with story points. With story points, it is not primarily about the time required for a user story, but about recording its structural properties. These in turn can be used to determine the effort required. To do this, the team first defines a criterion or a combination of various criteria. A typical criterion is complexity. When using person days, all necessary work is identified and summed up. Often a user story of medium size serves as a reference here. The estimate is then made in comparison to this reference.

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.

The INVEST principle supports agile teams in defining whether a good quality user story has been created?

Determining quality or guaranteeing it to a certain extent is important in order to be able to generate maximum benefit from a user story.

Due to the undoubted relevance of this issue, we devote more detailed attention to INVEST below.

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.

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​​​​​​​

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