Canvas placing link text within screenreader CSS class

Jump to solution
akhuebel
Community Participant

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

2 Solutions

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. 

View solution in original post

0 Likes
cstrikwerda
Instructure
Instructure

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

View solution in original post

0 Likes