Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Accessibility for UX Designers

Well done!

You have completed Accessibility for UX Designers!

Sign up for Treehouse Back to Library
Preview
Video Player
00:00
00:00
00:00
  1. 2x 2x
  2. 1.75x 1.75x
  3. 1.5x 1.5x
  4. 1.25x 1.25x
  5. 1.1x 1.1x
  6. 1x 1x
  7. 0.75x 0.75x
  8. 0.5x 0.5x
Use Up/Down Arrow keys to increase or decrease volume.

WCAG Principles: Robust

4:17 with Anwar Montasir

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?

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