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