Links in sr-only disturbs focus order for keyboard users with vision

I am working on a float chart with multiple clickable links inside a SVG. The plan is to hide the SVG from screen readers using <svg aria-hidden="true"> and have a description below the image <div class="sr-only"> (bootstrap 4) containing a description and the same links. While the SVG is hidden from screen readers, and the information inside .sr-only is hidden from users with vision, the links inside .sr-only is giving focus to the hidden links. Users with vision vil experience wrong focus order because of the hidden links.

Is there a common solution to this? Are .sr-only for text only and no links?

Solution

For the reasons that you have well experienced yourself, it's indeed a bad idea to put links or any other focusable element inside a zone with .sr_only or aria-hidden=true.

If you do it, in both case you are putting people into troubles:

People having vision won't see the focus going to a hidden zone with .sr_only. Or maybe they will see it because the browser will detect that it's off-screen and pout some kind of visual artifact to make it visible as long as the focus is there, but it will still anyway look strange.
Screen reader have a problem when an element inside aria-hidden=true takes the focus. The focused element won't be announced at all, or will be announced but will stay absent from the virtual buffer, which is inconvenient in both cases.

So, both .sr_only and aria-hidden=true are to be reserved to rather short non-interactive indications that are useful for particular users, while useless for other.

As a reminder, .sr_only and aria-hidden=true aren't exactly opposite of eachother. Content under .sr_only is hidden from the screen and readable by screen readers, while aria-hidden=true hides the content from screen readers and all other assistive tools. Don't forget about screen magnifiers, eye trackers, vocal control, highlighters for dys-troubles, etc.