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

[jenna_miller]

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

[awilliams]

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.

[jenna_miller]

Thanks, Adam!

[Stef_retired]

 @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]

Thanks, Stefanie!

[cesbrandt · Accepted solution]

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

[jenna_miller]

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

[cesbrandt]

I'm glad I could help.

[d_ellis]

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

[britain_woodman]

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

[cesbrandt]

As far as I can find, the RCE does not support adding this or any class. I suppose it's possible the class may have been copied and pasted from somewhere, I've confirmed that the class is detected and loaded, but outside of that there does not appear to be any option in the RCE to allow for its being added to any content already present.

[Jul_Cro]

Hi All, 

We just had an instructor come to us with "invisible text" within a discussion they posted. All they did was copy a website link and insert it as a link into their post. From the student view her discussion was empty! We finally decided to take a look under the hood. Within the html we saw the screenreader only container around ALL the text so it would not be seen by anyone. We removed the code and all was fine. I tried to replicate the problem in my sandbox with the same link but could not. Super weird. 

Anyone have any other instances of this? 

[mtuten]

I haven't had this happen, but is there a possibility that there was screen reader text already on his page when he pasted it into his course?  For example, let's say I've created a screen reader only div with a message or skip to discussion replies link that is only meant for screen reader users. If I open the RCE, use my mouse to select all of the content currently in the discussion post and then paste, the properties on the div are likely to be applied to all of the content I've just pasted.

I would look into the instructor's page history to a point prior to his pasting and see if you can't find the screen reader text there.

Hope this helps.

[ostermmg]

2 years and change later, but I found your post because the exact same thing happened to one of our profs.

What's more, any new links we inserted would wrap in a <span> with the screenreader CSS class. I had to edit the HTML, remove all the spans with that class, and then it finally started working as expected again. I've never seen anything like this, and cannot for the life of me figure out what triggered this to happen. I see nothing in the WYSWIG editor that sets it.

The only thing I can think is that it's coming from Ally:

He had copied a Zoom link from an old "Home" page, and pasted it on the page. He tends to copy a bit expansively and then delete what he doesn't want. I noticed to the right of an Ally icon there's a hidden span with this:

<span class="screenreader-only">
        Accessibility score: Low
        Click to improve
    </span>

Maybe an invisible fragment stuck around?

[SusanSutton]

I was having trouble with content showing in my post on Canvas and only part of the content would show then I found in the code this

<span class="screenreader-only"> which was keeping my content from showing so the code works