Screen Reader Utilities
The Telerik and Kendo UI Screen Reader Utilities are CSS classes that enable you to enhance the user experience of everyone who utilizes screen reading applications.
| Utility Class | CSS Property |
|---|---|
.k-sr-only | margin: -1px; padding: 0; width: 1px; height: 1px; border-width: 0; overflow: hidden; clip: rect(0, 0, 0, 0); position: absolute; |
.k-not-sr-only | margin: 0; padding: 0; width: auto; height: auto; border-width: 0; overflow: visible; clip: auto; position: static; |
Visually Hiding an Element
Use the k-sr-only utility to visually hide an element from the page while allowing screen readers to continue announcing it.
<div class="k-sr-only"></div>Displaying a Visually Hidden Element
Use the k-not-sr-only utility to override k-sr-only and display the visually hidden element back on the screen.
<div class="k-sr-only k-not-sr-only"></div>
