Elements do not change when they receive focus.
Introduction
All users need predictability when navigating a website. If elements doesn’t act as they expect, they may become disorientated.
In particular, once an element receives focus from a user, whether with a mouse or keyboard, the element must not automatically change (known as ‘changing on focus’). This can disorientate users.
A change of focus is especially troublesome for users who navigate by keyboard, as well as those with visual disabilities or cognitive limitations.
How to Pass ‘On Focus’
- Ensure no element changes purely by receiving focus.
- Avoid both behavioural and visual modifications.
Ensure that:
- Links don’t open automatically on focus; and
- Forms don’t submit without the user acting (such as clicking the ‘Submit’ button); and
- There are no automatic pop-ups; and
- Focus never jumps to another element automatically; and
- No other action that occurs on focus alone causes the page to change.
‘On Focus’ Tips
- Most well-made websites will not have any of these errors by default, you would need to choose to add in change on focus.
- A great way to test this guideline is to unplug your mouse and navigate your way round your website. If anything moves, submits or changes on focus, fix it!
Exceptions
Elements can change on focus if the context doesn’t change. For example, you can use a dynamic menu on your website, the kind where navigation options drop down when you hover over an item. This is not a change of context.
Another example would be a hover status on a link, again, this this isn’t a change of context.
