CSS focus outline on mobile devices, still necessary for accessibility?

Question

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

Answer 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.