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.

See Also

‘Language of Page’ requires that each webpage has a default human language assigned.

Introduction

For both users who rely on conventional web browsers and those who prefer assistive technologies, assigned a webpage’s language is essential for understanding.

Among the benefits, text is rendered more accurately, screen readers will use the correct pronunciation rules and captions will load correctly.

How to Pass ‘Language of Page’

Set the default language of each webpage using the lang HTML attribute.

‘Language of Page’ Tips

Set the language in your site template so you only have to do this once (unless your website has pages in different languages).

If a webpage has content in more than one language, set the page to the language used most.

If a webpage uses multiple languages equally, set the page to the language used first.

When using English, be aware of the three options “en”, “en-gb” and “en-us”. If in doubt, stick with “en” as this lets users set their preference. 

See Also