Success Criterion 2.4.7 - Level AA
Focus Visible
Ensure that elements focused by assistive technologies are clearly indicated. App developers might not be able to adjust the color of the frame. However, it is possible to give elements a different background color when they have focus.
Impact
Apps become more usable when the element with focus is clearly visible.
Check
“Is the focus clearly shown everywhere when navigating with assistive technologies?“
This can be tested with a screen reader or keyboard access.
Note: apps cannot adjust the color of the focus frame. This can only be done by the user through the system settings.
Solution
Add accessibility focus indicator
On Android, you can adjust colors when an element receives focus. However, it's not possible to change the focus indicator of assistive technologies. Users can adjust their preferences in the system settings of Android.
You can use a ColorStateList to change colors based on the element state. An element moves into the state_focused whenever it receives focus.
The code sample below shows how to change the background color of a button on focus.
<!-- selector.xml -->
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@color/focused" android:state_focused="true" />
<item android:drawable="@color/default" />
</selector>
<!-- layout.xml -->
<Button
android:id="@+id/button"
android:background="@drawable/selector">
</Button>