Canvas placing link text within screenreader CSS class

[akhuebel]

I'm updating a very old Canvas course that provides help to faculty with Canvas. When I add links to Canvas guide pages, the Rich Content Editor is creating links with no link text.  I'm far from an html expert, but I finally figured out that it is placing the link text inside the screenreader only class in the html and CSS.  I'm adding these links by typing the link text, highlighting it, and using the link to URL button in the Rich Content Editor.  The html ends up looking like this:

<li>

<a href="https://community.canvaslms.com/docs/DOC-10061-415267000">

<span>

<span class="screenreader-only">Temporary link for testing.</span>

</span>

</a>

</li>

I know how to fix the problem, but I don't understand why it's happening.  Since I have quite a few links to add, I'm getting tired of going into the html and putting the link text in the right place.  Anyone know why it's happening and if I can stop it?

Thanks,

Anne Huebel

[tina_christophe · Accepted solution]

This was my reply from Canvas support on 1/15/22

This is Alan with L2 support. We have received your ticket in regards to the screenreader-only class that is added to pages and hiding some text. You are wondering how that is showing up. That will depend on the process of how the content is being added to the pages. Are they copy/pasting content in to the page when editing? A lot of the formatting will come along with content that is copy/pasted from other locations. If that is the process, they would need to watch for that class and delete that from the html after they have posted to the content editor. If you have any other trouble or questions, let us know anytime. 

[kona]

 @akhuebel , greetings! I'm not sure of the answer to this question, but I'm sharing it with the Canvas Developers‌ to see if they can help!

Kona

[awilliams]

Hi  @akhuebel , we'd like to look in to this further. Please contact Canvas Support, using the steps outlined in How do I get help with Canvas as an instructor? so they can collect more information and attempt to reproduce the issue. Do let us know what you hear from them as a result of that troubleshooting!

[akhuebel]

I sent the problem to Canvas Support as you asked.  We'll see if they can figure it out.  It seems bizarre to me, but I'm no html expert.

[sbradshaw1]

Hi @akhuebel  - we've just experienced this today. Did you ever hear back on a reason/solution?

Thanks!

Sheldon

[akhuebel]

Someone in my IT department found a solution that involved cutting and pasting all the problem links into Word and redoing the links there, then pasting them back into Canvas.  It was clunky but faster than searching the messy html and fixing them there.  Still no idea why it happened.

[tina_christophe · Accepted solution]

This was my reply from Canvas support on 1/15/22

This is Alan with L2 support. We have received your ticket in regards to the screenreader-only class that is added to pages and hiding some text. You are wondering how that is showing up. That will depend on the process of how the content is being added to the pages. Are they copy/pasting content in to the page when editing? A lot of the formatting will come along with content that is copy/pasted from other locations. If that is the process, they would need to watch for that class and delete that from the html after they have posted to the content editor. If you have any other trouble or questions, let us know anytime. 

[heather_monti]

This same issue is happening at our institution. We've only noticed it with one faculty, one course. Does anybody know why this is happening. We have been removing the following HTML code 

span class="screenreader-only"

in order to resolve this. But it is time consuming.

Thank you!

[akhuebel]

I never heard any reason why it was happening.

Anne

[tina_christophe]

We have an instructor experiencing this behavior in her Canvas Course. The support ticket states this happens if someone copies and pastes from another source. 

Our instructor is copying and pasting from another page within her course - and the [screen reader] code is inserted without the instructor's knowledge as the text shows on the original Canvas page. I guess it is not possible to copy and paste? It is a little interesting this has not been addressed as the problem has existed for over two years now...

[cstrikwerda]

Hello @akhuebel thanks for posting in the Community!

@tina_christophe comment about this should be the most relevant.
-Are the links created from copy/pasting content in to the page when editing?
-Extra htmlformatting can come along with content that is copy/pasted from other locations.

The html information: <span class="screenreader-only"> 
is not something that would be added from the normal process of linking in Canvas.

So we would need to look at the steps we are using when creating these links to avoid that showing in the HTML if we are copying over from external sources.

Hope this helps!

[akhuebel]

In the original case, I was typing the link text and using the RCE to insert the link.  Of course at this point, the RCE has been redesigned so I don't know if the error would occur the same way.  My IT person said it looked like the links were being copied, but I showed her that it was happening even when I typed from scratch.  We never figured out why.

[cstrikwerda · Accepted solution]

@akhuebel This response that @tina_christophe received from our L2 team member looks to be the most applicable. 

If any content has been copied and pasted into Canvas, that could bring across extra formatting, like the screenreader class you are seeing. To remove this, we need to enter the HTML editor, and delete the class 

<span class="screenreader-only">Temporary link for testing.</span>

Once deleted that should resolve the situation.

[akhuebel]

In this case I was not cutting and pasting.  I was typing from scratch.  It was weird.  Yes, removing the relevant bit of HTML was a solution, but it was very time consuming.  My IT department found a slightly better work around but no reason it was happening.  It was a mystery bug.