User Interfaces Standing Committee

Screen Reader Only Text

Objective: There are times when information needs to be read aloud to screen reader users but not necessarily need to show to other users. This code creates a 'screen reader' only class, where text with that class will be read to screen readers but hidden for other users.

How to accomplish this: This solution requires the following custom CSS code be added to the /VIEW_CODE/css/custom1.css file:

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

Code credit: Santa Fe College