WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: using .svg images accessibly

for

From: Sandy Feldman
Date: Aug 11, 2017 9:02AM

hello Léonie, hey all,

Can you please take a look at this one? I have a feeling I've got it now!

http://imerciv.com/svg/

fingers crossed, and thanks for all your help. Sandy


On 2017-08-10 10:42 AM, Léonie Watson wrote:
> 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
>>
>>