WEBVTT 1 00:00:00.020 --> 00:00:04.100 Here we have an ARIA combo box. 2 00:00:04.120 --> 00:00:08.140 As I type in, I get a filtered list of all the results. 3 00:00:08.160 --> 00:00:12.170 The number of results listed in this status 4 00:00:12.190 --> 00:00:16.230 section ("10 items"). As I type more, it filters down ("4 items"). 5 00:00:16.250 --> 00:00:20.280 Also as I arrow down through the list of choices, 6 00:00:20.300 --> 00:00:24.320 those are selected, and I hit return to [choose] the currently selected one. 7 00:00:24.340 --> 00:00:28.350 Let's take a look at the Web Inspector. 8 00:00:28.370 --> 00:00:32.400 Here I have my combo box. It has an aria-labelledby 9 00:00:32.420 --> 00:00:36.430 attribute that points to its own ID, which in this case 10 00:00:36.450 --> 00:00:40.490 just means that's it's getting its label from the placeholder attribute. 11 00:00:40.510 --> 00:00:44.520 We have turned off some of the native features like autocomplete and autocorrect. 12 00:00:44.540 --> 00:00:48.550 It also has this "owns" relationship that points to an 13 00:00:48.570 --> 00:00:52.600 IDREF of the listbox down here. 14 00:00:52.620 --> 00:00:56.630 We can see a lot of these features [reflected] for us in the 15 00:00:56.650 --> 00:01:00.660 Accessibility Node Inspector. So I can click on the "owned" element from the 16 00:01:00.680 --> 00:01:04.720 Node Inspector, and that will select our listbox. 17 00:01:04.740 --> 00:01:08.800 It's this UL. I'm going to expand it so that we see all of it's children. 18 00:01:08.820 --> 00:01:12.840 Currently we don't see any accessibility properties for this element but that's just 19 00:01:12.860 --> 00:01:16.880 because it's not rendered. 20 00:01:16.900 --> 00:01:20.930 As I type in some text, we'll see 21 00:01:20.950 --> 00:01:25.000 that this element is rendered, and then 22 00:01:25.020 --> 00:01:29.060 the accessibility information pops in. Now it has four children. 23 00:01:29.080 --> 00:01:33.130 Obviously those are the four that are rendered on-screen, but we've got four children. 24 00:01:33.150 --> 00:01:37.150 It has this "Clickable" property which means that there is an event handler on the element itself. 25 00:01:37.170 --> 00:01:41.200 One thing that is not showing here is 26 00:01:41.220 --> 00:01:45.230 selected children, because at the moment, it doesn't have any selected children. 27 00:01:45.250 --> 00:01:49.290 So I'll go ahead and arrow down. As we arrow down, 28 00:01:49.310 --> 00:01:53.310 the selected item pointer updates to the new IDREF of the selected one. 29 00:01:53.330 --> 00:01:57.340 Which in this case is the list item that contains "New Mexico." 30 00:01:57.360 --> 00:02:01.460 One thing that may not have been obvious is that the way the selected items 31 00:02:01.480 --> 00:02:05.510 in this listbox are determined is by use of the "aria-selected" attribute. 32 00:02:05.530 --> 00:02:09.540 So I'll type a different set of characters, I'm just going to type 33 00:02:09.560 --> 00:02:13.600 "A.L." and this allows us to see some of the 34 00:02:13.620 --> 00:02:17.630 ones that are showing here: Alabama, Alaska, and California. 35 00:02:17.650 --> 00:02:21.700 Now as I arrow down, if you watch the DOM Inspector, you'll see the aria-selected attribute appear. 36 00:02:21.720 --> 00:02:25.740 on those elements. 37 00:02:25.760 --> 00:02:29.810 And that's how this selected item is determined. 38 00:02:29.830 --> 00:02:33.870 One other thing that you'll need to know about is this "live" region. 39 00:02:33.890 --> 00:02:37.920 This is an element with a role of status. Currently it has no contents inside of it. 40 00:02:37.940 --> 00:02:41.970 If we select on it in the Accessibility Node Inspector, 41 00:02:41.990 --> 00:02:46.030 you can see that it default "live" status of polite 42 00:02:46.050 --> 00:02:50.100 and all of the changes to it will be announced in its entirety. 43 00:02:50.120 --> 00:02:54.130 Those are just some of the default properties of the status role. It gets 44 00:02:54.150 --> 00:02:58.250 aria-live="polite" and aria-atomic="true" 45 00:02:58.270 --> 00:02:59.980 Now I'll turn on VoiceOver. 46 00:03:00.000 --> 00:03:06.640 47 00:03:06.660 --> 00:03:10.310 And now when we type in our 48 00:03:10.330 --> 00:03:14.390 text, we'll hear a few different things. We'll hear the text that we typed, 49 00:03:14.410 --> 00:03:17.730 as well as the updates to that live region that tell us how 50 00:03:17.750 --> 00:03:19.980 many results are filtered. 51 00:03:20.000 --> 00:03:22.980 52 00:03:23.000 --> 00:03:26.550 Then as we arrow down the list, we'll hear that 53 00:03:26.570 --> 00:03:30.560 reference to the "owned" element and its selected children being spoken. 54 00:03:30.580 --> 00:03:32.980 So we'll hear New Hampshire, New Jersey, etc. 55 00:03:33.000 --> 00:03:38.640 56 00:03:38.660 --> 00:03:40.850 And that's how an ARIA combo box works. 57 00:03:40.870 --> 00:03:42.602