The Web Content Accessibility Guidelines (WCAG) 2.2 Working Draft contains several new success criteria to help designers, programmers, and developers create more accessible websites. One of the newest editions is Success Criterion (SC) 3.2.7, Visible Controls.
Here’s the description of the Success Criterion from the most recent version of the working draft:
“Where receiving pointer hover or keyboard focus triggers user interface components to be visible, information needed to identify that user interface components are available is visible.”
A “visible control" is exactly what it sounds like: A perceivable element that a user utilizes to navigate, submit a form, or perform another interaction. Common examples include hyperlinks, buttons, and media player controls. A “hidden control" is a control that doesn’t appear on screen unless a user takes certain actions (for instance, hovering the mouse over part of a web page).
Developers sometimes hide controls for aesthetic reasons or to provide a visual emphasis that compels users to take action. Too many buttons can create a cluttered look, and hiding these controls can address this issue and add interest. For example, a form’s submit button may not appear until the visitor’s mouse hovers over the bottom of the screen. When the button pops up, a user might be more likely to click it — but if the user is unaware of the button’s existence, they’ll have a frustrating experience.
Hidden controls improve aesthetics, but may hurt accessibility
Non-visible controls can create barriers for some web users. A person with low vision may attempt to locate buttons and other controls before filling out a form, and when they don’t see a “submit" button, they may assume that the webpage hasn’t loaded correctly or that the button is missing. Some people have blind spots (Scotomas), and they may assume that the vision is in their blind spot. As they attempt to navigate the page, they may become confused when the button doesn’t appear in a logical place.
Hidden controls can create accessibility issues in a variety of other ways:
- Users with memory-related disabilities and neurocognitive differences may see the hidden controls when mousing over certain parts of the screen, but may not remember how to find the controls when they need them.
- Many people use keyboards to navigate the web. Hidden controls may not trigger a visual focus indicator, so keyboard-only users may not be able to perceive them. You can test this yourself by navigating your page without using your mouse.
- Without proper ARIA attributes, controls may be invisible to screen readers and other assistive technologies.
Many developers are unaware that they’re using hidden controls, since some implementations are extremely common. For instance, video players often have controls that hide automatically after the media starts playing. These types of media players don’t necessarily create accessibility issues, since the user still has the information they need to identify the controls. However, providing users with the option to keep the controls active while the video plays can improve the on-page experience.
Developers should look for alternatives to hidden controls
The Web Content Accessibility Guidelines divide success criteria into three levels of conformance: Level A (lowest), AA, and AAA. Sites that meet Level A or Level AA guidelines are generally considered accessible for most users.
The new WCAG 3.2.7 success criterion applies to Level AA websites, so your website can achieve Level A without passing this guideline. However, any accessibility issue can negatively affect your content’s user experience, and hidden controls should be avoided regardless of your conformance goals.
How to keep controls accessible:
- If you’re hiding controls to present a cleaner, simpler aesthetic, consider adding an additional control or setting that keeps controls visible. Users who prefer to have all controls on screen can activate that option.
- On a form page, it’s acceptable to hide controls until they’re necessary — for instance, the “submit" button may only appear when the user completes the required fields.
- You can also look for other ways to simplify the page layout or use other visible components (such as sub-menus or tabs) to attain a cleaner look.
Accessible web design can help users complete processes and navigate your content, and you don’t need to sacrifice aesthetics to make your site more useful to your visitors. Use a thoughtful approach when hiding any web element. WCAG standards can be extraordinarily helpful, and by auditing your website for accessibility, you can build a better understanding of how your design choices affect real-world users.
