WEBVTT

1
00:00:00.080 --> 00:00:04.090
This is a demonstration from the WWDC

2
00:00:04.110 --> 00:00:08.110
presentation from 2009. It's linked at the bottom of the blog post.

3
00:00:08.130 --> 00:00:12.150
For the purposes of this demonstration,

4
00:00:12.170 --> 00:00:16.170
I have one setting changed under Advanced Preferences. I have selected

5
00:00:16.190 --> 00:00:20.220
"Press Tab to highlight each item on a webpage."

6
00:00:20.240 --> 00:00:24.240
I'm going to Tab into the page, through all of the toolbar buttons.

7
00:00:24.260 --> 00:00:28.300
If you want to find out more about that, view the

8
00:00:28.320 --> 00:00:32.320
full WWDC presentation at the end of the [post].

9
00:00:32.340 --> 00:00:36.380
Now that I've tabbed into my listbox (Item 1, Item 2, Item 3, etc.)

10
00:00:36.400 --> 00:00:40.440
I want this to behave more like a standard

11
00:00:40.460 --> 00:00:44.470
native table view control. So I tab in once, and then I hit the arrow keys

12
00:00:44.490 --> 00:00:48.500
up and down to change the selection, then I tab out again to move

13
00:00:48.520 --> 00:00:52.530
outside the listbox. Likewise, I can Shift+Tab to go back in.

14
00:00:52.550 --> 00:00:56.550
Shift+Tab to go before it, but once inside I use

15
00:00:56.570 --> 00:01:00.590
the arrow keys to manipulate its value.

16
00:01:00.610 --> 00:01:04.630
Let's look in the Web Inspector. Strictly speaking, this isn't an ARIA technique.

17
00:01:04.650 --> 00:01:08.670
It's a standard HTML technique called "roaming tabindex" or "roving tabindex"

18
00:01:08.690 --> 00:01:12.720
if you want to search for it on the Internet.

19
00:01:12.740 --> 00:01:16.760
The concept is that, in any "managed focus" container such as this listbox,

20
00:01:16.780 --> 00:01:20.810
there's only one thing that is focusable at any one time.

21
00:01:20.830 --> 00:01:24.880
In this case we have tabindex="0"

22
00:01:24.900 --> 00:01:28.930
on the selected item, and everything else has a tabindex of -1, which means that pressing

23
00:01:28.950 --> 00:01:32.990
the Tab key won't [navigate] to that [element].

24
00:01:33.010 --> 00:01:37.050
As I arrow down, you'll see [the tabindex value] change.

25
00:01:37.070 --> 00:01:41.090


26
00:01:41.110 --> 00:01:45.140
Several things are actually happening.

27
00:01:45.160 --> 00:01:49.160
Currently I'm on Item 4.

28
00:01:49.180 --> 00:01:53.190
and the listbox is intercepting keypress/keydown events

29
00:01:53.210 --> 00:01:57.220
and when it does so, the [event handler] determines what

30
00:01:57.240 --> 00:02:01.270
will be the new selected item. Via script, I'll set 

31
00:02:01.290 --> 00:02:05.310
the new selected item (which will be Item 5)

32
00:02:05.330 --> 00:02:09.330
set its tabindex value to 0. I'll set the currently selected

33
00:02:09.350 --> 00:02:13.350
element's tabindex value to -1 so it's no longer focusable.

34
00:02:13.370 --> 00:02:17.380
But the most important piece is that I'm going to call focus()

35
00:02:17.400 --> 00:02:21.410
on the new element. So I'll select it here,

36
00:02:21.430 --> 00:02:25.460
and you can see [in the Accessibility Node Inspector] that it's not focused.

37
00:02:25.480 --> 00:02:29.490
but as I arrow down, that will become focused and selected at the same time.

38
00:02:29.510 --> 00:02:33.510
We're getting a real, native system focus event, and that's

39
00:02:33.530 --> 00:02:37.550
important because assistive technologies like screen readers

40
00:02:37.570 --> 00:02:41.580
and zoom magnifiers follow this native event. In addition to

41
00:02:41.600 --> 00:02:45.620
it focusing the DOM element and allowing you to do event [target] handling

42
00:02:45.640 --> 00:02:49.700
on the proper element, this is going to be trigger a system notification

43
00:02:49.720 --> 00:02:53.750
that assistive technologies and other

44
00:02:53.770 --> 00:02:57.790
keyboard utilities follow as well.

45
00:02:57.810 --> 00:02:59.820
I'm going to turn on VoiceOver.

46
00:02:59.840 --> 00:03:02.480


47
00:03:02.500 --> 00:03:05.850
and tab through the toolbar buttons

48
00:03:05.870 --> 00:03:08.280
that are covered in the full WWDC video.

49
00:03:08.300 --> 00:03:11.300


50
00:03:11.320 --> 00:03:13.910
As we arrow down, remember three things happen. 

51
00:03:13.930 --> 00:03:17.950
We'll take the next item and set its tabindex to 0, to make it focusable.

52
00:03:17.970 --> 00:03:22.000
We'll take the currently selected item and set its tabindex to -1

53
00:03:22.020 --> 00:03:26.030
so that it's no longer Tab key focusable.

54
00:03:26.050 --> 00:03:30.060
and most importantly, we're going to call the focus() method on the

55
00:03:30.080 --> 00:03:34.110
newly selected element, so that it triggers

56
00:03:34.130 --> 00:03:38.150
not just the DOM change, but also the 

57
00:03:38.170 --> 00:03:42.980
system focus notification. That's what the screen reader in this case is listening for.

58
00:03:43.000 --> 00:03:46.230


59
00:03:46.250 --> 00:03:50.280
And that's how a "managed focus" listbox

60
00:03:50.300 --> 00:03:52.480
works using the "roaming tabindex" technique.

61
00:03:52.500 --> 00:03:54.715