Visually hiding an element (text) while remaining accessible to assistive technologies such as screen readers. Some call it screen reader only text.
Accessible hiding allows an element to be visually hidden while remaining accessible to assistive technologies such as screen readers. The approach is to apply a CSS class to the element that should not be shown.
There are several solutions for this type of CSS class, but we recommend following styles that cover hiding elements and optionally giving the ability to show the element when the element receives the focus or contains an element that has received focus. Useful for
Skip to the main content links. See
Making the hide element accessible for screen readers
What is a common pattern to visually hide text for only screen readers to read? Some says
prevent screen reader from reading pseudo element content.
Let’s use CSS to hide text visually but expose it to a screen reader. We recommend following the CSS classes for off-screen positioning.
.visually-hidden to hide visually an element (text) but still exposing to assistive technologies (such as screen readers).
.visually-hidden-focusable to visually hide an element by default, but to display it when it’s focused (e.g. by a keyboard-only user).
.visually-hidden-focusable can also be applied to a container because
:focus-within CSS pseudo-class allows to display the container when element itself or any child element of the container receives focus.
Can screen reader read hidden text?
Text that cannot be seen visually but can be read by screen readers is known as screen reader only text (also known as visually hidden text).
Does visibility hidden affect screen readers?
visibility: hidden; to an element will make it invisible and take up space in the layout, but it will also hide the element from screen readers and keyboard access.
Why would I want to hide text from sighted users?
You might want to hide text from sighted users for a variety of reasons.
Improving the screen reader user experience: Screen readers are software that read the content of a website aloud to visually impaired users. You can give additional information or context that is not essential for sighted users but is vital for screen reader users by hiding text from sighted users but making it available to screen readers.
- Create unique link descriptions: This technique solves a common problem when on the page there are several identical link descriptions, like
Continue reading. By adding visually hidden text, we are making the layout as visually appealing as we want while still making all link descriptions unique.
SEO friendly hiding: The reason you may want to hide content from sighted readers is to improve the search engine optimisation (SEO) of your website. It is important to note, however, that hiding content just for the goal of manipulating search engine results is considered a spam strategy and may result in search engine penalties. At best, the search engine would ignore this for ranking purposes once it worked out that it was not part of the main flow. Instead, only hide content if it adds value to your website’s visitors and is not exclusively for search engines.
Examples of hidden text or links that violate Google
Hidden text and linkspolicy:
- Using white text on a white background.
- Hiding text behind an image.
- Using CSS to position text off-screen. However, text that’s only accessible to screen readers and is intended to improve the experience for those using screen readers don’t violate that rule.
- Setting the font size or opacity to 0.
- Hiding a link by only linking one small character (for example, a hyphen in the middle of a paragraph).
- Automatic content translation: This technique can sometimes be used instead of
aria-label, because automatic content translation tools are not able to translate text in
aria-label, but only visually hidden text.