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
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.
WCAG Operable Principle
Keyboard navigation
Obvious focus indicators
Allow enough time
Disable distracting content
Careful with flashing animations
Help users navigate
Descriptive page
<title>Make the link's purpose clear
Semantic heading structure
Provide alternatives to complex interactions
Generous target sizes
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
People with disabilities must be able to operate your web content.
0:00
The Operable principle is all about removing barriers
0:05
between your user and your content.
0:09
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 interactive
0:36
elements are accessible using the Tab key.
0:41
Keyboard users need to be able to exit each interface element as well,
0:45
avoiding what's known as a keyboard trap.
0:51
In this example, I can use the Tab key to select the next interface element.
0:55
Or shift-tab to return to the previous one.
1:01
A blue focus indicator shows me which element is currently selected.
1:06
However, once I enter the form input labeled
1:12
last 4 digits of your Tax ID, I'm stuck,
1:16
unable to move forwards or backwards.
1:21
Keyboard traps like this create a frustrating online experience for
1:25
keyboard-only users.
1:31
We'll be building an accessible HTML form in an upcoming video,
1:33
and let's be sure to test how well it can be navigated using only a keyboard.
1:38
Focus indicators,
1:45
which highlight the currently selected element, must be visually obvious.
1:46
The indicators must remain visible and
1:52
obvious no matter what element is selected,
1:55
whether main menus or subnavigations, form fields or dropdown menus.
1:58
Trying to navigate a site that lacks focus indicators using a keyboard is like
2:06
operating a mouse with no visible cursor. You'd never know what you're clicking.
2:11
In addition to keeping the focus indicators obvious, test to make sure
2:17
your components receive focus in a logical order when tabbing through the page.
2:22
If you've kept your HTML semantic and kept your content
2:29
in a logical order, you should be in good shape here.
2:33
The second guideline of the operable principle, Enough Time,
2:39
states that when completing a task (such as booking a flight) has a time limit,
2:44
users should be able to adjust or disable the time limit if they need extra time.
2:49
WCAG makes an exception for
2:55
when the time limit is an essential part of how the content is experienced.
2:58
For example, if an eBay auction has lasted a week and
3:03
is set to expire in an hour, that's essential to how eBay works.
3:06
But if a user wins an auction and
3:12
needs extra time to fill out a form full of purchasing details,
3:15
the WCAG requires eBay to make extending or
3:20
disabling the time limit easy for users.
3:24
Users should also have the option to disable distracting content.
3:29
For some Slack users,
3:35
a message like this one with an animated GIF might make concentration difficult.
3:36
Fortunately, the Slack app allows users to disable animated GIFs and emojis.
3:42
Under the main Slack menu,
3:49
I'll choose Preferences, then click the Accessibility menu.
3:51
Slack gives me options to increase font size and
3:57
to adjust keyboard navigation features.
4:01
And here's the option to block animated images and emojis.
4:04
Now I can see the image is no longer moving.
4:10
I've included a link to an article on Slack's accessibility features in
4:14
the Teacher's Notes.
4:19
The third Operable guideline is called Seizures and
4:23
Physical Reactions, and states that animations should never flash
4:27
more than three times in any one second period.
4:32
To learn more about providing safe visuals,
4:36
I've included a link in the Teacher's Notes to an article by
4:39
the Epilepsy Foundation called Photosensitivity and Seizures.
4:43
The fourth guideline, Navigable, states that users should be able to navigate,
4:50
find content, and determine where they are.
4:56
One guideline worth closely examining is called Bypass Blocks,
5:01
which states that a mechanism should be available to skip blocks of content
5:07
that are repeated on multiple web pages.
5:12
It's common, for example, for e-commerce sites to begin with a lengthy navigation.
5:16
I'm looking at Cost Plus World Market.
5:22
And in addition to main product categories–furniture, outdoor,
5:25
rugs, and more–each category has a long list of subcategories.
5:30
Imagine using a screen reader to shop from the site or
5:37
navigating only with a keyboard.
5:41
If you're unable to skip the navigation and
5:44
jump straight to product descriptions, shopping here becomes almost impossible.
5:47
Solving this problem used to require an invisible skip content link.
5:54
That is, a link to the main content that's hidden in the CSS.
6:00
But I'm checking the MDN reference on Bypass Blocks,
6:05
and it states "if a proper structure of headings and
6:09
semantic containers is provided to navigate with, for
6:14
example, the section element, the aside element, etc.
6:18
then an added skip link is not needed."
6:23
So the lesson here, once again, for developers,
6:27
is that coding with accessibility in mind starts with proper semantic markup.
6:31
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