"npm Basics (retiring)" was retired on April 9, 2022. You are now viewing the recommended replacement.
Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Accessibility for UX Designers!
You have completed Accessibility for UX Designers!
Preview
The fourth and final WCAG principle, Robust, states that “Content must be robust enough that it can be interpreted by a wide variety of user agents, including assistive technologies.” But what does that really mean?
WCAG Robust Principle
- Write valid HTML
- Use semantic markup
- Changes in content status
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 fourth and final WCAG principle,
Robust, states that content must be
0:00
robust enough that it can be interpreted
by a wide variety of user agents,
0:05
including assistive technologies.
0:10
But what does that really mean?
0:13
The robust guideline asks
developers to write valid HTML,
0:19
and use correct semantic markup.
0:24
Since this course is aimed at designers
0:28
we're not going to cover how
to write valid semantic HTML,
0:31
although I've included an article on
the topic in the teacher's notes.
0:35
But should you find yourself conducting
an accessibility audit of an existing
0:39
website, it's helpful to know a few
resources to assess markup validity.
0:45
An HTML validator such as
html5.validator.nu will look for
0:50
errors in HTML elements,
such as missing closing tags or
0:57
quotation marks, or
even misused semantic elements.
1:03
I'll paste the URL of
the WCAG 2.1 guidelines
1:08
into the validator and
good news, it's valid HTML.
1:14
I'll also try validating one
of my local files in which
1:21
I've included a few mistakes,
1:25
and we can see the line number and
description of each error.
1:35
Google Lighthouse is built
into Chrome's dev tools and
1:41
runs several audits on a web page,
including accessibility, loading speed,
1:46
and search engine optimization for
either the desktop or mobile view.
1:52
I've loaded the current desktop
version of the Domino's Pizza website,
1:58
and I'll right-click and choose Inspect,
then find the audits tab.
2:05
I'll make sure I've selected Desktop and
press Generate Report.
2:11
It looks like Domino's Pizza has improved
its accessibility score since the lawsuit.
2:18
Where there are issues,
Lighthouse explains the problem and
2:25
highlights the code
that needs improvement.
2:30
The most recent addition
to the Robust principle,
2:34
status messages, pertains to
dynamic web apps that use
2:39
JavaScript to add new content
without refreshing the page.
2:43
If I'm looking at a social
media feed that uses JavaScript
2:48
to display new posts
without a browser refresh,
2:53
screen readers should be alerted to
the existence of the updated content.
2:57
Let's watch a demo of NVDA,
a screen reader for Windows machines,
3:03
reacting to a warning message appearing
dynamically beside a web form.
3:09
SCREEN READER: Status message example heading
level one status message example.
3:16
Heading level two product review.
3:20
We appreciated your product review and
value your opinions.
3:21
However, comments with inappropriate
language will be removed. Blank.
3:24
Comments 300 characters or less.
3:29
Edit multi line, enter product comment.
3:34
Warning, you will be logged out in five
minutes if there is no further activity.
3:38
Select Add more time if needed.
3:41
ANWAR: You can see that the warning message
was initially not present on the page and
3:44
was added dynamically once
the user began typing.
3:50
That is a status message.
3:54
You made it!
3:56
We've covered every
principle in version 2.1
3:58
of the Web Content
Accessibility Guidelines.
4:02
Now that we've reviewed the guidelines,
in the final video of the stage,
4:07
we'll learn to work accessibility
considerations into our design process.
4:11
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