Accompanying Files
Observation Details

Focused interactive elements with focus states solely relying on color difference:

  • "Handyankauf" form

    • All/most steps

      • Buttons

        • Weiter

        • Ohne Aktion fortfahren

        • Verbindliche Anfrage abschicken

    • Step 2

      • Close button in dialog window "Wo finde ich die IMEI-Nummer?"

    • Step 3

      • Close button in dialog windows (triggered by info icon)

    • Step 5

      • Close button in dialog window "Wo finde ich die Angaben?"

      • "Prüfen" button

    • Step 6

      • Select / Dropdown "Anrede"

      • Checkboxes

        • Focus state

        • Error state


Focusing interactive element adds visual focus indicator that does solely rely on color to be differentiated from default, un-focused state and color contrast ratio of default and focused states does not meet minimum required 3:1 color contrast ratio. Interactive elements' focus states, relying on color only and with insufficient color contrast ratio to default, un-focused state include:

  • Links

  • Buttons

  • Input elements (e.g. radio buttons)

  • Accordion items

Remediation Notes

Ensure, focus states of interactive elements can be differentiated from default, un-focused states by at least one other visually perceivable factor. The issue may be remediated by ensuring high enough color contrast ratio of 3:1 for difference between states.

Preferably though, use focus outlines to indicate focus state of interactive elements, as it is browser default and known pattern to users.