Zur Navigation Zum Inhalt Kontakt Menu Prinzipien Grundlagen Barrierefreiheit Design System Guidelines Deutsch Français Italiano English Unsere Gestaltungsprinzipien Nutzerzentriert Wiedererkennbar Inklusiv Reduziert Ganzheitlich Selbsterklärend Aufgabenorientiert Passend SBB Markenportal Logo Digitale Uhr Nutzungsrechte Basis-Farben Funktionale Farben Off-Brand Farben Icons Fahrplan-Icons Piktogramme Über Barrierefreiheit Über diesen Guide Kontakt Weitere Informationen Product Owner User Research Interaction Design Visual Design Development Content Design Testing Was ist ein Design System?​ Designing Coding FAQ Hilfe Prozess Contribution Kontakt Übersicht Basis Komponenten Übersicht Basis Komponenten Übersicht Basis Komponenten Übersicht Releases Design Tokens Komponenten Übersicht Basis Informationen Sinn & Zweck Community Assets Anleitung Power-Apps Digitale Werbebanner SAP App Icons Development

Du programmierst das Produkt.

Nutze semantisch korrekte Elemente

Nutze immer semantisch korrekte Elemente um assistierende Technologien möglichst gut zu unterstützen. Zeichne daher Titel in allen Stufen, Listen, Tabellen und so weiter mit den entsprechenden Elementen aus und setze für dein Dokument die korrekte Sprache.

Hilfe für korrekte Semantik: https://www.accessibility-developer-guide.com/examples

Referenz 1: https://www.w3.org/TR/WCAG21/#info-and-relationships
Referenz 2: https://www.w3.org/TR/WCAG21/#language-of-page

Nutze Standard Elemente

Native Elemente ersparen dir sowohl in HTML als auch in Mobile Apps eine Menge Ärger. Die Elemente sind bereits auf Barrierefreiheit hin optimiert, ihr komplettes Verhalten muss ansonsten nachgebaut werden. Sag dies auch deinem Designer, wenn er auf etwas besteht.

Hilfe für typische nicht-native Elemente: https://inclusive-components.design

Referenz: https://www.w3.org/TR/WCAG21/#name-role-value

Achte auf eine korrekte Linearisierung

Achte darauf, dass alle Inhalte nicht nur visuell sinnvoll angeordnet sind, sondern dies auch im Code berücksichtigt wird. Versuche alles verständlich zu machen, wenn jemand ohne CSS von oben nach unten durch das Dokument navigiert.

Testen: Schalte das CSS im Browser aus oder Nutze den Screen Reader auf dem Mobile.

Referenz: https://www.w3.org/TR/WCAG21/#meaningful-sequence

Unterstütze die Orientierung

Baue zu Beginn einer Seite Skiplinks ein und nutze verschiedene Landmark-Elemente. Mit diesen beiden Hilfsmitteln können insbesondere Nutzerinnen und Nutzer mit Screen komfortabel direkt zu den verschiedenen Teilen des Inhaltes springen.

Hilfe zu Skiplinks: https://webaim.org/techniques/skipnav
Übersicht zu Landmark Elementen: https://www.w3.org/WAI/ARIA/apg/practices/landmark-regions/

Referenz: https://www.w3.org/TR/WCAG21/#bypass-blocks

Impressum Kontakt Cookie Einstellungen