I admit: in previous years you might have heard me say “focus states only apply to desktop”. Because that was often the universal truth among my project members, that is, until we learned better. So I understand why I often encounter this mistake when performing accessibility reviews. Focus states actually need to be properly implemented regardless of screen size, and that is for two main reasons:

• Mobile users using assistive technologies often step through elements and need to see what is currently in focus.
• The mobile layout may kick in for desktop users enlarging the view, or resizing the window.

A specific common mistake I’ve seen is regarding the skip links, i.e. the function to skip repeated content like the menu, in order to fulfill the WCAG requirement 2.4.1 Bypass blocks. These are often only visible when they are in focus. So you might have guessed it: I’ve seen numerous webpages when you can step to these links on mobile, but they are still hidden! And this often has the consequence that activation with assistive technologies such as screen readers is very glitchy.

Don’t forget: all screen sizes need correctly implemented focus states!