Elements do not change when they receive focus
If your website doesn’t act as users expect it to, they’ll leave and you won’t see them again.
Focus is vital when considering what happens on your website when users reach elements like forms, videos and other interactive elements. Once an element receives focus from users, 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.
What to do
- Ensure no element changes purely by receiving focus.
- Avoid both behavioural and visual modifications.
- Links don’t open automatically on focus; and
- Forms don’t submit without the user taking action (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.
- 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!
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.
Free Developer Resources
Join over 3,500 subscribers on my weekly web accessibility email and get free developer resources like WCAG 2.1 Checklists and special offers.
Over 600 developers like you have learned more about the Web Content Accessibility Guidelines with my guidebook.