E-mail List Archives
From:
- Next message: Swift, Daniel P.: "Re: Trying to find middle ground with a developer"
- Previous message: escetic@gmail.com: "Re:
- for form layout?"
- Next message in Thread: Sandy Feldman: "Re: using .svg images accessibly"
- Previous message in Thread: Kelly Ford: "Re: using .svg images accessibly"
- View all messages in this Thread
I've been doing some testing since this thread started. The <use>
element is not helping in terms of browser/screen reader support
unfortunately.
The best (most consistently supported) solution is to use the <img>
element to pull in the SVG. In this context the SVG is just a basic image.
The next best method seems to be to avoid the <use> element, and drop
the <symbol> directly into the link.
<a href="https://facebook.com">
<svg role="img" aria-labelledby="facebook">
<title id="facebook">Go to facebook</title>
<symbol id="icon-facebook" viewBox="0 0 30.162 64">
<path fill="#FFFFFF"
d="M30.113,0.001c0,0-6.156,0-10.239,0c-6.082,0-12.843,2.549-12.843,11.351c0.032,3.065,0,6.001,0,9.306H0
v11.173h7.251V64h13.321V31.616h8.794l0.796-10.991h-9.821c0,0,0.026-4.893,0-6.31c0-3.476,3.628-3.279,3.84-3.279
c1.73,0,5.081,0.005,5.942,0V0L30.113,0.001L30.113,0.001z"/>
</symbol>
</svg>
</a>
Then use the img role and a label to fool the browser into thinking the
<svg> is the equivalent of an <img>.
On 10/08/2017 13:59, Kelly Ford wrote:
> To add a bit more randomization but also reality for some users, JAWS will in some cases read what's in the title. If you turn the virtual PC cursor off in JAWS here by pressing ins+z, JAWS then uses the title info if theuser is readingin Internet Explorer.
>
> Kelly
>
>
- Next message: Swift, Daniel P.: "Re: Trying to find middle ground with a developer"
- Previous message: escetic@gmail.com: "Re:
- for form layout?"
- Next message in Thread: Sandy Feldman: "Re: using .svg images accessibly"
- Previous message in Thread: Kelly Ford: "Re: using .svg images accessibly"
- View all messages in this Thread