Hiding and exposing content on hover or focus

Hiding content

Content can be hidden from three groups of users:

• From all users, by using either the CSS display:none or visibility:hidden declaration.
• From users of assistive technology, by using the aria-hidden="true" attribute to remove the element from the Accessibility API.
• From sighted users, by using the WET CSS class .wb-inv to visually hide the content.

When hiding inactive content, such as untriggered modal windows and unselected sub-menus, hide it from all users. Developers frequently introduce a barrier by visually hiding such content offscreen via CSS positioning, leaving the content exposed to the accessibility API, where it’s encountered by screen reader users and others. If it needs to be hidden from sighted users, it needs to be hidden from screen reader users.

Use the aria-hidden attribute with caution, and only to improve the experience for users of assistive technology by removing redundant or extraneous information. If you use aria-hidden to hide meaningful visible content you must ensure that identical or equivalent meaning and functionality is exposed to assistive technologies.

Visually-hidden text can:

• provide a name where ARIA labels won’t work because the element doesn’t receive focus. This is illustrated in the example of CSS-generated content in the previous section. The same approach would work with a CSS background image needing a name; for instance, a list holding logos set as CSS background images could use a visually-hidden name in each list item.
• name or extend the name of elements as an alternative to ARIA labels. For example, on a page with multiple “read more” links, to distinguish each link’s purpose from the other, the preceding heading text is inserted as a visually-hidden <span> element into the link text.

<h4 class="mrgn-tp-0">How to Apply</h4>
<p>[Teaser paragraph.]</p>
<a href="article/how-to-apply.html">
   <span class="wb-inv">About How to Apply</span> 
   Read more  
</a>

.wb-inv {
   clip: rect(1px,1px,1px,1px);
   height: 1px;
   margin: 0;
   overflow: hidden;
   position: absolute;
   width: 1px;
}

Exposing hidden content on hover or focus

When exposing hidden content via pointer hover or keyboard focus, ensure the exposed content has these three properties:

Dismissable

The user can dismiss the exposed content without moving the mouse or keyboard focus, typically by pressing the Escape key.

Hoverable

The user can hover the mouse over the exposed content.

Persistent

The exposed content doesn’t disappear until mouse hover or keyboard focus leaves it.

For more details, see Module 10: Input Modalities > Mouse Input > Content on Hover or Focus

Related WCAG resources