# Hide content

DevFeed: [Hide content](<https://devfeed.tech/articles/hide-content-9393.md>)

Original publisher: [Read original article](<https://a11yproject.com/posts/how-to-hide-content/>)

Author: Dave Rupert

Published: 2013-02-15T00:00:00Z

Content type: article

Language: en

Sources: [The A11Y Project](<https://devfeed.tech/sources/the-a11y-project.md>)

Topics: [Accessibility](<https://devfeed.tech/topics/accessibility.md>), [CSS](<https://devfeed.tech/topics/css.md>), [aria](<https://devfeed.tech/topics/aria.md>), [Localization (l10n)](<https://devfeed.tech/topics/localization.md>)

Tags: [accessibility](<https://devfeed.tech/tags/accessibility.md>), [aria](<https://devfeed.tech/tags/aria.md>), [article](<https://devfeed.tech/tags/article.md>), [css](<https://devfeed.tech/tags/css.md>), [developers](<https://devfeed.tech/tags/developers.md>), [techniques](<https://devfeed.tech/tags/techniques.md>)

## AI overview

The article explains how to hide content visually while keeping it available to screen readers. It presents the CSS clip pattern, explains why focusable elements must become visible when focused, and compares visually hidden content with aria-hidden and the HTML5 hidden attribute.

## Source excerpt

Developers commonly use display: none to hide content on the page. Unfortunately, this common action can be problematic for people who use screen readers, especially if the hidden content was meant to be for them to discover... There are real world situations where visually hiding content may be appropriate, while the content should remain available to assistive technologies, such as screen readers. For instance, hiding a search field's label as a common magnifying glass icon is used in its stead. The "clip pattern" accomplishes this task for you; hide the content visually, yet provide the content to screen readers. Unlike CSS positioning and negative text-indent techniques, the "clip pattern" also works with RTL (Right-to-Left) languages for localization. See the article Hiding Content for Accessibility for more information on this visually-hidden pattern. Also read Beware smushed off-screen accessible text for information on the added line in the code snippet. .visually-hidden { clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; } If the .visually-hidden class is applied to natively focusable elements (such as a, button, input, etc) they must become visible when they receive keyboard focus. Otherwise, a sighted keyboard user would have to try and figure out where their visible focus indicator had gone to. With modern browsers and IE9 and up, the visually hidden selector can be written like so: .visually-hidden:not(:focus):not(:active) { /* ... */ } This will ensure that if an interactive element receives focus, the styles of the .visually-hidden class will be undone and the focusable content will be exposed. Many popular CSS frameworks provide a .visually-hidden or .sr-only class, where sr stands for "screen readers". Alternatives to display: none The aria-hidden="true" attribute produces the opposite effect of the .visually-hidden class. It hides content from assistive technology, but no