Visible Controls (Level AA – 3.2.7)

‘Visible Controls’ requires websites to give users a way to identify controls without mouse hover or keyboard focus.

Introduction

Users with cognitive impairments, visual disabilities, mobility or motor issues may have difficulty using components if they are hidden until hovered over by a mouse pointer or focused on through keyboard navigation.

Controls that are hidden or displayed on focus but then disappear can be difficult for users to find, remember or use. Similarly, users who rely on speech to navigate can often only use a component if they can speak its name.

By making controls visible, or by allowing users to make controls visible, these issues can be avoided.

How to Pass ‘Visible Controls’

Ensure that the information needed to identify controls and components is available when the controls are needed. Note: This doesn’t mean that controls must be visible all the time. 

Alternatively, make controls available through an entry point that is always visible – for example a menu button.

You can also pass by enabling users to make the information persistently visible. For example, a control at the top of a page could toggle all components to ‘visible’ status.

Exceptions to ‘Visible Controls’

If the information is available through an equivalent component on the same page or previous step in a process, you don’t need to make every matching component visible without mouse or keyboard interaction.

If the component is specifically for enhancing keyboard navigation, for example, a ‘Skip to Content’ link.

If it’s essential to hide the identifying information, for example in a game.

See Also

• Sensory Characteristics
• Content on Hover or Focus
• Focus Visible
• On Focus
• Understanding Success Criterion 3.2.7