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
The WCAG principle called Perceivable states that information and user interface components must be presentable to users in ways they can perceive. This principle is all about providing alternative methods of understanding your web content. If users can’t see your content, for example, let them hear it.
WCAG Perceivable Principle
- Text alternatives
- Captions and transcripts
- Portrait and landscape orientation
- Sufficient color contrast
- Combine multiple visual cues, not just color
- Avoid autostarting audio or video
- Responsive body copy
- Legible at 200% zoom
Closed captioning resources
Further reading
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
The WCAG principle called Perceivable
states that information and user
0:00
interface components must be presentable
to users in ways they can perceive.
0:06
This principle is all about
providing alternative methods
0:13
of understanding your web content.
0:17
If users can't see your content,
for example, let them hear it.
0:20
This principle is
broken into four guidelines.
0:25
The first guideline
states that the development team
0:30
should ensure all non-text
content has a text alternative.
0:33
As a designer, you likely won't be
tasked with providing text alternatives
0:40
to non-text elements, which most often
means providing alt descriptions so
0:45
users of screen readers
can understand web images.
0:51
But understanding this Level A guideline
means you'll be able to advocate for
0:56
its importance when communicating
with your development team and
1:01
spot issues during
an accessibility review.
1:05
I'm checking out Mozilla's recommendation
on effective alternative descriptions.
1:09
Note that one word descriptions like
"pancakes" are not as useful as brief
1:15
descriptions full of details like "Stack of
blueberry pancakes with powdered sugar".
1:20
Don't stuff your description
full of search engine keywords.
1:28
And there's no need to include the phrase
"image of",
1:31
since screen readers will
announce this is an image.
1:35
The second guideline, Time-based
Media, is about providing captions and
1:40
transcripts to make audio and
video content accessible to people who
1:46
are deaf or have hearing loss, as well as
users with auditory processing disorder.
1:51
Level A specifies that all prerecorded
audio and video must have captions,
1:59
such as the ones Treehouse makes
available for our video content.
2:05
I've provided a number of links and
resources in the Teacher's Notes for
2:11
adding subtitles and
closed captions to Time-based Media.
2:15
Users can toggle captions
on any Treehouse video
2:22
by pressing the CC button in
the lower right-hand corner.
2:25
A few details we've considered
in presenting our own captions
2:32
include sufficient color contrast.
2:36
A black background with white or
yellow text
2:40
and no more than two lines of text at once
is the recommended format for captions.
2:43
Also, our captions are draggable.
2:50
Sometimes captions cover
an important bit of code or
2:53
documentation on screen, so
it's helpful to let users reposition them.
2:57
Finally, each Treehouse teacher
is also responsible for
3:03
reviewing their captions for accuracy.
3:07
No automatic captioning service
provides 100% accuracy.
3:11
So this review is vital to ensure
the captions and transcripts
3:16
include correct information and match
up with on-screen actions and speech.
3:21
If you spot an error in our captions,
3:27
don't hesitate to let us know
in the questions section.
3:29
To meet the Level AA standard, captions
must be provided for live audio and video.
3:33
An external transcription service
such as Rev.com could be used to
3:41
help make live audio and video
accessible to viewers who are deaf or
3:46
have hearing loss, as well as users
with auditory processing disorder.
3:51
The third guideline, Adaptable,
states that content should be able to
3:59
be presented in different ways–
4:04
for example, a simpler layout–without
losing information or structure.
4:06
While this guideline mostly pertains
to developers using semantic HTML
4:13
meaningfully, mobile designers need to
make sure content can be understood and
4:18
navigated in both portrait and
landscape orientation.
4:24
Here are two screens from an athletic
performance app called Garmin Connect.
4:30
A user unable to rotate their device
from landscape to portrait mode
4:36
would have trouble using
the step details screen.
4:42
While the walking screen does
a good job of reorienting content.
4:46
The fourth guideline,
Distinguishable, describes making
4:52
foreground content distinguishable
against its background.
4:56
We covered accessible color
contrast in our previous video.
5:02
In addition, it's critical
that designers combine multiple
5:07
visual cues to convey information
rather than relying only on color.
5:12
It's been estimated that 6% of males
struggle to distinguish red from green.
5:19
Fields containing errors can be impossible
to identify for users with red-green
5:26
color blindness when a web form uses only
red and green highlights as indicators.
5:33
The addition of error messaging and
5:39
iconography makes the form accessible for
colorblind users by making
5:42
them aware there is an issue
that needs to be corrected.
5:47
The Distinguishable criteria
has one very important recommendation
5:53
that pertains to both audio and
videos that contain sound.
5:58
Avoid using auto-start
as much as possible.
6:02
Audio that starts automatically interferes
with screen reader performance.
6:07
Also, any sound three seconds or
longer should come with a mechanism for
6:13
pausing the sound or lowering the volume.
6:17
As for the visual presentation
of text, the AAA requirements
6:22
offer pretty solid design recommendations
for responsive body copy.
6:27
Keep your text a maximum
of 80 characters per line.
6:34
Don't justify body copy.
6:38
And provide sufficient line height,
6:41
at least 1.5 times the text
size within paragraphs, and
6:44
at least 2.25 times the text size to
create space separating paragraphs.
6:49
AA requirements under
Distinguishable called Resize Text
6:57
and Reflow also have to do
with responsive body copy.
7:03
Your user shouldn't have to
scroll horizontally to read your text or
7:08
struggle to use your navigation
even when zoomed in at 200%.
7:14
I'm looking at an article by
the Bureau of Internet Accessibility,
7:22
which recommends zooming in
on a web layout to 200%, and
7:26
checking to see if the content is still
legible without horizontal scrolling,
7:31
and that the navigation
remains functional.
7:36
I'm testing this out by
pressing Command + to zoom in.
7:40
And sure enough,
the text still reads well at 200%.
7:46
The navigation no longer fits but
7:52
it looks like it switches to a mobile
version featuring a drop-down menu.
7:55
You've probably noticed that
many of these criteria involve
8:03
coordination between the design and
development team.
8:07
But then accessibility should never
be just one person's responsibility.
8:11
Everyone on your project team should be
aware of accessibility needs to ensure
8:17
those needs are considered at every
stage no matter what the end product.
8:22
Coming up, we'll take a look at the letter O
in POUR: making our web content Operable.
8:28
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up