1. Barrierefreiheit

Barrierefreiheit setzt das Prinzip der Zugänglichkeit um. Das heißt: Ein Frontend muss von allen Nutzenden unabhängig von ihren individuellen Fähigkeiten oder Einschränkungen verwendet werden können. Für dieses Bedienkonzept wird Barrierefreiheit über die Web Content Accessibility Guidelines (WCAG) 2.1 auf Konformitätsstufe AA konkretisiert.

Die relevanten Regelwerke stehen dabei in folgendem Zusammenhang:

  • Die Web Content Accessibility Guidelines (WCAG) 2.1 sind der internationale technische Standard für barrierefreie Webinhalte. Sie beschreiben testbare Erfolgskriterien und bilden damit die maßgebliche Grundlage für die konkrete Umsetzung im Frontend.

  • Die EN 301 549 ist die europäische Norm für die Barrierefreiheit von IKT-Produkten und -Diensten. Für Webinhalte verweist sie auf Anforderungen der WCAG und ordnet diese in einen europäischen Normenkontext ein.

  • Die BITV 2.0 ist die deutsche Verordnung zur Barrierefreiheit von Informationstechnik. Sie setzt die Anforderungen für öffentliche Stellen des Bundes rechtlich um und verweist auf die jeweils maßgeblichen harmonisierten europäischen Normen.

Für die weitere Ausgestaltung dieses Bedienkonzepts ist ausschließlich die WCAG 2.1 auf Konformitätsstufe AA maßgeblich. Verweise in den folgenden Kapiteln beziehen sich daher nur auf die WCAG 2.1. Durch die Umsetzung der WCAG 2.1 AA werden die für Webinhalte relevanten Anforderungen aus EN 301 549 und BITV 2.0 mit berücksichtigt.

Die detaillierten Anforderungen sind zu finden unter:

Vor der Auflistung der einzelnen Kriterien sind im Kontext der IsyFact einige Kriterien der Barrierefreiheit besonders herauszustellen und bereits bei der fachlichen Konzeption zu berücksichtigen. In der Regel sind die genannten Anforderungen durch die Nutzung der Standardelemente der IsyFact erfüllt oder es wird die Möglichkeit geboten, zum Beispiel durch das Theme, diese in einem Frontend umzusetzen. Alle hier genannten Maßnahmen sind besonders hervorzuheben und unabdinglich für ein barrierefreies Frontend.

Dos

  • Eingabefelder müssen nach der Aktivierung eines Hochkontrastmodus/Farbfilters zu 50 % bestehen bleiben - eine einzelne Linie als Bestandteil ist nicht ausreichend als Identifizierung eines Eingabefeldes.

  • Die Textgröße soll zum Erreichen der WCAG 2.1 AA-Anforderungen mindestens 14pt für Labels und 12pt für Fließtexte betragen.

  • Der Textkontrast muss mindestens 4,5:1 und bei großer Schrift mindestens 3:1 betragen.

  • Alle Bilder benötigen ein inhaltlich sinnvolles, beschreibendes Alt-Attribut.

  • Bilder, die ausschließlich der Gestaltung dienen (zum Beispiel Trennlinien), müssen als solche (Schmuckgrafik) gekennzeichnet werden.

  • Tastatur-Navigation: Nicht alle Nutzenden können eine Maus verwenden. Daher ist es wichtig, dass alle Interaktionen auf dem Frontend auch über die Tastatur möglich sind. Dies bedeutet, dass alle Navigationselemente, Links und interaktiven Elemente leicht per Tastatur zugänglich sein müssen.

Don’ts

  • Es sollten keine Schriftgrafiken genutzt werden.

  • Schwache Kontraste, zum Beispiel Hellblau auf Grau, sollen vermieden werden.

  • Vermeidung von reinen Farbunterscheidungen: Informationen sollten nicht allein durch Farbe vermittelt werden, da einige Nutzende Farben nicht unterscheiden können. Daher sollten auch andere visuelle Elemente, wie Symbole oder Muster genutzt werden, um wichtige Informationen zu vermitteln.

  • Aktionen sollen nicht durch Bedienelemente ausgelöst werden, wenn diese nicht dazu vorgesehen sind (zum Beispiel Radiobuttons und Checkboxen).

1.1. Tastaturbedienbarkeit und Tastaturkombinationen

Die Tastatursteuerung ist eine elementare Art der Navigation für Frontends. Wichtig ist dabei die Einhaltung standardisierter Bedienmuster, um eine intuitive und konfliktfreie Nutzung zu gewährleisten. Anwendungen der IsyFact nutzen daher die bekannten Standardkombinationen, verzichten somit auf eigene Tastenkombinationen und bilden so die Basis für eine einheitliche und barrierefreie Bedienung. Beispiele hierfür sind:

  • Tabulator: Navigation zwischen interaktiven Elementen wie Links, Buttons oder Eingabefeldern.

  • Shift + Tab: Navigation rückwärts zwischen interaktiven Elementen.

  • Enter: Aktivierung von Buttons, Links und anderen interaktiven Elementen.

  • Leertaste: Scrollen in Seiten (bei nicht fokussierten Elementen) oder Aktivieren von Checkboxen (bei fokussierten Checkboxen).

  • Pfeiltasten: Navigation in Listen, Dropdowns oder Textfeldern.

  • Esc: Schließen von Dialogen oder Dropdowns.

Der reine Einsatz von Standardkombinationen in der Tastatursteuerung ist nicht ausreichend, eine größtmögliche Barrierefreiheit sicherzustellen. So gibt es noch weitere "Dos and Don’ts" im Rahmen der Tastatursteuerung zu beachten:

Dos

  • Fokussteuerung: Alle interaktiven Elemente müssen in einer logischen Reihenfolge fokussierbar sein, ohne unerwartete Wechsel oder Sprünge.

  • Tastaturzugänglichkeit: Dynamische Elemente wie Dropdowns, Dialoge oder modale Fenster sind vollständig mit der Tastatur bedienbar.

  • Feedback: Fehlermeldungen und Erfolgshinweise werden sowohl visuell als auch über Screenreader wahrnehmbar angezeigt.

  • Standardbedienmuster: Es werden nur Standard-Tastenkombinationen verwendet, um Konflikte mit Browserfunktionen oder Assistenzsoftware zu vermeiden.

Don’ts

  • Eingeschränkte Zugänglichkeit: Kein interaktives Element darf ausschließlich mit der Maus bedienbar sein.

  • Unklare Zustände: Elemente wie Buttons oder Links dürfen keinen unklaren oder schwer erkennbaren Fokuszustand haben.

  • Unübersichtliche Navigation: Eine übermäßige Anzahl von Tab-Stops oder unlogische Fokuswechsel müssen vermieden werden.

Unter Beachtung der oben genannten Richtlinien ist eine effiziente und klare Bedienung möglich. Weitere Kombinationen im Browser zur Steigerung der Effektivität sind (Abweichungen möglich):

Navigation und grundlegende Aktionen

  1. Strg + L / Cmd + L: Fokus auf die Adressleiste.

  2. Strg + T / Cmd + T: Öffnen eines neuen Tabs.

  3. Strg + W / Cmd + W: Schließen des aktuellen Tabs.

  4. Strg + Tab / Cmd + Tab: Wechseln zum nächsten Tab.

  5. Strg + Shift + Tab / Cmd + Shift + Tab: Wechseln zum vorherigen Tab.

  6. Strg + R / Cmd + R: Neuladen der aktuellen Seite.

  7. Alt + Pfeil nach links: Zurück zur vorherigen Seite.

  8. Alt + Pfeil nach rechts: Vorwärts zur nächsten Seite.

  9. F5: Neuladen der Seite.

  10. Shift + F5: Erzwungenes Neuladen (ohne Cache).

Textbearbeitung und Eingabe

  1. Strg + A / Cmd + A: Gesamten Text auswählen.

  2. Strg + C / Cmd + C: Kopieren des ausgewählten Textes.

  3. Strg + V / Cmd + V: Einfügen aus der Zwischenablage.

  4. Strg + X / Cmd + X: Ausschneiden des ausgewählten Textes.

  5. Strg + Z / Cmd + Z: Rückgängig machen der letzten Aktion.

  6. Strg + Y / Cmd + Shift + Z: Zurückholen der zuletzt rückgängig gemachten Aktion.

  7. Strg + F / Cmd + F: Öffnen der Suchfunktion.

  8. F3: Weiter zur nächsten Suchergebnismarkierung springen.

  9. Strg + P / Cmd + P: Öffnen des Druckdialogs.

  10. Tab: Wechsel zwischen Formularfeldern oder interaktiven Elementen.

  11. Shift + Enter: Absenden eines Formulars (bei ausgewählten Textfeldern oder Buttons).

Zoom und Anzeige

  1. Strg + Plus (+) / Cmd + Plus (+): Vergrößern des Seiteninhalts.

  2. Strg + Minus (-) / Cmd + Minus (-): Verkleinern des Seiteninhalts.

  3. Strg + 0 / Cmd + 0: Zurücksetzen des Zooms auf die Standardgröße.

  4. F11: Umschalten in den Vollbildmodus.

Bedienung mit Screenreadern

  1. Tab: Navigieren zwischen Fokusbereichen.

  2. Shift + Tab: Rückwärts navigieren zwischen Fokusbereichen.

  3. Pfeil nach unten / oben: Zeilenweises Navigieren in Listen und Text.

  4. Strg + Pfeil nach rechts / links: Springen zwischen Wörtern in Textfeldern.

  5. Alt + Shift + Pfeil nach unten / oben: Navigieren zwischen Absätzen.

Diese Kombinationen ergänzen die grundlegenden Funktionen und gewährleisten eine nahtlose Integration mit Browser-Standards und assistiven Technologien wie Screenreadern. Die Einhaltung dieser Standards ermöglicht eine barrierefreie und effiziente Navigation für alle Nutzergruppen.

1.2. Barrierefreier Einsatz von Farben

Farben sind ein zentrales Gestaltungsmittel in Benutzeroberflächen und unterstützen die Orientierung sowie das Verständnis von Zuständen und Aktionen (siehe Farben).

Um eine gute Wahrnehmbarkeit und Lesbarkeit sicherzustellen, müssen ausreichende Kontrastverhältnisse zwischen Vorder- und Hintergrund gewährleistet sein. Maßgeblich sind die Anforderungen der Web Content Accessibility Guidelines (WCAG) 2.1 auf Konformitätsstufe AA.

Folgende Mindestkontrastwerte sind einzuhalten:

  • Fließtext und Labels (Normaltext): mindestens 4,5 : 1

  • Große Schrift (z. B. Überschriften ab 18 pt bzw. 14 pt fett): mindestens 3 : 1

  • Grafische Bedienelemente, Icons, Fokusindikatoren und andere nicht-textuelle UI-Komponenten: mindestens 3 : 1

Für besonders wichtige Inhalte (z. B. rechtlich relevante Seiten oder zentrale Einstiegsbereiche) wird ein Kontrast von mindestens 7 : 1 empfohlen.

Der Kontrast ist grundsätzlich so hoch wie möglich zu wählen.

Informationen dürfen nicht ausschließlich durch Farbe vermittelt werden. Status-, Warn- oder Fehlermeldungen sind zusätzlich durch Text, Symbole oder andere visuelle Merkmale eindeutig kenntlich zu machen.

Kombinationen von Vorder- und Hintergrundfarben, die die Mindestanforderungen nicht erfüllen, dürfen nicht verwendet werden. Die Einhaltung der Kontrastanforderungen ist projektseitig zu prüfen und zu dokumentieren.

Maßgeblich sind die jeweils projektspezifisch definierten Farben und deren nachgewiesene Kontrastverhältnisse gemäß den geltenden Barrierefreiheitsanforderungen. Nicht zulässige Kombinationen dürfen nicht eingesetzt werden.

1.3. Alt-Attribute für Bilder

Alt-Attribute (alternative Texte) sind textuelle Beschreibungen, die in den HTML-Code von Bildern eingebettet werden. Sie dienen mehreren wichtigen Zwecken:

  • Zugänglichkeit: Screenreader verwenden Alt-Attribute, um sehbehinderten oder blinden Nutzenden den Inhalt und Zweck eines Bildes zu vermitteln.

  • Fehlertoleranz: Wenn ein Bild aus irgendeinem Grund nicht geladen werden kann, zeigt der Browser den Alt-Text anstelle des Bildes an.

Best Practices für das Schreiben von Alt-Attributen

Beim Erstellen von Alt-Texten sollten folgende Richtlinien beachtet werden:

  • Beschreibend und prägnant: Der Alt-Text sollte den Inhalt und Zweck des Bildes kurz und genau beschreiben. Beispiel:

    <img src="blume.jpg" alt="Gelbe Tulpe im Frühlingsgarten">.

  • Kontextbezogen: Der Alt-Text sollte den Kontext berücksichtigen, in dem das Bild verwendet wird. Beispiel: Bei einem Bild eines Einkaufswagens auf einer E-Commerce-Seite könnte der Alt-Text lauten:

    <img src="cart.png" alt="Warenkorb">.

  • Keine redundante Information: Informationen, die bereits im umgebenden Text enthalten sind, müssen nicht im Alt-Text wiederholt werden. Beispiel: Wenn ein Bild neben einer Überschrift „Teamfoto 2024“ steht, sollte der Alt-Text nicht einfach „Teamfoto 2024“ wiederholen.

  • Vermeidung von Keyword-Stuffing: Der Alt-Text sollte nicht mit Schlüsselwörtern überladen werden, da dies die Zugänglichkeit beeinträchtigt.

  • Verwendung von leeren Alt-Attributen für dekorative Bilder: Wenn ein Bild rein dekorativ ist und keinen informativen Wert hat, sollte das Alt-Attribut leer sein (alt=""), um Screenreadern zu signalisieren, dass sie das Bild ignorieren können.

1.4. ARIA-Labels für andere Bedienelemente

Bedeutung von ARIA-Labels:

ARIA-Labels (Accessible Rich Internet Applications) sind ein Set von Attributen, die entwickelt wurden, um die Zugänglichkeit von dynamischen Inhalten und Benutzeroberflächen zu verbessern. Sie bieten zusätzliche Informationen für Screenreader, insbesondere für Elemente, die keine standardisierten HTML-Attribute zur Beschreibung ihres Zwecks haben.

Implementierung von ARIA-Labels:

ARIA-Labels kommen zum Einsatz, wenn ein Bedienelement keinen eindeutigen für Screenreader zugänglichen Text enthält. Hier sind die wichtigsten ARIA-Attribute und ihre Anwendungen:

  • aria-label: Wird verwendet, um ein Element zu beschreiben. Es ist besonders nützlich für Bedienelemente ohne sichtbaren Text. Beispiel:

    <button aria-label="Schließen">X</button>.

  • aria-labelledby: Verweist auf ein anderes Element, dessen Text als Beschriftung dient. Beispiel:

    <button aria-labelledby="closeButtonText">X</button>
<span id="closeButtonText" hidden>Schließen</span>.

  • aria-describedby: Gibt ein anderes Element an, das eine ausführlichere Beschreibung des aktuellen Elements enthält. Beispiel:

    <input type="text" aria-describedby="nameDesc">
<span id="nameDesc">Bitte geben Sie Ihren vollständigen Namen ein.</span>.

Best Practices für die Verwendung von ARIA-Labels

Um sicherzustellen, dass ARIA-Labels effektiv eingesetzt werden, sollten folgende Richtlinien beachtet werden:

  • Klarheit und Präzision: ARIA-Labels sollten klar und präzise sein, um den Zweck des Elements genau zu vermitteln.

  • Vermeidung von Redundanz: ARIA-Labels sollten nicht redundant zu bereits vorhandenen textuellen Beschreibungen sein.

  • Konsistenz: Die Verwendung von ARIA-Labels sollte konsistent über das gesamte Frontend hinweg erfolgen, um eine einheitliche Benutzererfahrung zu gewährleisten.

  • Testen: Die implementierten ARIA-Labels sollten regelmäßig mit verschiedenen Screenreadern getestet werden, um sicherzustellen, dass sie korrekt interpretiert werden.

Zusammenfassung:

Alt-Attribute und ARIA-Labels sind unverzichtbare Werkzeuge, um die Zugänglichkeit und Benutzerfreundlichkeit von Frontends zu gewährleisten. Durch sorgfältige Planung und Implementierung dieser Attribute können Designende und Entwickelnde sicherstellen, dass ihre Inhalte für alle Nutzenden zugänglich sind. Das Beachten der Best Practices beim Schreiben von Alt-Attributen und der Implementierung von ARIA-Labels trägt wesentlich dazu bei, eine inklusive und effiziente Benutzererfahrung zu schaffen.

1.5. Language Tag

Das lang-Attribut informiert Browser und Unterstützungstechnologien über die Sprache des Inhalts. Dies hat mehrere Vorteile:

  • Zugänglichkeit: Screenreader verwenden das lang-Attribut, um die richtige Aussprache und die korrekten Sprachregeln anzuwenden, was für Nutzende mit Sehbehinderungen von entscheidender Bedeutung ist.

  • Mehrsprachige Frontends: Das lang-Attribut ermöglicht es, verschiedene Sprachversionen eines Frontends korrekt zu kennzeichnen und so die Benutzererfahrung zu verbessern.

Um die Sprache zu definieren, können die standardisierten ISO 639-1 Sprachcodes (zwei Buchstaben) genutzt werden (zum Beispiel: de = deutsch). Dabei gilt es folgende Grundregeln zu beachten:

Festlegen der Hauptsprache eines Dokuments

Das lang-Attribut sollte im <html>-Tag des Dokuments festgelegt werden, um die Hauptsprache der gesamten Seite anzugeben. Dies stellt sicher, dass alle Inhalte auf der Seite als in dieser Sprache verfasst erkannt werden.

Festlegen der Sprache für spezifische Elemente

Wenn einzelne Abschnitte oder Elemente in einer anderen Sprache verfasst sind, sollte das lang-Attribut entsprechend auf diese Elemente angewendet werden. Dies ist besonders wichtig für mehrsprachige Frontends, Dokumente und die korrekte Aussprache durch Screenreader. Wenn nötig, können auch spezifische Sprachvarianten oder Dialekte mithilfe von Codes für Regionen oder Länder angegeben werden (zum Beispiel: en-US für amerikanisches Englisch, en-GB für britisches Englisch).

Das lang-Attribut wird nur verwendet, wenn der Text tatsächlich in einer anderen Sprache verfasst ist. Es wird nicht aus ästhetischen oder stilistischen Gründen gesetzt.

Beispiel:

<html lang="de">
    <head>
        <meta charset="UTF-8">
        <title>Mehrsprachige Frontends</title>
    </head>
    <body>
        <h1>Willkommen auf unserem Frontend</h1>
            <p>Dies ist ein Beispieltext in deutscher Sprache.</p>
            <p lang="en">This is a sample text in English.</p>
    </body>
</html>