WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: using .svg images accessibly

for

From: Date: Aug 3, 2017 8:54AM

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 REMOVED> tink.uk Carpe diem