Skip to content Skip to site navigation Skip to service navigation

Screen Reader-Only Content

On occasion, you will need to hide text visually but make it available for screen reader users. There are several different techniques for doing this but adding a CSS class is one of the easiest. First, add the following to your style sheet, or add this in the <head> element at the top of the page.

  .sr-only {
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    width: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;

Then in your page, you can add this class on any element that you would like to be available to screen readers but not on screen.

<p>This is visible<span class="sr-only">, but this is not<span>.<p>

More information about off-screen text can be found on the WebAIM website.

Last modified January 17, 2023