Visibly Hidden
Allows you to add text that can be read by a screen reader but does not visibly show up on the page. A neat accessibility trick.
Add the css class to your style sheet.
Rendered Component
Additional text hidden after this. This is the additional hidden text only for screen readers
HTML
<p>Additional text hidden after this. <span class="screen_reader_text">This is the additional hidden text only for screen readers</span></p>
CSS
.screen_reader_text {
clip: rect(0 0 0 0);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}