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
Use semantic HTML
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
Further reading
Closed captioning resources
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
0:00
states that information and user interface components must be
0:04
presentable to users in ways they can perceive.
0:09
This principle is all about providing alternative methods of
0:13
understanding your web content.
0:17
If users can't see your content, for example, let them hear it.
0:19
This principle is broken into four guidelines.
0:25
First is a level A guideline stating that all non
0:29
text content should have a text alternative.
0:33
Hopefully, you're already familiar with the practice of adding
0:36
meaningful alt descriptions to your image tags.
0:41
Whenever you add an image to a webpage, ask yourself if someone couldn't
0:44
see this image, how could I best describe the content in the image?
0:50
I'm checking out Mozilla's recommendation on effective alternative descriptions.
0:55
Note that one word descriptions like "pancakes" are not as
1:01
useful as brief descriptions full of details,
1:05
like "stack of blueberry pancakes with powdered sugar".
1:09
Don't stuff your description full of search engine keywords.
1:13
And there's no need to include the phrase "image of"
1:18
since screen readers will announce, this is an image.
1:22
The second guideline, time based media, is about providing captions and transcripts,
1:27
to make audio and video content accessible to people who are deaf
1:34
or have hearing loss as well as users with auditory processing disorder.
1:40
Level A specifies that all prerecorded audio and video must have captions
1:45
such as the ones Treehouse makes available for our video content.
1:52
I've provided a number of links and resources in the teacher's notes for
1:57
adding subtitles and closed captions to time based media.
2:02
Users can toggle captions on any Treehouse video by
2:09
pressing the CC button in the lower right hand corner.
2:13
A few details we've considered in presenting
2:18
our own captions include sufficient color contrast.
2:22
A black background with white or yellow text and
2:26
no more than two lines of text at once is the recommended format for captions.
2:30
Also, our captions are draggable.
2:36
Sometimes captions cover an important bit of code or documentation onscreen.
2:40
So it's helpful to let users reposition them.
2:46
Finally, each Treehouse teacher is also responsible for
2:50
reviewing their captions for accuracy.
2:55
No automatic captioning service provides 100% accuracy.
2:58
So this review is vital to ensure the captions and transcripts include
3:03
correct information and match up with onscreen actions and speech.
3:08
If you spot an error in our captions,
3:13
don't hesitate to let us know in the Questions section.
3:16
To meet the level double A standard,
3:20
captions must be provided for live audio and video.
3:23
An external transcription service such as
3:27
rev.com could be used to help make live audio and video
3:29
accessible to viewers who are deaf or have hearing loss,
3:35
as well as users with auditory processing disorder.
3:40
The third guideline, adaptable,
3:46
states that content should be able to be presented in different ways–
3:48
for example, a simpler layout–without losing information or structure.
3:53
I'm looking at MDNs breakdown of the adaptable guideline,
4:00
which advises using your semantic HTML elements properly
4:04
to accurately markup page contents,
4:09
and presenting your HTML in a logical order
4:12
even if you're using CSS to rearrange the presentation.
4:16
I'm including in the teacher's notes two great resources that
4:22
discuss the importance of proper semantic markup in length.
4:27
One, an MDN article titled "HTML: a good basis for accessibility.",
4:32
says that one of the best accessibility aids a screen
4:39
reader user can have is an excellent content structure
4:44
with headings, paragraphs, lists, etc.
4:50
The other resource is two articles by Shay Howe that
4:54
discuss the proper use of semantic HTML elements,
4:59
including those that identify content sections such as the header,
5:03
footer, main, and article element.
5:03
The adaptable guideline also requires mobile designers and
5:16
developers to make sure content can be understood and
5:21
navigated in both portrait and landscape orientation.
5:25
Here are two screens from an athletic performance app called Garmin Connect.
5:30
A user unable to rotate their device from landscape to portrait
5:36
mode would have trouble using the Step Details screen,
5:41
while the walking screen does a good job of reorienting content.
5:45
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