[ARCHIVED] Is there a class in Canvas's CSS for screen reader only text?

Jump to solution
jenna_miller
Community Novice

Is there a class in Canvas's CSS for screen reader only text? There are instances where my course would be more accessible if I could add text that would only display for screen readers. WebAIM describes this well in their document "Invisible Content Just for Screen Reader Users."

Labels (2)
1 Solution
cesbrandt
Community Champion

Yes, there is! It's the screenreader-only class. Here's a quick example on how it can be used:

<div id="content">

  <p>This is the content displayed on the screen.</p>

  <p class="screenreader-only">This is the content that will only come up on a screen reader.</p>

</div>

It should also be noted that the class is not restricted to a single tag name. It can be applied to any element containing text (i.e., SPAN, TD, LI, etc.).

View solution in original post