To visually hide text for only screen readers to read, you can use the CSS.visuallyhidden class definition1. This is a way to visually hide text content from sighted users, yet have the content remain available for screen reader users. This is also sometimes called sr-only, accessibility, or other related class names.

Common pattern to visually hide text for only screen readers to read

position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;