cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
jenna_miller
Community Member

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

Jump to solution

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."

1 Solution

Accepted Solutions
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

13 Replies
awilliams
Community Champion

Hey  @jenna_miller ​, I do not know the answer to your question but I am going to share it with the Canvas Developers​ group to see if they can provide any insight.

Thanks, Adam!

Stefanie
Community Team
Community Team

 @jenna_miller ​, I've also shared your question with the Accessibility​ group--and I've edited it so that the title, which contains the heart of the question, also appears in the text body itself.

jenna_miller
Community Member

Thanks, Stefanie!

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

Exactly what I needed! Thanks so much! I'll share this with my colleagues.

I'm glad I could help. Smiley Happy

d_ellis
Community Contributor

It's excellent that this class exists. One thing worth noting: currently this class will also show for all users on the app.

So glad this is documented here! The other day the process of troubleshooting invisible text in a course Page, I found several lines with the <SPAN="screenreader-only"> tag.

Is there a way to format text this way in the Rich Content Editor? The user asked me how they could prevent this from happening again and I'd love to tell them "make sure you don't click THIS button."