“Back to top” icon triggers “broken skip link” error but works fine?
-
Hi
On my pages, I have a “Back to top” icon at the bottom of the page, linking to #, please see screenshot: https://snipboard.io/vPyLNE.jpg
While it appears to work fine, and can be located and pressed using the keyboard, and has an aria label (see code below), it still triggers an error in Accessibility Checker.
<a href="#" class="ct-back-to-top ct-hidden-sm" data-shape="square" data-alignment="right" title="Go to top" aria-label="Go to top"> <svg class="ct-icon" width="15" height="15" viewbox="0 0 20 20"><path d="M10,0L9.4,0.6L0.8,9.1l1.2,1.2l7.1-7.1V20h1.7V3.3l7.1,7.1l1.2-1.2l-8.5-8.5L10,0z"/></svg> </a>I’ve read your excellent documentation at https://equalizedigital.com/accessibility-checker/broken-skip-link/ but I still cannot figure out how to resolve that error.
Any suggestions?
Kind regards
BjarneThe page I need help with: [log in to see the link]
-
Hi @oldrup,
A back-to-top link is an example of a false positive that needs to be reviewed and then ignored (ideally you do this sitewide by creating a global ignore in the Fast Track feature of Accessibility Checker Pro, but you can also do it on every page individually).
The reason this is flagging is that our Broken Skip or Anchor Link error looks for an element with an id that matches the link and in this case your back-to-top link is just a hashtag so there’s not a matching element. (I.e.
<a href="#main-content"></a>would match with<div id="main-content"></div>.)The link on your website functions because there is JavaScript in your theme that adds the scroll to top behavior when the link is selected, but Accessibility Checker has no way of knowing that. So this is an item that you would review to confirm it works and is not actually an error, then use the “Ignore” feature to close out the error.
- The topic ‘“Back to top” icon triggers “broken skip link” error but works fine?’ is closed to new replies.
