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: Operable

9:48 with Anwar Montasir

People with disabilities must be able to Operate your web content. The Operable principle is all about removing barriers between your user and your content.

People with disabilities must be able to operate your web content. 0:00
The Operable principle is all about removing barriers between your user and 0:05
your content. 0:10
Many users rely solely on a keyboard to navigate the web, 0:15
either due to a temporary or situational disability or 0:21
a permanent disability related to vision or motor skills. 0:26
The first Operable criteria requires testing that all 0:36
interactive elements are accessible using the tab key. 0:40
Keyboard users need to be able to exit each interface element as well, 0:46
avoiding what's known as a keyboard trap. 0:51
In this example, I can use the tab key to select the next 0:55
interface element or shift-tab to return to the previous one. 0:59
A blue focus indicator shows me which element is currently selected. 1:06
However, once I enter the form input labeled Last 4 digits of your Tax ID, 1:12
I'm stuck, unable to move forwards or backwards. 1:19
That's a keyboard trap and is extremely frustrating for keyboard-only users. 1:24
Providing keyboard shortcuts is a great way to help your keyboard-only audience, 1:31
as long as you make the shortcuts easy to learn and the documentation easy to find. 1:37
I'm reviewing a document called Mac accessibility shortcuts 1:44
with a list of shortcuts for activating common accessibility features 1:49
such as the VoiceOver screen reader as well as instructions on using 1:54
your keyboard like a mouse to navigate and interact with items on screen. 1:59
Designers should ensure focus indicators, 2:08
which highlight the currently selected element, are visually obvious. 2:11
The indicators must remain visible and 2:18
obvious no matter what element is selected, whether main menus or 2:21
sub-navigations, form fields or drop-down menus. 2:26
Trying to navigate a site that lacks focus indicators using a keyboard 2:32
is like operating a mouse with no visible cursor. 2:37
You'd never know what you're clicking. 2:40
It's worth noting that designing accessible interfaces 2:44
often requires combining a number of WCAG criteria. 2:48
For example, here's a screen capture of the macOS 2:53
Accessibility Options menu in both light and dark modes. 2:56
However, in dark mode, the contrast ratio between the focus indicator and 3:02
the background doesn't come close to the minimum standard. 3:07
Keyboard-only users are forced to either guess which option is selected or 3:12
switch to light mode. 3:17
The second guideline of the operable principle, Enough Time, 3:22
states that when completing a task such as booking a flight has a time limit, 3:26
users should be able to adjust or disable the time limit if they need extra time. 3:32
WCAG makes an exception for 3:39
when the time limit is an essential part of how the content is experienced. 3:40
For example, if an eBay auction has lasted a week and 3:45
is set to expire in an hour, that's essential to how eBay works. 3:49
But if a user wins an auction and needs extra time to fill out 3:55
a form full of purchasing details, the WCAG requires eBay 4:00
to make extending or disabling the time limit easy for users. 4:05
Users should also have the option to disable distracting content. 4:11
For some Slack users, 4:18
a message like this one with an animated GIF might make concentration difficult. 4:19
Fortunately, the Slack app allows users to disable animated GIFs and emojis. 4:25
Under the main Slack menu, 4:32
I'll choose Preferences, then click the Accessibility menu. 4:34
Slack gives me options to increase font size and 4:40
to adjust keyboard navigation features. 4:44
And here's the option to block animated images and emojis. 4:47
Now I can see the image is no longer moving. 4:53
I've included a link to an article on Slack's accessibility features in 4:57
the teacher's notes. 5:02
The third operable guideline is called Seizures and Physical Reactions and states 5:06
that animation should never flash more than three times in any one-second period. 5:12
To learn more about providing safe visuals, 5:19
I've included a link in the teacher's notes to an article by 5:22
the Epilepsy Foundation called Photosensitivity and Seizures. 5:26
The fourth guideline, Navigable, states that users should be 5:33
able to navigate, find content, and determine where they are. 5:38
Designers should understand the importance of using descriptive, 5:45
easily identifiable headings to organize content. 5:49
For example, I'm looking at an article from Smashing Magazine called 5:54
I Used The Web For A Day Using A Screen Reader. 5:58
As a visual reader, I can scan my eye over the content headings, 6:02
such as What Is A Screen Reader and How To Enable And Use Your Screen reader, 6:07
followed by subheadings, like VoiceOver On Desktop and 6:16
VoiceOver on Mobile. 6:21
This lets me quickly decide whether the content below the heading is relevant. 6:25
Screen readers function in a similar way. 6:32
Users can navigate using headings and 6:35
skip to a desired heading to begin reading at that point. 6:38
The Navigable guideline also specifies that the purpose of a link 6:44
should be clear from the link text alone. 6:49
Here are two different links to the same content. 6:53
However, in the first example, the clickable text reads "click here", 6:57
which gives no clue to what the user will find after clicking the link. 7:03
This is poor SEO practice, as search engines value descriptive text links. 7:08
But this could also frustrate users of screen readers 7:15
who are able to tab directly to hyperlinks without reading the full sentence. 7:18
In the second example, the sentence has the same meaning, but 7:25
the clickable text reads "basketball videos". 7:29
Now the user knows what to expect. 7:32
The final Operable guideline is called Input Modalities and 7:37
covers interaction beyond the keyboard. 7:42
I'm looking at a resource called the Touch Gesture Reference Guide. 7:46
The movements diagrammed here are familiar to many users of touch screen devices. 7:51
Because users of assistive technologies might not be capable of such 7:58
complex interactions, the Input Modalities guideline 8:03
suggests making alternative navigation available 8:08
that can be activated by a simple tap, click, or physical gesture. 8:11
In addition, the Input Modalities guideline states that interface 8:20
elements should be a minimum of 44 square pixels in size. 8:25
You'll notice this is a AAA guideline, but I think it's a pretty critical one. 8:31
As illustrated by Apple's UI Design Dos and Don'ts, buttons that are too small or 8:37
placed too close together are difficult to accurately tap with a finger. 8:44
Unfortunately, Apple didn't follow its own recommendations 8:50
when creating the macOS interface. 8:54
The red, yellow, and green circles in the upper-left 8:57
corner of each application window to close, minimize, 9:03
and maximize are only about 16 pixels in size. 9:08
Tests have shown that users with disabilities relating to motor skills 9:14
have struggled to click these buttons with a mouse. 9:19
The WCAG recommendation for more generous target sizes 9:22
would have made MacOS windows more accessible. 9:27
So keep those guidelines handy to ensure the interfaces you design 9:31
can be operated by users with disabilities. 9:36
Up next, we'll examine the letter U in POUR, 9:41
making our Web content Understandable. 9:45