WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: using .svg images accessibly

for

From: Date: Aug 14, 2017 2:29AM

On 11/08/2017 16:02, Sandy Feldman wrote:
> 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/

Looks good to me. Using the <img element is the most sure-fire way to
get cross-platform support. Sorry it took all this effort to get to this
point!


>
> 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
>>>
>>>