Accessibility
Wir folgen den Web Content Accessibility Guidelines 2.1 Stufe AA, den Richtlinien der Web Accessibility Initiative (WAI) zur barrierefreien Gestaltung für Anwendungen im Internet.
Verwende für die Umsetzung und Prüfung der Accessibility nach WCAG die Accessibility Matrix unserer Accessibility@DB Community. Sie basiert auf der WCAG und gibt Dir einen Überblick über die wichtigsten Punkte, die es zum Thema Accessibility zu beachten gilt.
Unsere Accessibility Matrix wird fortwährend weiterentwickelt.Hast Du Verbesserungsvorschläge oder Rückfragen? Dann schreib uns eine E-Mail.
Lade hier die Accessibility Matrix 1.0.0 herunter und besuche die Accessibility Community in ihrem Teams-Channel.
Farbe und Kontrast
Das Kontrastverhältnis von Typographie zu Hintergrundfarbe ist für kleine und große Schriftklassen definiert, um den Standard Level AA zu erfüllen. Für kleine Schriftklassen beträgt das Kontrast-Verhältnis mindestens 4,5:1, für große Schriftklassen (14pt bold, 18pt regular) mindestens 3:1.
Kontrastverhältnis – Schriftklassen
Verwende für unsere Schriftklassen folgende Kontrastverhältnisse.
Web Mobile (S & M)
Schriftklasse | Familie | Schnitt | Größe | Min. Kontrast |
H1 | DB Screen Head | Black | 28 | 3:1 |
H2 | DB Screen Head | Black | 20 | 3:1 |
H3 | DB Screen Head | Black | 18 | 3:1 |
H4 | DB Screen Sans | Bold | 16 | 3:1 |
Subline 1 | DB Screen Head | Light | 20 | 3:1 |
Subline 2 | DB Screen Head | Light | 18 | 3:1 |
Body 1 | DB Screen Sans | Regular | 16 | 4.5:1 |
Body 2 | DB Screen Sans | Regular | 14 | 4.5:1 |
Caption | DB Screen Sans | Regular | 12 | 4.5:1 |
Web Desktop (L & XL)
Schriftklasse | Familie | Schnitt | Größe | Min. Kontrast |
H1 | DB Screen Head | Black | 36 | 3:1 |
H2 | DB Screen Head | Black | 24 | 3:1 |
H3 | DB Screen Head | Black | 20 | 3:1 |
H4 | DB Screen Sans | Bold | 18 | 3:1 |
Subline 1 | DB Screen Head | Light | 24 | 3:1 |
Subline 2 | DB Screen Head | Light | 20 | 3:1 |
Body 1 | DB Screen Sans | Regular | 16 | 4.5:1 |
Body 2 | DB Screen Sans | Regular | 14 | 4.5:1 |
Caption | DB Screen Sans | Regular | 12 | 4.5:1 |
Accessibility Fokus
Anatomie und Farbgebung
Damit der Fokus den WCAG Richtlinien entspricht und das Level AA erreicht wird, wurde für den Fokus-Ring, in Browsern auch oftmals als „webkit-focus-ring“ bezeichnet, die Farbe Cyan 500 -3% HSL Darken (#2C95C4) gewählt. Dieser Farbwert besitzt sowohl auf hellem DB Cool Gray 100 und auf dunklem DB Cool Gray 600 einen Kontrastwert ≥ 3:1.
Zur Erhöhung der Sichtbarkeit und Vereinbarkeit mit allen freistehenden interaktiven Elementen, ergänzt der Fokus-Ring die Komponenten vom Rand nach außen hin. Das grundlegende Design des fokussierten Elementes bleibt hierdurch unberührt. Der Ring wird mit einer Stärke von 2dp am äußeren Rand mit einem Offset von 1dp platziert.
Freistehende KomponentenDer Fokus-Ring ergänzt die Komponente am äußeren Rand. Durch den gesetzten Fokus werden keine angrenzenden Komponenten überlagert.
Fokus bei angrenzenden ElementenUnmittelbar aneinander angrenzende Elemente, wie bspw. Optionen eines Select-Feldes, werden nicht einzeln sondern als Gruppe hervorgehoben. Die Anzahl der durch Nutzer:innen benötigten Tabs zur Navigation auf dem Bildschirm reduziert sich auf die wesentlichen Punkte und das visuelle Erscheinungsbild wird gewahrt.
Anatomie und Farbgebung
Farbgebung Fokus Ring
| DB Fokus Ring DB Cyan 500 (-3% HSL) HEX: 2c95c4 RGB: 44, 149, 196 |
| DB Fokus Offset 100% Transparent HEX: #00000000 RGBA: 0, 0, 0, 0 |
|---|
Assisstive Technologien
Wir unterstützen technische Hilfsmittel (assistive technology) der jeweiligen Plattformen wie Bildschirmlesegeräte, Vergrößerungswerkzeuge und Hörgeräte, um unsere Services und Produkte für Nutzer mit Einschränkungen zugänglicher zu gestalten und die Benutzbarkeit verbessern.
Weiterführende Links: W3C Tools and Techniques, Techniques for WCAG 2.0
Weiter