Die vier WCAG-Prinzipien
Die WCAG (Web Content Accessibility Guidelines) basieren auf vier Prinzipien: Wahrnehmbarkeit, Bedienbarkeit, Verständlichkeit und Robustheit. Diese gelten unabhängig von der Sprache der Inhalte. Wahrnehmbarkeit bedeutet, dass alle Informationen auch von Nutzern mit Seh- oder Hörbeeinträchtigungen erfasst werden können. Bedienbarkeit stellt sicher, dass alle Funktionen per Tastatur und ohne zeitliche Einschränkungen nutzbar sind. Verständlichkeit fordert klare Sprache und konsistente Navigation. Robustheit gewährleistet die Kompatibilität mit assistiven Technologien. Für internationale Websites müssen diese Prinzipien in jeder Sprachversion gleichermaßen umgesetzt werden.
Sprachauszeichnung mit dem lang-Attribut
Das lang-Attribut im HTML-Element gibt die natürliche Sprache einer Seite oder eines Abschnitts an. Screenreader nutzen dieses Attribut, um die korrekte Aussprache und Betonung zu wählen. Für mehrsprachige Seiten muss das lang-Attribut auf der Hauptseite und bei sprachlichen Wechseln im Text korrekt gesetzt werden. Zum Beispiel: <html lang=“de“> für Deutsch und <span lang=“en“> für englische Passagen. Fehlt dieses Attribut, kann die Nutzung der Seite für Menschen mit Sehbehinderung erheblich erschwert werden. Prüfen Sie daher jede Sprachvariante auf vollständige und korrekte Attributierung.
Kontraste und Farben
Ausreichende Kontraste zwischen Text und Hintergrund sind essenziell für die Lesbarkeit. Die WCAG-Stufe AA fordert ein Kontrastverhältnis von mindestens 4,5:1 für normalen Text und 3:1 für großen Text. Dies gilt für alle Sprachen einer Website. Verzichten Sie auf reine Farbunterscheidungen zur Information, da farbenblinde Nutzer diese nicht erkennen können. Nutzen Sie zusätzlich Symbole oder Textmarkierungen. Farbschemata sollten zudem in allen lokalen Versionen geprüft werden, da kulturelle Assoziationen variieren können. Testen Sie Ihre Seiten mit Kontrastanalyse-Tools während der Entwicklung.
Tastaturbedienung
Alle interaktiven Elemente müssen per Tastatur erreichbar und bedienbar sein. Dies betrifft Links, Buttons, Formularfelder und Menüs. Der Fokus muss sichtbar sein, idealerweise durch einen deutlichen Fokusrahmen. Vermeiden Sie Elemente, die nur per Maus oder Touch funktionieren. Besonders bei internationalen Seiten mit komplexen Navigationen sollte die Tastaturbedienung in jeder Sprachversion getestet werden. Dynamische Inhalte wie modale Fenster müssen den Fokus korrekt verwalten. Stellen Sie sicher, dass die Reihenfolge der Elemente im DOM der logischen Reihenfolge entspricht und nicht allein durch CSS bestimmt wird.
Alt-Texte in mehrsprachigen Kontexten
Alt-Texte beschreiben Bilder für Screenreader und sollten in der Sprache der umgebenden Seite verfasst sein. Bei mehrsprachigen Websites bedeutet das: Jedes Bild erhält einen Alt-Text in der jeweiligen Sprachversion. Verwenden Sie keine automatischen Übersetzungen, sondern erstellen Sie passende Beschreibungen für jede Zielgruppe. Grafiken mit Text müssen den enthaltenen Text als Alt-Text wiedergeben. Dekorative Bilder erhalten einen leeren Alt-Text (alt=““), damit sie von assistiven Technologien ignoriert werden. Dieser Ansatz stellt sicher, dass der Inhalt in allen Sprachen zugänglich bleibt.
