Succescriterium 2.4.7 – Zichtbare focus

Zorg dat het duidelijk is waar de focus van hulpmiddelen zich bevindt. Vaak wordt de focus weergeven door een kader om het element heen te plaatsen. Zorg ervoor dat de plaatsing van het kader klopt en dat de kleur duidelijk te zien is. Voor apps is het niet mogelijk om de de kleur van het kader aan te passen. Het is wel mogelijk om elementen een andere achtergrondkleur te geven wanneer ze focus hebben.

Impact

  • Mensen met cognitieve beperkingen kunnen doordat de focus zichtbaar is de app beter gebruiken.
  • Mensen met een motorische beperking kunnen zien waar de focus zich bevind.

Controleren

Wordt de focus overal duidelijk getoond wanneer je met een toetsenbord navigeert?

Dit kan getest worden met de schermlezer of toetsenbord.

Voor apps is het niet mogelijk de kleur van de focus te veranderen.

Oplossing

Op Android kun je de achtergrondkleur veranderen bij focus. Je moet hiervoor gebruik maken van een ColorStateList, en die instellen als background.

<!-- button_selector -->
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@color/highlight" android:state_focused="true" />
    <item android:drawable="@color/primary" />
</selector>

<!-- layout -->
<Button  
    android:id="@+id/button1" 
    android:background="@drawable/button_selector">
</Button>

Op iOS kun je de accessibilityElementDidBecomeFocused en accessibilityElementDidLoseFocus methodes overschrijven. Hierdoor is het mogelijk om de achtergrondkleur te veranderen bij focus. Maak hiervoor een subclass aan.

class Button: UIButton {
    
    override open func accessibilityElementDidBecomeFocused() {
        backgroundColor = .primary
    }

    override open func accessibilityElementDidLoseFocus() {
        backgrounColor = .highlight
    }
}

Referenties

Meer succescriteria