Was tut sich im Produkt zum Thema Barrierefreiheit?

Was tut sich im Produkt zum Thema Barrierefreiheit?

Anpassungen im Produkt zur Barrierefreiheit






In diesem Artikel listen wir die Anpassungen auf, die wir bereits für das Website-Produkt hinsichtlich der Barrierefreiheit angepasst haben

1. WCAG 2.2: Sprache für einzelne Textabschnitte wählbar

Beispiel: https://web.destination.one/destinationbase/text-und-medien (Abschnitt Barrierefreiheit)
Mit diesem Release können Redakteure im TYPO3-Backend einzelne Textteile im RTE als fremdsprachig kennzeichnen, beispielsweise in den Elementen "Text mit Medienelement" oder "Akkordeon". Fremdsprachig markierte Passagen werden im RTE kursiv dargestellt, und bei Auswahl der Textstelle wird im RTE automatisch die zugewiesene Sprache angezeigt.
Beispiel: Zuweisung einer Sprache für eine Textstelle



2. WCAG 2.2: Abkürzungen in RTE pflegbar

Beispiel: https://web.destination.one/destinationbase/text-und-medien (Abschnitt Barrierefreiheit)
Mit diesem Release können Redakteure im TYPO3-Backend über den Button "Abkürzung" im RTE Abkürzungen hinzufügen. Dazu wird der Cursor zunächst an die gewünschte Position im RTE gesetzt. Nach dem Klick auf den Button "Abkürzung" können sowohl die Abkürzung als auch die entsprechende Erklärung eingegeben werden. Durch Bestätigen  wird die Eingabe übernommen. Wenn eine Erklärung für eine Abkürzung hinterlegt ist, wird der entsprechende Text im RTE und in der Frontend-Ausgabe durch eine gepunktete Linie unterstrichen angezeigt.
Beispiel: Pflege einer Abkürzung im RTE 
     

Beispiel: Ausgabe einer im RTE gepflegten Abkürzung im Frontend (bei Mouse over wird die hinterlegte Erklärung angezeigt)

  


3. a11y: Pflege und Ausgabe von Video-Untertiteln 

Im Rahmen der Umsetzung der Anforderungen aus bitvtest.de (https://bitvtest.de/pruefverfahren/bitv-20-web) für den "Prüfschritt: 7 Videofähigkeit" wurde die Videodarstellung auf https://web.destination.one erweitert. Ab diesem Release können im TYPO3-Backend in der Dateiliste Untertitel-Dateien für Videos hinterlegt werden. Im Frontend haben Nutzer:innen nun die Möglichkeit, bei der Wiedergabe eines Videos in einer Lightbox die Untertitel über das CCS-Symbol (closed captions) im Mozilla Firefox oder über die Video-Steuerelemente in anderen Browsern einzublenden.

Beispiel: Pflege im TYPO3 Backend
 
Beispiel: Aktivieren des Untertitels im Frontend für Mozilla Firefox bzw sonstige Internet Browser
    

  

Beispiel: Ausgabe Untertitel



4. WCAG 2.2: Keine unerwartete Kontextänderung bei Eingabe

Bugfix Formular: Fokus-Styles für Checkboxen wurden hinzugefügt. Beim Navigieren mit Tab werden Checkboxen nun ebenfalls visuell hervorgehoben. CORE-W-T2496

5. WCAG 2.2: Bewegte Inhalte abschalten

Ab diesem Release berücksichtigt unser Produkt die Systemeinstellung „Bewegung reduzieren“ (reduce motion) und passt Animationen entsprechend an.
Je nach Betriebssystem sind folgende Einstellungen erforderlich:

  • Windows 10: 
    Einstellungen > Erleichterte Bedienung > Anzeige > Option „Animationen in Windows anzeigen“ deaktivieren
    Settings > Ease of Access > Display > Show animations in Windows
  • Windows 11: 
    Einstellungen  >  Barrierefreiheit > Visuelle Effekte > Option  „Animationseffekte“ deaktivieren
    Settings > Accessibility > Visual Effects > Animation Effects
  • macOS:
    Systemeinstellungen > Bedienungshilfen > Anzeige > Option „Bewegung reduzieren“ aktivieren
    System Preferences > Accessibility > Display > Reduce motion
  • iOS:
    Einstellungen > Bedienungshilfen > Bewegung > Option „Bewegung reduzieren“ aktivieren
    Settings > Accessibility > Motion
  • Android 9+: 
    Einstellungen > Bedienungshilfen > Option  „Entferne Animationen“ aktivieren
    Settings > Accessibility > Remove animations

Damit passt sich unser Produkt den individuellen Präferenzen für reduzierte Bewegung an:

  • Videos: Wenn „Bewegung reduzieren“ (reduce motion) aktiviert ist, werden Videos mit Autoplay nicht mehr automatisch abgespielt.
  • Newsticker: Bei aktivierter Einstellung wird der Newsticker ohne Animation eingeblendet und läuft in einer reduzierten Geschwindigkeit ab.
  • Hover-Effekt: Der Newsticker wird bei Hover nun auch in der korrekten Farbe angezeigt.

6. WCAG 2.2: Hilfe bei Fehlern

Für dieses Release wurde das Formular in Bezug auf Barrierefreiheit optimiert:
Die Validierung der Felder wird nun durch einen farbigen Rahmen hervorgehoben. Auch das Captcha-Feld erhält einen farbigen Rahmen, wenn das Formular abgeschickt wird und nicht korrekt ausgefüllt ist.

7. a11y: Textalternativen 

Mit dem aktuellen Release wurden im Rahmen der Barrierefreiheit fehlende Textalternativen für nicht-textuelle Inhalte ergänzt.
Beispiele für ergänzte Textalternativen:
Alt-Tag:
Beispiel: https://web.destination.one/destinationbase/text-und-medien (Beispiel A einzelnes Bild)
Das Alt-Tag kann beispielsweise bei Bildern im destination.base Inhaltselement „Einzelnes Medienelement“ redaktionell gepflegt werden.

ARIA-Label:
Beispiel: https://web.destination.one/destinationbase/mediengalerie/variante-2-light (z.B. Header: SolrSearch Button und Mediengalerie: Navigationsbutton)
Das ARIA-Label wird für nicht redaktionell pflegbare Labels für Inhaltselemente bzw. Seitenbestandteile seitens der Entwicklung hinterlegt. Projektspezifische Anpassungen können jedoch in der Projektkonfiguration vorgenommen werden.
Notes
Bei Interesse an der Anpassung von nicht redaktionell pflegbaren ARIA-Labels wendet euch bitte an unsere Kundenbetreuung.

8. a11y: Aria-Label: redaktionelles Feld für Bühnen  

Mit dem aktuellen Release wurden die Optionen zur redaktionellen Pflege einer Bühne im TYPO3 Backend um den Tab "Barrierefreiheit" erweitert. Dieser ermöglicht die Hinterlegung eines ARIA-Labels und die Auszeichnung der Bühne als Landmark mit role="region" und dem zugehörigen ARIA-Label.



9. a11y: Ergänzen von fehlendem leerem Alt-Tag und/oder aria-hidden  

Bei dekorativen Bildern und Icons wurde ein fehlendes leeres Alt-Tag und/oder aria-hidden ergänzt, damit Hilfstechnologien diese Elemente ignorieren.


    • Related Articles

    • destination.youtube - TYPO3

      destination.youtube - YouTube auf der Landingpage Darstellung im Frontend Wer das Modul einmal selbst testen will, kann dies über folgenden Link machen: LINK Hinweis: Für die Anzeige im Frontend müssen Cookies akzeptiert werden. Pflege im Backend ...

    • WiFi Tracker verbindet sich nicht mehr mit Netzwerk

      WLAN-Profil(e) löschen bei Problemen mit Verbindungsaufbau Bei Problemen mit dem WLAN-Verbindungaufbau, trotz bereits korrekt hinterlegten WLAN-Zugangsdaten, kann es helfen, die über die WelcomeApp erstellten WLAN-Verbindungsprofile, welche im ...

    • Web Releasenotes 2025 02

      Liebe Kund:innen, wir freuen uns, euch die neueste Version unseres TYPO3-Produkts auf web.destination.one sowie der destination.welcome+ vorstellen zu können, die durch euer wertvolles Feedback und eure Anregungen ermöglicht wurde. Im Folgenden ...

    • Web Releasenotes 2025 01

      Liebe Kund:innen, wir freuen uns, euch die neueste Version unseres TYPO3-Produkts auf web.destination.one sowie der destination.welcome+ vorstellen zu können, die durch euer wertvolles Feedback und eure Anregungen ermöglicht wurde. Im Folgenden ...

    • Web Releasenotes 2024 02

      Liebe Kund:innen, während unsere Produktwebsite web.destination.one bereits auf TYPO3 Version 12 läuft, stellen wir gerade in Abstimmung mit euch alle bisherigen produktkonformen Kundenprojekte nach und nach um. Darüberhinaus arbeiten wir im ...