A11y Code Sprint Berlin: Success Criterion 9.1.4.1 - Use of Color

[alexakressmann]

Pages

Navi sidebar
https://bitv-v12.live.typo3.cps.321.works/content-examples/menus/sections
https://bitv-v12.live.typo3.cps.321.works/content-examples/form-elements/forms
Tabs
https://bitv-v12.live.typo3.cps.321.works/content-examples/interactive/tab

Carousel
https://bitv-v12.live.typo3.cps.321.works/content-examples/interactive/carousel

Description

Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.
To WCAG

Solution

Dependency of A11y Code Sprint Berlin: Success Criterion 9.1.4.3 - make all Text colour contrast compliant
Testing of the colours blue and black: 3:1 is necessary, otherwise we need to mark the active entries with <strong>.

Information for QA

Source: https://ergebnis.bitvtest.de/pruefschritt/bitv-20-web/9-1-4-1-ohne-farben-nutzbar

DE: Ausgewählte Menüeinträge haben einen Kontrastunterschied von mehr als 3:1 zur Farbe benachbarter Einträge oder sind durch Einrückung, Fettung, Unterstreichung, zusätzliche Elemente für die Hervorhebung, Änderung der Form des Menü-Eintrags oder dergleichen hervorgehoben.

EN: Selected menu items have a contrast difference of more than 3:1 with the color of neighboring items or are highlighted by indentation, bold, underlining, additional elements for highlighting, changing the shape of the menu item, or the like.

[SarahEdding]

Contrast in tabs is fixed.
@benjaminkott
Is it possible, to show active links in subnav als <strong> ? This would take care of the internal contrast issue.
Also: the carousel's arrow controls are still too pale with 0.5 opacity, regardless of background image.

Recommendation: raise opacity to at least 0.8.

[benjaminkott]

indicator wurde auf gewünschten wert gesetzt, nun gibt es aber kaum noch einen unterschied zum hover/focus state

[benjaminkott]

@SarahEdding text zu fetten bedeutet das wir hier nen layout shift haben, den würde ich gerne vermeiden, da text ggf auch umbrechen kann etc. Alternativ wurde der aktiv marker aus der Hauptnavigation hinzugefügt.

[alexakressmann]

QA successful