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.
<style>
.sr-only {
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
width: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
}
</style>
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.
