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 Web Developers

Well done!

You have completed Accessibility For Web Developers!

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 (part 2)

5:21 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.

Developers also need to provide every page with a descriptive title. 0:02
The page title, of course, appears in the tab above the browser. 0:07
Since assistive technology users often read the title to decide whether page 0:13
contents are worth navigating, make sure the page title is useful. 0:18
For example, on Treehouse's site, 0:24
the page title does remind the user they're visiting Treehouse. 0:26
But the title updates depending on whether I'm on the Tech Degree page, 0:31
or the Tracks page, or viewing an individual course. 0:38
The Navigable guideline also specifies that the purpose 0:43
of a link should be clear from the link text alone. 0:47
Here are two different links to the same content. 0:53
However, in the first example, the clickable text reads "click here", 0:58
which gives no clue to what the user will find after clicking the link. 1:04
This is poor SEO practice as search engines value descriptive 1:09
text links, but this could also frustrate users of screen readers 1:14
who are able to tab directly to hyperlinks 1:19
without reading the full sentence. 1:22
In the second example, the sentence has the same meaning, but 1:26
the clickable text reads "basketball videos". 1:30
Now the user knows what to expect. 1:34
Developers should be careful to present headings to reflect 1:38
hierarchy of information 1:42
and make sure each heading describes the content that follows. 1:44
I'm using the browser inspector to check out Wikipedia's article on accessibility. 1:48
The h1 element is reserved for the name of the article. 1:56
From there, Wikipedia is careful to make their heading 1:59
structure follow what's outlined in the table of contents. 2:04
So the h2 element describes each section of content: legislation, 2:09
assistive technology and adaptive technology, employment, and so on. 2:15
Since employment contains two subsections, 2:24
two subheads are provided using the h3 element. 2:28
As a visual reader, I can scan my eye over content headings 2:36
and quickly decide whether the content is relevant. 2:40
Screen readers function in a similar way. 2:46
Users can navigate using headings and 2:49
skip to a desired heading to begin reading at that point. 2:52
The Navigable guideline similarly asks developers to use form 2:58
labels meaningfully, but we'll examine this further in stage two of this course. 3:03
The final Operable guideline is called Input Modalities 3:10
and covers interaction beyond the keyboard. 3:15
I'm looking at a resource called the Touch Gesture Reference Guide. 3:20
The movements diagrammed here are familiar to many users of touchscreen devices. 3:25
Because users of assistive technologies might not be capable 3:30
of such complex interactions, the Input Modalities guideline 3:36
suggests making alternative navigation available that can 3:41
be activated by a simple tap, click or physical gesture. 3:46
In addition, the Input Modalities guideline states that interface 3:54
elements should be a minimum of 44 square pixels in size. 3:59
You'll notice this is a triple A guideline, but 4:04
I think it's a pretty critical one. 4:07
As illustrated by Apple's UI Design Dos and Don'ts, buttons that are too small or 4:11
placed too close together are difficult to accurately tap with a finger. 4:18
Unfortunately, Apple didn't follow its own recommendations when 4:23
creating the Mac OS interface. 4:28
The red, yellow, and green circles in the upper 4:29
left corner of each application window to close, 4:35
minimize, and maximize are only about 16 pixels in size. 4:40
Tests have shown that users with disabilities relating to motor skills 4:47
have struggled to click these buttons with a mouse. 4:51
The WCAG recommendation for more generous target sizes 4:55
would have made Mac OS windows more accessible. 5:00
So keep those guidelines handy to ensure the interfaces you 5:04
create can be operated by users with disabilities. 5:08
Up next we'll examine the letter U in pour, 5:14
making our web content Understandable. 5:18