Accessibility

[00:00:00]
>> Sarah Drasner: Accessibility, let's talk about accessibility for just a second. There are a couple of things you need to do. And this is like when I said, we're going to just show you the really basic thing that you should be doing for pretty much all of your SVGs. And if you want to make it more complicated you can also do that.

[00:00:18]
Okay, so we've got aria-labelledby="title" and then the first element beneath encased inside that SVG has to be the title. You can't put something else in there first, like defs maybe or something like that, it has to be the title. The title ID, in this case, is title, which I should've just changed it to something else, I could say dancing tango monkey pants, dancing tango monkey pants.

[00:00:42]
These have to be the same association and only one per page too. So we have ID, we have a role, which is presentation, we can also say role image. The reason why you have the role on there is because you're trying to tell the screen reader don't read out everything in the SVG DOM.

[00:01:00]
So you can imagine if you were using a screen reader to navigate a website how having it read it has the possibility for all of these great accessibility things. Because it has a [INAUDIBLE]. But you also don't want it to read every shape [LAUGH] to someone with a screen reader either, that doesn't sound great.

[00:01:17]
So making sure it has role presentation or role image is really important. Then within the title we have to have the title in the ID, actually Jaws won't pick it up without that. So if you leave the ID off you're, basically, not even including a title, unfortunately. I also include the language because then if they are using the screen reader in another language it will automatically change the language for them.

[00:01:42]
That will be done for them, they don't have to go look up the translation. So you can just have a bit of text there that describes what's going on in that image. If you want it to traverse and do crazy things, you could also say aria labeled by group, and then it will go through, and find the groups, and kind of do it that way.

[00:02:03]
This one is the one that you should be using for most things though. There's a resource here with support charts. In this article by Heather, she did this great kind of community service by making this article. She went to the library every weekend and tested all of these SVGs, like embeds, and images, and inline, and data visualization, and all these different things, on every device there.

[00:02:31]
Just out of the goodness of her heart. So definitely take advantage of this resource cuz she put so much work into it and it's a really, really great resource. So if you wanna learn more about SVG accessibility that's definitely the place to go.