'CSS focus outline on mobile devices, still necessary for accessibility?
Without a traditional keyboard on mobile devices is the CSS outline focus still necessary? I do understand the importance on desktops but not sure if outline focus state is actually useful on mobiles. Was unable to find research on that. Thank you
Solution 1:[1]
The answer is yes, from both an official and practical perspective.
People may use external inputs (i.e. switches, keyboards, keypads) with mobile devices, so visually indicating focus is still necessary.
Visible focus helps users track where they are in the content. This includes hover and focus states for mouse and keyboard as well as touch states. ... This means sighted keyboard or keypad only users can track progress as they navigate focusable elements on a page just as mouse users can, and touch users receive confirmation that something is going to happen. 2
The guideline is clearly stated in WCAG 2.0 1 (which applies to all web content), as well as unofficial mobile guidelines from the BBC2 and SSB BART Group3.
Notes: Safari on iOS and Chrome on Android both indicate input focus even without CSS outline (with a blinking cursor), but it's very subtle. Also, switch controls on iOS 7+ and iOS VoiceOver add focus indicators to on elements automatically, but these are platform specific concerns.
Solution 2:[2]
It is because you can still use the "Go" button on the soft keyboard. After hitting go the browser should set focus to the last input on the form.
Solution 3:[3]
They are helpful for voiceover/talkback users on mobile devices. User needs to be aware of which element has the focus at any time.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | |
| Solution 2 | BendYourTaxes |
| Solution 3 | Chinmay Raikwar |