Can I hide content while maintaining web accessibility?

First, consider whether hiding the content is necessary. The same information should be available to everyone, including users of assistive technology. Carefully consider the potential impacts of hiding content from user groups.

Methods for hiding web content depend on who you want to hide it from and why.

Hide the content from everyone

This scenario often applies to content that needs to be hidden until it’s exposed by the user. Interactive widgets that show and hide content include accordions, tablists, disclosure buttons, and others. When the widget’s content is hidden visually, it also needs to be hidden from the accessibility tree.

Common strategies for hiding content from all users:

• (CSS) display: none - Hides content visually and from the accessibility tree
• (CSS) visibility: hidden - Hides content visually and from the accessibility tree
• Other Methods - When using a method that hides content visually only, add aria-hidden="true" so that the content is also hidden from the accessibility tree. When the content becomes visible, this attribute must either be removed or updated to "false."

Hide the content from assistive technology users only

This scenario should apply only to content that is decorative or redundant. Decorative images are a common example.

Common strategies for hiding content from assistive technology:

• (HTML) null alt attribute - For image elements, indicates the image is decorative so it is ignored by assistive technology
• (CSS) background or background-image - Images inserted with this method are not available to the accessibility tree
• (ARIA) aria-hidden="true" - Removes the element and its children from the accessibility tree without affecting appearance. This attribute should not be used on keyboard focusable elements

Hide the content from visual users only

This scenario should be applied sparingly, if at all. Many users of various assistive technologies still interact with the page visually, and they may be confused or disoriented by mismatches between what is visible on the screen and what is communicated by their assistive technology.

Often the intention is to hide accessibility information visually while keeping it available in the accessibility tree, but many users with disabilities do not interact with the accessibility tree. Also, the information is likely valuable to a broader range of users than you realize.

However, if there is a compelling reason to only visually hide certain content, there are several methods to accomplish this.

Common strategies for visually hiding content:

• (CSS) clip-path - the edges of the content are heavily clipped so that it is no longer visible.
• (CSS) position-absolute - the content is forced so far to the side that it is not visible, even in large viewports

When deciding whether to hide content, the user’s experience is a vital consideration. Gain valuable insights and a window into the real user experience with Accessibility Testing from Accessible Web.