Visually Hidden Text (sr-only)

Visually hidden text is content that is available to screen readers but invisible to sighted users, and it is mostly used to give extra hints or context for interactive elements that have no visible label.

In practice

Typical uses are supplementary information for buttons or links ("Read more" plus hidden context about which article is meant), context for form fields, or descriptions of icon-only buttons. Technically this is usually solved with an .sr-only CSS class that shrinks an element visually and moves it out of the visible area, instead of hiding it with display: none – which would make it invisible to screen readers as well.

Matching service

Sources

← Back to the glossary