Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Developers have a responsibility to ensure images on the web are accessible to all users. One way to accomplish this is using accessible tags and attributes that are recognized by screen readers and other assistive technologies.
Developers have a responsibility
to make sure that web content,
0:00
including images is accessible
to people with disabilities.
0:04
The text alternative guideline of
the WCAG or web content accessibility
0:07
guidelines requires developers to provide
content images with a text alternative.
0:12
This can be done using accessibility focused
tags and attributes within SVG elements.
0:20
In this video,
I'll teach you how to make your SVG
0:26
accessible to people
with visual disabilities.
0:29
The first step is determining
why the SVG is being used.
0:33
Three common uses of SVG
are decorating pages,
0:38
conveying information, and link icons.
0:42
First, we'll discuss the most simple case,
decorative SVG.
0:45
For decorative SVG,
we can use the aria-hidden attribute.
0:50
ARIA or accessible rich internet
applications is a set of
0:56
attributes that help to
improve accessibility.
1:00
Screen reader users don't benefit
from knowing about decorative images.
1:04
And the aria-hidden attribute hides
elements from assistive technology.
1:08
When an SVG serves no
purpose besides decoration,
1:14
we'll set the aria-hidden
attribute to true.
1:18
Next, let's look at conveying information.
1:21
With image tags, we can use the alt
attribute to provide text descriptions.
1:25
Unfortunately, SVG does not
recognize alt as a valid attribute.
1:31
Luckily, the title tag works as
a great alternative to add descriptive
1:36
text to a graphic and
it's recognized by screen readers.
1:41
The title tags should be the first
child of an SVG element and
1:45
it should also provide a brief
description of the image content.
1:49
We'll use the title tag
with the description tag.
1:53
The description tag is used for
a more detailed explanation of an image.
1:56
To make sure our SVG are read by
screen readers, there are two ARIA
2:01
attributes we want to include along
with the title and description tags.
2:05
The attributes we'll use
are aria-describedby and aria-labeledby.
2:10
Some screen readers
don't recognize SVG and
2:15
cannot describe the purpose of its
content to assistive technology users.
2:18
The labeledby and describedby attributes
work with the title and description tags
2:22
to make sure their information is still
presented to the reader if the title and
2:27
description tags are not read themselves.
2:31
A third use for SVG is using the graphics
as icons for menus and navigation.
2:36
We'll use the same tags we previously
used for conveying information,
2:42
title and description.
2:46
What changes here is how
we describe the elements.
2:48
If an SVG is wrapped in a link tag,
2:51
then we don't need to include
the phrase link in our description.
2:53
This can prevent screen readers from
repeating information unnecessarily.
2:58
Let's take a look at some of
these concepts in action.
3:03
In the starter files, we have an app
with the navigation menu consisting
3:06
of SVG icons, an SVG pie chart,
and a decorative banner SVG.
3:11
Let's start with
the navigation in nav.html.
3:15
For navigation links,
3:18
we want to make sure the user knows
the destination of each link.
3:20
Which pattern do you think would
work best for this navigation?
3:24
Pause the video and give it a try.
3:27
Because the SVG are wrapped in link tags,
3:31
we don't have to convey that
each item is a link in our text.
3:34
We do want the user to know
where the button's linked to, so
3:37
we'll give the notifications icon
a title tag with the text notifications.
3:41
We'll do the same with
the settings icon and
3:54
give it a title with the text settings.
3:56
Now, the screen reader should say
something like link to notifications and
4:03
link to settings when translating
these elements to a listener.
4:07
Remember, some screen readers
don't read title tags, so
4:11
we'll be extra safe by giving the links
an aria-labeledby attribute that
4:15
tells the browser the SVG's
are labeled by the title attribute.
4:19
We do that by matching the value of the
aria-labeledby to the id of the title tag.
4:23
Let's add an id with the value of
bell to the title tag on the SVG.
4:30
Now, set the aria-labeledby attribute
on the SVG to the same value.
4:41
If our title tag isn't read,
4:48
screen readers may instead read out
the title due to the labeledby attribute.
4:50
Now, try pausing the video and
adding title tags and
4:56
labeledby attributes to
the remaining icons.
5:00
Now, let's look at using SVG for
conveying information.
5:04
Imagine the pie chart in
this image is on a page and
5:08
contains statistics we don't
get elsewhere on the page.
5:11
We need a way to describe
the chart to screen readers.
5:14
For this, we'll use a description tag.
5:18
Let's take a look in our text editor.
5:21
We'll add a title tag with the text,
Pizza Survey Pie Chart.
5:23
Next, we'll add a description tag.
5:35
And we'll give that description tag
the text 60% of people surveyed
5:40
believe pineapples belong
on pizza while 40% do not.
5:45
Then because some screen readers don't
recognize these tags, we can back
5:48
them up by referencing them with
the describedby and labeledby attributes.
5:53
Similar to the previous example,
we can do this by setting those
5:59
attributes equal to the id
of the tags they reference.
6:03
Finally, let's open banner.html.
6:39
The banner items only purpose
on the page is decoration.
6:42
It's better if we don't present
unneeded additional info to the user.
6:47
We can set the aria-hidden
attribute on this SVG to true so
6:52
it won't be read by screen readers.
6:56
There you have it.
7:05
You're already on your way to
writing more accessible SVG files.
7:07
Check out the links in the teacher's notes
to learn more about accessibility and
7:12
writing alternative text
7:15
You need to sign up for Treehouse in order to download course files.
Sign up