Accessibility Links are bugged

0 Likes
(2)

While testing some content for accessibility I realized there's an issue with the formatting Canvas is applying to links.

Example:

 

 

 

<a href="https://loremipsum.io/"> <span>Transcript</span></a>

 

 

 

Will format to

 

 

 

 

<a href="https://loremipsum.io/" class="external" target="_blank" rel="noreferrer noopener">
  <span>
    <span>
      <span>
        <span>Transcript</span>
      </span>
      <span class="screenreader-only">&nbsp;(Link will open in this tab.)</span>
    </span>
  </span>
  <span aria-hidden="true" class="ui-icon ui-icon-extlink ui-icon-inline" title="Links to an external site."></span>
  <span class="screenreader-only">&nbsp;(Links to an external site.)</span>
</a>

 

 

 

 

 

 

Since Canvas is adding those screenreader-only lines users will hear that a link opens in this tab to an external site, which is not true since target=_blank on the link will open the link in a new tab.  I tested this using Mac VoiceOver (Chrome and Firefox) and Chrome ScreenReader, but I expect this to be the case with other screen readers as well. 

This does only happen on initial page load, refreshing resolves the issue, but it can be recreated by clearing browser cache.

 

🔎 This idea has been archived. While this idea isn't open for comments, it is an important part of Instructure’s idea conversations and development process. Contributions like this are valuable as Instructure prioritizes work on new or existing features.

Tags (3)
2 Comments
Naomi
Community Team
Community Team
Status changed to: Moderating

Hi, @bhuggins!

Thanks for sharing your find! That does sound buggy. Would you be willing to create a ticket with Canvas Support for this? They can look into this at get it routed to the appropriate team. 

Naomi

KristinL
Community Team
Community Team
Status changed to: Archived