- This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
Viewing 4 posts - 1 through 4 (of 4 total)
- The forum ‘Other’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
I have some svgs on my website However, when I went to incorporate them, and put them in a link, I get an error on the web accessibility evaluation tool saying it’s an empty link. ( example: http://wave.webaim.org/report#/http://od.msue.msu.edu/)
However if I use xlink:href to point to a new html page, I get new problems.
1. the clickable area is just around the shapes, so in order to make it useful I have to include a transparent rectangle around the svg, so it’s clickable.
https://codepen.io/anon/pen/NxJgEq
Is there something I’m missing?
Wrap the link around the use…it’s allowed.
I seem to recall Chris doing an article on it. Try searching for it on this site.
I see this post: https://css-tricks.com/a-complete-guide-to-svg-fallbacks/#stuff-about-icons-systems
where they do:
<svg class="icon">
<a></a>
<use xlink:href="#svg-status" />
</svg>
but that just creates an empty link, which is bad accessibility and what I am trying to avoid.
also if i wrap the a tag around use inside of the svg, it doesn’t work on FF or chrome. as seen here:
http://codepen.io/anon/pen/xZBXEx
I was thinking about this one – https://css-tricks.com/links-inline-svg-staying-target-events/