WEBVTT

1
00:00:00.600 --> 00:00:01.806
Tester: Hi, I'm the tester.

2
00:00:01.806 --> 00:00:07.074
Tester: I'll use VoiceOver, the screen reader built into the Mac, and tell you what I hear.

3
00:00:07.476 --> 00:00:08.797
Reviewer: And I'm the reviewer.

4
00:00:08.797 --> 00:00:13.388
Reviewer: When something sounds wrong, I'll name the WCAG criterion it falls under,

5
00:00:13.388 --> 00:00:17.602
Reviewer: say why it matters, and explain what changed in the code to fix it.

6
00:00:18.002 --> 00:00:21.444
Reviewer: This video is about WCAG 2.4.4, Link Purpose.

7
00:00:21.444 --> 00:00:25.421
Reviewer: A link should say where it goes, from its own words,

8
00:00:25.421 --> 00:00:28.252
Reviewer: or from the text the code ties to it.

9
00:00:28.653 --> 00:00:32.687
Tester: Here's a page of the latest stories, in Safari, with VoiceOver on.

10
00:00:32.687 --> 00:00:37.149
Tester: There are three stories, and each one ends in a link that says Read more.

11
00:00:37.149 --> 00:00:41.673
Tester: Screen reader users often jump from link to link to see where they can go,

12
00:00:41.673 --> 00:00:43.078
Tester: so that's what I'll do.

13
00:00:46.953 --> 00:00:49.142
VoiceOver: Read more link

14
00:00:49.142 --> 00:00:54.491
VoiceOver: Read more link

15
00:00:54.491 --> 00:00:56.421
VoiceOver: Read more link

16
00:00:56.421 --> 00:01:01.093
Tester: Three links, and VoiceOver said the same thing each time: Read more, link.

17
00:01:01.093 --> 00:01:03.871
Tester: Nothing tells me which story each one opens.

18
00:01:04.272 --> 00:01:06.479
Reviewer: That's a problem under WCAG 2.4.4.

19
00:01:06.479 --> 00:01:10.635
Reviewer: The story titles are styled text, and each link sits on its own,

20
00:01:10.635 --> 00:01:13.752
Reviewer: so nothing in the code ties a link to its story.

21
00:01:13.752 --> 00:01:18.622
Reviewer: If you're listening, you'd have to open each one to find out where it goes.

22
00:01:21.222 --> 00:01:24.178
Reviewer: In the code, each link still shows Read more,

23
00:01:24.178 --> 00:01:27.988
Reviewer: and hidden text adds the story's title for screen readers.

24
00:01:27.988 --> 00:01:29.697
Reviewer: It looks exactly the same.

25
00:01:30.099 --> 00:01:32.749
Tester: The same three jumps, on the fixed page.

26
00:01:36.522 --> 00:01:39.622
VoiceOver: Read more about a new bridge opens downtown link

27
00:01:39.622 --> 00:01:42.884
VoiceOver: Read more about library hours are getting longer link

28
00:01:42.884 --> 00:01:45.890
VoiceOver: Read more about the farmers market moves indoors link

29
00:01:45.890 --> 00:01:51.740
Tester: Now each link names its story: a new bridge, library hours, and the farmers market.

30
00:01:52.142 --> 00:01:56.367
Reviewer: Each link says where it goes. 2.4.4 holds here.