cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
akhuebel
Community Participant

Canvas placing link text within screenreader CSS class

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

11 Replies
kona
Community Coach
Community Coach

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

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
Community Participant

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.

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

Thanks!

Sheldon

akhuebel
Community Participant

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.

heather_monti
Community Member

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
Community Participant

I never heard any reason why it was happening.

Anne

tina_christophe
Community Participant

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

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.