E-mail List Archives
Thread: using .svg images accessibly
Number of posts in this thread: 18 (In chronological order)
From: Sandy Feldman
Date: Thu, Aug 03 2017 8:03AM
Subject: using .svg images accessibly
No previous message | Next message →
hey all,
I would like to use .svg images accessibly. I have a test that looks
fine, but it breaks validation. It's based on
https://codepen.io/mambroz/pen/kBGsH
Each svg has a title and a description. The descriptions seem excessive
to me - surely the title, "FaceBook" is enough, and people don't need a
description saying "Link to Facebook"? Can I just delete these, or will
I be making trouble for someone?
The svgs are labelled by their titles <aria-labelledby="title"> . The w3
validator is saying this is done wrong, "attribute must point to an
element in the same document." The attribute is right there, on the next
line.
Total validator is saying "Link text is missing" on the svg images.
WAVE has marked each of the images as errors, but I can't tell what the
error is.
This is my first time using svg images and I need some help getting it
right!
thanks so much, Sandy
From:
Subject: Re: using .svg images accessibly
← Previous message | Next message →
On 03/08/2017 15:03, Sandy Feldman wrote:
> I would like to use .svg images accessibly. I have a test that looks
> fine, but it breaks validation. It's based on
> https://codepen.io/mambroz/pen/kBGsH
>
> Each svg has a title and a description. The descriptions seem excessive
> to me - surely the title, "FaceBook" is enough, and people don't need a
> description saying "Link to Facebook"? Can I just delete these, or will
> I be making trouble for someone?
In this case I would delete the <desc> elements. They're mostly used by
screen readers, and for simple icons like these, a description of the
icon (in addition to its title) is probably excessive.
>
> The svgs are labelled by their titles <aria-labelledby="title"> . The w3
> validator is saying this is done wrong, "attribute must point to an
> element in the same document." The attribute is right there, on the next
> line.
>
You will receive validation errors when you use ARIA with SVG, because
officially speaking SVG doesn't support ARIA yet. ARIA support won't
officially arrive in SVG until SVG 2.0 is released.
In reality you can use ARIA and SVG together (and have been able to do
so for some time), but until that is official, you'll find that
validators will throw errors at you.
Where you have multiple icons in your SVG, make sure that each <symbol>
element has a unique id. If all your aria-labelledby attributes point to
"title", that too will throw errors (and also cause problems for screen
reader users.
> Total validator is saying "Link text is missing" on the svg images.
>
> WAVE has marked each of the images as errors, but I can't tell what the
> error is.
How are you embedding the SVG in your HTML? If you can share the code
for an actual implementation, rather than the example code you based it
on, it'll help.
Léonie.
--
@LeonieWatson @ = EMAIL ADDRESS REMOVED = tink.uk Carpe diem
From: Sandy Feldman
Date: Thu, Aug 03 2017 9:20AM
Subject: Re: using .svg images accessibly
← Previous message | Next message →
Thanks so much for taking the time to help with this. I have used your
suggestions to modify the code.
What do you think?
http://haltontrophies.com/svg/
Sandy
> On 2017-08-03 10:54 AM, Léonie Watson wrote:
>> On 03/08/2017 15:03, Sandy Feldman wrote:
>>> I would like to use .svg images accessibly. I have a test that looks
>>> fine, but it breaks validation. It's based on
>>> https://codepen.io/mambroz/pen/kBGsH
>>>
>>> Each svg has a title and a description. The descriptions seem
>>> excessive to me - surely the title, "FaceBook" is enough, and people
>>> don't need a description saying "Link to Facebook"? Can I just
>>> delete these, or will I be making trouble for someone?
>>
>> In this case I would delete the <desc> elements. They're mostly used
>> by screen readers, and for simple icons like these, a description of
>> the icon (in addition to its title) is probably excessive.
>>
>>>
>>> The svgs are labelled by their titles <aria-labelledby="title"> .
>>> The w3 validator is saying this is done wrong, "attribute must point
>>> to an element in the same document." The attribute is right there,
>>> on the next line.
>>>
>> You will receive validation errors when you use ARIA with SVG,
>> because officially speaking SVG doesn't support ARIA yet. ARIA
>> support won't officially arrive in SVG until SVG 2.0 is released.
>>
>> In reality you can use ARIA and SVG together (and have been able to
>> do so for some time), but until that is official, you'll find that
>> validators will throw errors at you.
>>
>> Where you have multiple icons in your SVG, make sure that each
>> <symbol> element has a unique id. If all your aria-labelledby
>> attributes point to "title", that too will throw errors (and also
>> cause problems for screen reader users.
>>
>>> Total validator is saying "Link text is missing" on the svg images.
>>>
>>> WAVE has marked each of the images as errors, but I can't tell what
>>> the error is.
>>
>> How are you embedding the SVG in your HTML? If you can share the code
>> for an actual implementation, rather than the example code you based
>> it on, it'll help.
>>
>>
>> Léonie.
>
> --
> Sandy
>
> sandyfeldman.com
> sandyfeldman.tumblr.com/
> ca.linkedin.com/in/sandyfeldman
> inclusivemedia.ca
--
Sandy
sandyfeldman.com
sandyfeldman.tumblr.com/
ca.linkedin.com/in/sandyfeldman
inclusivemedia.ca
From: Jim Homme
Date: Fri, Aug 04 2017 7:12AM
Subject: Re: using .svg images accessibly
← Previous message | Next message →
Hi,
I just checked this out with NVDA and Firefox. What I see is acting like perfectly accessible text links. Is that what I'm supposed to be seeing? Is the screen reader supposed to not know about any images? If this is a good example, may I steel it?
Thanks.
Jim
=========Jim Homme,
Team Lead and Accessibility Consultant,
Bender HighTest Accessibility Team
Bender Consulting Services, Inc.,
412-787-8567,
= EMAIL ADDRESS REMOVED =
http://www.benderconsult.com/our%20services/hightest-accessible-technology-solutions
E+R=O
From: Sandy Feldman<mailto: = EMAIL ADDRESS REMOVED = >
Sent: Thursday, August 3, 2017 11:21 AM
To: = EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >; WebAIM Discussion List<mailto: = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] using .svg images accessibly
Thanks so much for taking the time to help with this. I have used your
suggestions to modify the code.
What do you think?
http://haltontrophies.com/svg/
Sandy
> On 2017-08-03 10:54 AM, Léonie Watson wrote:
>> On 03/08/2017 15:03, Sandy Feldman wrote:
>>> I would like to use .svg images accessibly. I have a test that looks
>>> fine, but it breaks validation. It's based on
>>> https://codepen.io/mambroz/pen/kBGsH
>>>
>>> Each svg has a title and a description. The descriptions seem
>>> excessive to me - surely the title, "FaceBook" is enough, and people
>>> don't need a description saying "Link to Facebook"? Can I just
>>> delete these, or will I be making trouble for someone?
>>
>> In this case I would delete the <desc> elements. They're mostly used
>> by screen readers, and for simple icons like these, a description of
>> the icon (in addition to its title) is probably excessive.
>>
>>>
>>> The svgs are labelled by their titles <aria-labelledby="title"> .
>>> The w3 validator is saying this is done wrong, "attribute must point
>>> to an element in the same document." The attribute is right there,
>>> on the next line.
>>>
>> You will receive validation errors when you use ARIA with SVG,
>> because officially speaking SVG doesn't support ARIA yet. ARIA
>> support won't officially arrive in SVG until SVG 2.0 is released.
>>
>> In reality you can use ARIA and SVG together (and have been able to
>> do so for some time), but until that is official, you'll find that
>> validators will throw errors at you.
>>
>> Where you have multiple icons in your SVG, make sure that each
>> <symbol> element has a unique id. If all your aria-labelledby
>> attributes point to "title", that too will throw errors (and also
>> cause problems for screen reader users.
>>
>>> Total validator is saying "Link text is missing" on the svg images.
>>>
>>> WAVE has marked each of the images as errors, but I can't tell what
>>> the error is.
>>
>> How are you embedding the SVG in your HTML? If you can share the code
>> for an actual implementation, rather than the example code you based
>> it on, it'll help.
>>
>>
>> Léonie.
>
> --
> Sandy
>
> sandyfeldman.com
> sandyfeldman.tumblr.com/
> ca.linkedin.com/in/sandyfeldman
> inclusivemedia.ca
--
Sandy
sandyfeldman.com
sandyfeldman.tumblr.com/
ca.linkedin.com/in/sandyfeldman
inclusivemedia.ca
From:
Subject: Re: using .svg images accessibly
← Previous message | Next message →
On 03/08/2017 16:20, Sandy Feldman wrote:
> What do you think?
> http://haltontrophies.com/svg/
These links work with screen readers, but probably not for the reasons
you think.
The accessible name (link text) for the link is being provided by the
title attribute on the <a> element, not the <title> element in the SVG.
If you remove the title attribute the links stop working properly with
some screen reader/browser combinations.
The reason is that you're using the <use> element in the SVG, with all
the accessibility applied to the original definition of the icon. When
you use the <use> element to duplicate the original, the accessibility
isn't reliably inherited.
A related problem is that the title attribute can cause problems when
it's used on links. More on this here:
https://www.paciellogroup.com/blog/2013/01/using-the-html-title-attribute-updated/
You have a number of options...
1. Use the aria-label attribute instead of the title attribute.
This will provide an accessible name for the link that screen readers
can access, without the problems caused by the title attribute for other
AT users:
<a href="..." aria-label="Find me on YouTube">
2. Use the <title> element inside the <use> element.
You'd need to do this every time you used the icon. Something like this:
<a class="youtube" href="https://www.youtube.com/".
<svg class="socialIcon">
<use aria-labelledby="youtube-title" xlink:href="#icon-youtube">
<title id="youtube-title">Find me on YouTube</title>
</use>
</svg>
</a>
3. Use an <img> element.
The icons are just simple static images, so you could save each one in
its own .svg file and use it like you would any other image format:
<img src="youtube-icon.svg" alt="Find me on YouTube">
You'll still get the flexibility/scalability of the SVG, but with the
simple accessibility of the <img> element.
HTH
Léonie.
--
@LeonieWatson @ = EMAIL ADDRESS REMOVED = tink.uk Carpe diem
From: Jonathan Avila
Date: Fri, Aug 04 2017 11:10AM
Subject: Re: using .svg images accessibly
← Previous message | Next message →
I wanted to confirm with the group something related to this discussion regarding links with SVG images.
Given that links are not child presentation elements -- use of SVG inside of a link would either require an accessible name on the sSVG or marking the SVG as decorative such as via aria-hidden. Would people agree with that? That is SVG should be treated similar to the img element where you cannot simply leave it's purpose unspecified unless it is otherwise supposed to be excluded from the accessibility tree.
Jonathan
Jonathan Avila
Chief Accessibility Officer
Level Access, inc. (formerly SSB BART Group, inc.)
(703) 637-8957
= EMAIL ADDRESS REMOVED =
Visit us online: Website | Twitter | Facebook | LinkedIn | Blog
Looking to boost your accessibility knowledge? Check out our free webinars!
The information contained in this transmission may be attorney privileged and/or confidential information intended for the use of the individual or entity named above. If the reader of this message is not the intended recipient, you are hereby notified that any use, dissemination, distribution or copying of this communication is strictly prohibited.
From: Birkir R. Gunnarsson
Date: Fri, Aug 04 2017 4:20PM
Subject: Re: using .svg images accessibly
← Previous message | Next message →
WE use both role="presentation" and aria-hidden="true" on
presentational SVG images (granted, it is a bit of an overkill, but
there was an IE bug that required us to use both).
But, yes, for the sake of clarity, you should use either attribute on
an SVG image to make sure it is marked as decorative.
On 8/4/17, Jonathan Avila < = EMAIL ADDRESS REMOVED = > wrote:
> I wanted to confirm with the group something related to this discussion
> regarding links with SVG images.
>
> Given that links are not child presentation elements -- use of SVG inside of
> a link would either require an accessible name on the sSVG or marking the
> SVG as decorative such as via aria-hidden. Would people agree with that?
> That is SVG should be treated similar to the img element where you cannot
> simply leave it's purpose unspecified unless it is otherwise supposed to be
> excluded from the accessibility tree.
>
> Jonathan
>
> Jonathan Avila
> Chief Accessibility Officer
> Level Access, inc. (formerly SSB BART Group, inc.)
> (703) 637-8957
> = EMAIL ADDRESS REMOVED =
> Visit us online: Website | Twitter | Facebook | LinkedIn | Blog
> Looking to boost your accessibility knowledge? Check out our free webinars!
>
> The information contained in this transmission may be attorney privileged
> and/or confidential information intended for the use of the individual or
> entity named above. If the reader of this message is not the intended
> recipient, you are hereby notified that any use, dissemination, distribution
> or copying of this communication is strictly prohibited.
>
>
From:
Subject: Re: using .svg images accessibly
← Previous message | Next message →
On 04/08/2017 18:10, Jonathan Avila wrote:
> Given that links are not child presentation elements -- use of SVG inside of a link would either require an accessible name on the sSVG or marking the SVG as decorative such as via aria-hidden. Would people agree with that? That is SVG should be treated similar to the img element where you cannot simply leave it's purpose unspecified unless it is otherwise supposed to be excluded from the accessibility tree.
The <svg> element maps to the graphics-document role, so its purpose
isn't unspecified.
It's also worth drawing a distinction between the <svg> element and the
<img> element: the former may contain a single atomic image or consist
of multiple components; the latter is always a single atomic image.
One effect of this, is that browsers/screen readers don't try to find a
substitute accessible name for an <svg> element if one doesn't exist.
This is unlike the <img> element, where browsers/screen readers will use
something like the src attribute instead of an accessible name.
In the example discussed on this thread, the <svg> contains a single
atomic image (an icon). It could be given an accessible name directly,
in which case that would serve as the accessible name for its parent
link, or (because the icon is the only content of the link) the
accessible name could be set on the link itself. It makes no material
difference AFAIK.
Birkir is right that you can hide a decorative <svg> element from screen
readers by setting role="presentation" and (per the IE bug)
aria-hidden="true". In this case, where the <svg> element is the only
content of the link, I'm not sure that's the right choice though.
Probably the best thing to do with this particular case, is to treat the
.svg like a standard image format, and pull it into the HTML with the
<img> element (including a suitable alt attribute).
--
@LeonieWatson @ = EMAIL ADDRESS REMOVED = tink.uk Carpe diem
From: Birkir R. Gunnarsson
Date: Sun, Aug 06 2017 11:58AM
Subject: Re: using .svg images accessibly
← Previous message | Next message →
Great summary Leonie.
The only thing I would add is that I generally advice against
assigning an accessible name directly to the link (especially using
aria-label) if the link contains any text outside the image (because
that text will get overridden).
For instance
< a href="#" aria-label="Facebook">Like this article on <img
src="facebook.jpg"></a>
The accessible name of this link will be "Facebook", not "Like this
article on Facebook".
This particular example is probably not that realistic, but I have
often seen developer abuse aria-label, not realizing that it overrides
accessible name from content (primarily on links).
In this situation it is a perfectly valid technique, and it can always
be a valid technique if used correctly.
In this example, for instance, the aria-label should be "like this
article on FAcebook", that way it includes the text inside the link as
well as the alt text of the image.
Just use aria-label with care.
On 8/6/17, Léonie Watson < = EMAIL ADDRESS REMOVED = > wrote:
>
> On 04/08/2017 18:10, Jonathan Avila wrote:
>> Given that links are not child presentation elements -- use of SVG inside
>> of a link would either require an accessible name on the sSVG or marking
>> the SVG as decorative such as via aria-hidden. Would people agree with
>> that? That is SVG should be treated similar to the img element where you
>> cannot simply leave it's purpose unspecified unless it is otherwise
>> supposed to be excluded from the accessibility tree.
>
> The <svg> element maps to the graphics-document role, so its purpose
> isn't unspecified.
>
> It's also worth drawing a distinction between the <svg> element and the
> <img> element: the former may contain a single atomic image or consist
> of multiple components; the latter is always a single atomic image.
>
> One effect of this, is that browsers/screen readers don't try to find a
> substitute accessible name for an <svg> element if one doesn't exist.
> This is unlike the <img> element, where browsers/screen readers will use
> something like the src attribute instead of an accessible name.
>
> In the example discussed on this thread, the <svg> contains a single
> atomic image (an icon). It could be given an accessible name directly,
> in which case that would serve as the accessible name for its parent
> link, or (because the icon is the only content of the link) the
> accessible name could be set on the link itself. It makes no material
> difference AFAIK.
>
> Birkir is right that you can hide a decorative <svg> element from screen
> readers by setting role="presentation" and (per the IE bug)
> aria-hidden="true". In this case, where the <svg> element is the only
> content of the link, I'm not sure that's the right choice though.
>
> Probably the best thing to do with this particular case, is to treat the
> .svg like a standard image format, and pull it into the HTML with the
> <img> element (including a suitable alt attribute).
>
> --
> @LeonieWatson @ = EMAIL ADDRESS REMOVED = tink.uk Carpe diem
> > > > >
--
Work hard. Have fun. Make history.
From:
Subject: Re: using .svg images accessibly
← Previous message | Next message →
On 06/08/2017 18:58, Birkir R. Gunnarsson wrote:
> Great summary Leonie.
> The only thing I would add is that I generally advice against
> assigning an accessible name directly to the link (especially using
> aria-label) if the link contains any text outside the image (because
> that text will get overridden).
+1 Good advice.
--
@LeonieWatson @ = EMAIL ADDRESS REMOVED = tink.uk Carpe diem
From: Sandy Feldman
Date: Wed, Aug 09 2017 10:56AM
Subject: Re: using .svg images accessibly
← Previous message | Next message →
Léonie,
Thanks again for taking the time to help me work this through. I have a
new version of the page, modified as you suggested.
http://haltontrophies.com/svg/
This one actually validates using validator.w3.org! What do you think of
it? Is it actually working? Could it be better?
Each svg on this page has two titles. One is in the link, the other is
an ARIA label. I think that VoiceOver is just reading the one on the
link. I would like to take the other out, to reduce the redundancy in
the markup. Is that a good idea?
I did also try using svg images, but I couldn't find a good resource for
how to embed and style them. Any suggestions?
Thanks, all, for being out there to call on.
Sandy
On 2017-08-04 11:03 AM, Léonie Watson wrote:
> On 03/08/2017 16:20, Sandy Feldman wrote:
>> What do you think?
>> http://haltontrophies.com/svg/
>
> These links work with screen readers, but probably not for the reasons
> you think.
>
> The accessible name (link text) for the link is being provided by the
> title attribute on the <a> element, not the <title> element in the
> SVG. If you remove the title attribute the links stop working properly
> with some screen reader/browser combinations.
>
> The reason is that you're using the <use> element in the SVG, with all
> the accessibility applied to the original definition of the icon. When
> you use the <use> element to duplicate the original, the accessibility
> isn't reliably inherited.
>
> A related problem is that the title attribute can cause problems when
> it's used on links. More on this here:
> https://www.paciellogroup.com/blog/2013/01/using-the-html-title-attribute-updated/
>
>
> You have a number of options...
>
> 1. Use the aria-label attribute instead of the title attribute.
>
> This will provide an accessible name for the link that screen readers
> can access, without the problems caused by the title attribute for
> other AT users:
>
> <a href="..." aria-label="Find me on YouTube">
>
> 2. Use the <title> element inside the <use> element.
>
> You'd need to do this every time you used the icon. Something like this:
>
> <a class="youtube" href="https://www.youtube.com/".
> <svg class="socialIcon">
> <use aria-labelledby="youtube-title" xlink:href="#icon-youtube">
> <title id="youtube-title">Find me on YouTube</title>
> </use>
> </svg>
> </a>
>
> 3. Use an <img> element.
>
> The icons are just simple static images, so you could save each one in
> its own .svg file and use it like you would any other image format:
>
> <img src="youtube-icon.svg" alt="Find me on YouTube">
>
> You'll still get the flexibility/scalability of the SVG, but with the
> simple accessibility of the <img> element.
>
> HTH
> Léonie.
>
--
Sandy
sandyfeldman.com
sandyfeldman.tumblr.com/
ca.linkedin.com/in/sandyfeldman
inclusivemedia.ca
From: Jim Allan
Date: Wed, Aug 09 2017 11:52AM
Subject: Re: using .svg images accessibly
← Previous message | Next message →
jaws read both, it said...
facebook in the title in the title facebook on the link
the links list shows
Facebook on the link
NVDA read both, it said...
Facebook in the title in the title
graphic clickable
link Facebook on the link
The links list shows
Facebook in the title in the title
On Wed, Aug 9, 2017 at 11:56 AM, Sandy Feldman < = EMAIL ADDRESS REMOVED = >
wrote:
> Léonie,
>
> Thanks again for taking the time to help me work this through. I have a
> new version of the page, modified as you suggested.
>
> http://haltontrophies.com/svg/
>
> This one actually validates using validator.w3.org! What do you think of
> it? Is it actually working? Could it be better?
>
> Each svg on this page has two titles. One is in the link, the other is an
> ARIA label. I think that VoiceOver is just reading the one on the link. I
> would like to take the other out, to reduce the redundancy in the markup.
> Is that a good idea?
>
> I did also try using svg images, but I couldn't find a good resource for
> how to embed and style them. Any suggestions?
>
> Thanks, all, for being out there to call on.
>
> Sandy
>
>
>
>
>
> On 2017-08-04 11:03 AM, Léonie Watson wrote:
>
>> On 03/08/2017 16:20, Sandy Feldman wrote:
>>
>>> What do you think?
>>> http://haltontrophies.com/svg/
>>>
>>
>> These links work with screen readers, but probably not for the reasons
>> you think.
>>
>> The accessible name (link text) for the link is being provided by the
>> title attribute on the <a> element, not the <title> element in the SVG. If
>> you remove the title attribute the links stop working properly with some
>> screen reader/browser combinations.
>>
>> The reason is that you're using the <use> element in the SVG, with all
>> the accessibility applied to the original definition of the icon. When you
>> use the <use> element to duplicate the original, the accessibility isn't
>> reliably inherited.
>>
>> A related problem is that the title attribute can cause problems when
>> it's used on links. More on this here:
>> https://www.paciellogroup.com/blog/2013/01/using-the-html-ti
>> tle-attribute-updated/
>>
>> You have a number of options...
>>
>> 1. Use the aria-label attribute instead of the title attribute.
>>
>> This will provide an accessible name for the link that screen readers can
>> access, without the problems caused by the title attribute for other AT
>> users:
>>
>> <a href="..." aria-label="Find me on YouTube">
>>
>> 2. Use the <title> element inside the <use> element.
>>
>> You'd need to do this every time you used the icon. Something like this:
>>
>> <a class="youtube" href="https://www.youtube.com/".
>> <svg class="socialIcon">
>> <use aria-labelledby="youtube-title" xlink:href="#icon-youtube">
>> <title id="youtube-title">Find me on YouTube</title>
>> </use>
>> </svg>
>> </a>
>>
>> 3. Use an <img> element.
>>
>> The icons are just simple static images, so you could save each one in
>> its own .svg file and use it like you would any other image format:
>>
>> <img src="youtube-icon.svg" alt="Find me on YouTube">
>>
>> You'll still get the flexibility/scalability of the SVG, but with the
>> simple accessibility of the <img> element.
>>
>> HTH
>> Léonie.
>>
>>
> --
> Sandy
>
> sandyfeldman.com
> sandyfeldman.tumblr.com/
> ca.linkedin.com/in/sandyfeldman
> inclusivemedia.ca
>
> > > > >
--
Jim Allan, Accessibility Coordinator
Texas School for the Blind and Visually Impaired
1100 W. 45th St., Austin, Texas 78756
voice 512.206.9315 fax: 512.206.9452 http://www.tsbvi.edu/
"We shape our tools and thereafter our tools shape us." McLuhan, 1964
From: Sandy Feldman
Date: Wed, Aug 09 2017 12:19PM
Subject: Re: using .svg images accessibly
← Previous message | Next message →
OK, that's ridiculously wordy. One of them has to go.
Is there one that makes more sense to keep than the other? Maybe just
the one on the link, since that's what I'm hearing in VoiceOver?
Jim, thank you for taking the time to check this and write it up for me.
Sandy
On 2017-08-09 1:52 PM, Jim Allan wrote:
> jaws read both, it said...
> facebook in the title in the title facebook on the link
>
> the links list shows
> Facebook on the link
>
> NVDA read both, it said...
> Facebook in the title in the title
> graphic clickable
> link Facebook on the link
>
> The links list shows
> Facebook in the title in the title
>
>
>
>
>
> On Wed, Aug 9, 2017 at 11:56 AM, Sandy Feldman < = EMAIL ADDRESS REMOVED = >
> wrote:
>
>> Léonie,
>>
>> Thanks again for taking the time to help me work this through. I have a
>> new version of the page, modified as you suggested.
>>
>> http://haltontrophies.com/svg/
>>
>> This one actually validates using validator.w3.org! What do you think of
>> it? Is it actually working? Could it be better?
>>
>> Each svg on this page has two titles. One is in the link, the other is an
>> ARIA label. I think that VoiceOver is just reading the one on the link. I
>> would like to take the other out, to reduce the redundancy in the markup.
>> Is that a good idea?
>>
>> I did also try using svg images, but I couldn't find a good resource for
>> how to embed and style them. Any suggestions?
>>
>> Thanks, all, for being out there to call on.
>>
>> Sandy
>>
>>
>>
>>
>>
>> On 2017-08-04 11:03 AM, Léonie Watson wrote:
>>
>>> On 03/08/2017 16:20, Sandy Feldman wrote:
>>>
>>>> What do you think?
>>>> http://haltontrophies.com/svg/
>>>>
>>> These links work with screen readers, but probably not for the reasons
>>> you think.
>>>
>>> The accessible name (link text) for the link is being provided by the
>>> title attribute on the <a> element, not the <title> element in the SVG. If
>>> you remove the title attribute the links stop working properly with some
>>> screen reader/browser combinations.
>>>
>>> The reason is that you're using the <use> element in the SVG, with all
>>> the accessibility applied to the original definition of the icon. When you
>>> use the <use> element to duplicate the original, the accessibility isn't
>>> reliably inherited.
>>>
>>> A related problem is that the title attribute can cause problems when
>>> it's used on links. More on this here:
>>> https://www.paciellogroup.com/blog/2013/01/using-the-html-ti
>>> tle-attribute-updated/
>>>
>>> You have a number of options...
>>>
>>> 1. Use the aria-label attribute instead of the title attribute.
>>>
>>> This will provide an accessible name for the link that screen readers can
>>> access, without the problems caused by the title attribute for other AT
>>> users:
>>>
>>> <a href="..." aria-label="Find me on YouTube">
>>>
>>> 2. Use the <title> element inside the <use> element.
>>>
>>> You'd need to do this every time you used the icon. Something like this:
>>>
>>> <a class="youtube" href="https://www.youtube.com/".
>>> <svg class="socialIcon">
>>> <use aria-labelledby="youtube-title" xlink:href="#icon-youtube">
>>> <title id="youtube-title">Find me on YouTube</title>
>>> </use>
>>> </svg>
>>> </a>
>>>
>>> 3. Use an <img> element.
>>>
>>> The icons are just simple static images, so you could save each one in
>>> its own .svg file and use it like you would any other image format:
>>>
>>> <img src="youtube-icon.svg" alt="Find me on YouTube">
>>>
>>> You'll still get the flexibility/scalability of the SVG, but with the
>>> simple accessibility of the <img> element.
>>>
>>> HTH
>>> Léonie.
>>>
>>>
>> --
>> Sandy
>>
>> sandyfeldman.com
>> sandyfeldman.tumblr.com/
>> ca.linkedin.com/in/sandyfeldman
>> inclusivemedia.ca
>>
>> >> >> >> >>
>
>
From: Jim Allan
Date: Wed, Aug 09 2017 2:41PM
Subject: Re: using .svg images accessibly
← Previous message | Next message →
don't know if you noticed
Jaws speaks the link info
NVDA speaks the title
special
On Wed, Aug 9, 2017 at 1:19 PM, Sandy Feldman < = EMAIL ADDRESS REMOVED = >
wrote:
> OK, that's ridiculously wordy. One of them has to go.
>
> Is there one that makes more sense to keep than the other? Maybe just the
> one on the link, since that's what I'm hearing in VoiceOver?
>
> Jim, thank you for taking the time to check this and write it up for me.
>
> Sandy
>
> On 2017-08-09 1:52 PM, Jim Allan wrote:
>
> jaws read both, it said...
> facebook in the title in the title facebook on the link
>
> the links list shows
> Facebook on the link
>
> NVDA read both, it said...
> Facebook in the title in the title
> graphic clickable
> link Facebook on the link
>
> The links list shows
> Facebook in the title in the title
>
>
>
>
>
> On Wed, Aug 9, 2017 at 11:56 AM, Sandy Feldman < = EMAIL ADDRESS REMOVED = > < = EMAIL ADDRESS REMOVED = >
> wrote:
>
>
> Léonie,
>
> Thanks again for taking the time to help me work this through. I have a
> new version of the page, modified as you suggested.
> http://haltontrophies.com/svg/
>
> This one actually validates using validator.w3.org! What do you think of
> it? Is it actually working? Could it be better?
>
> Each svg on this page has two titles. One is in the link, the other is an
> ARIA label. I think that VoiceOver is just reading the one on the link. I
> would like to take the other out, to reduce the redundancy in the markup.
> Is that a good idea?
>
> I did also try using svg images, but I couldn't find a good resource for
> how to embed and style them. Any suggestions?
>
> Thanks, all, for being out there to call on.
>
> Sandy
>
>
>
>
>
> On 2017-08-04 11:03 AM, Léonie Watson wrote:
>
>
> On 03/08/2017 16:20, Sandy Feldman wrote:
>
>
> What do you think?http://haltontrophies.com/svg/
>
> These links work with screen readers, but probably not for the reasons
> you think.
>
> The accessible name (link text) for the link is being provided by the
> title attribute on the <a> element, not the <title> element in the SVG. If
> you remove the title attribute the links stop working properly with some
> screen reader/browser combinations.
>
> The reason is that you're using the <use> element in the SVG, with all
> the accessibility applied to the original definition of the icon. When you
> use the <use> element to duplicate the original, the accessibility isn't
> reliably inherited.
>
> A related problem is that the title attribute can cause problems when
> it's used on links. More on this here:https://www.paciellogroup.com/blog/2013/01/using-the-html-ti
> tle-attribute-updated/
>
> You have a number of options...
>
> 1. Use the aria-label attribute instead of the title attribute.
>
> This will provide an accessible name for the link that screen readers can
> access, without the problems caused by the title attribute for other AT
> users:
>
> <a href="..." aria-label="Find me on YouTube">
>
> 2. Use the <title> element inside the <use> element.
>
> You'd need to do this every time you used the icon. Something like this:
>
> <a class="youtube" href="https://www.youtube.com/" <https://www.youtube.com/>.
> <svg class="socialIcon">
> <use aria-labelledby="youtube-title" xlink:href="#icon-youtube">
> <title id="youtube-title">Find me on YouTube</title>
> </use>
> </svg>
> </a>
>
> 3. Use an <img> element.
>
> The icons are just simple static images, so you could save each one in
> its own .svg file and use it like you would any other image format:
>
> <img src="youtube-icon.svg" alt="Find me on YouTube">
>
> You'll still get the flexibility/scalability of the SVG, but with the
> simple accessibility of the <img> element.
>
> HTH
> Léonie.
>
>
>
> --
> Sandy
> sandyfeldman.comsandyfeldman.tumblr.com/ca.linkedin.com/in/sandyfeldmaninclusivemedia.ca
>
> > > > >
>
>
>
--
Jim Allan, Accessibility Coordinator
Texas School for the Blind and Visually Impaired
1100 W. 45th St., Austin, Texas 78756
voice 512.206.9315 fax: 512.206.9452 http://www.tsbvi.edu/
"We shape our tools and thereafter our tools shape us." McLuhan, 1964
From: Kelly Ford
Date: Thu, Aug 10 2017 6:59AM
Subject: Re: using .svg images accessibly
← Previous message | Next message →
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
From:
Subject: Re: using .svg images accessibly
← Previous message | Next message →
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
>
>
From: Sandy Feldman
Date: Fri, Aug 11 2017 9:02AM
Subject: Re: using .svg images accessibly
← Previous message | Next message →
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
>>
>>
From:
Subject: Re: using .svg images accessibly
← Previous message | No next message
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
>>>
>>>