WEBVTT Kind: captions Language: en 00:00:00.080 --> 00:00:03.600 A Wb Accessibility Assessment Case Study Part 1:  00:00:03.600 --> 00:00:06.720 Visually Inspecting Mouse  and Keyboard Functionality 00:00:06.720 --> 00:00:09.920 One of the first things that I do when I analyze a website for accessibility  00:00:09.920 --> 00:00:13.040 is give it a visual inspection and just see what's on the page  00:00:13.040 --> 00:00:15.760 and figure out what it is that  I'm going to need to analyze. 00:00:15.760 --> 00:00:18.240 I'm actually going to start  with the mouse behaviors  00:00:18.240 --> 00:00:21.760 so I do that by simply moving my mouse over the different elements on the page. 00:00:21.760 --> 00:00:25.120 When I hover over this particular element -- it's a login and register button --  00:00:25.120 --> 00:00:27.600 it changes colors, so there's a hover component there. 00:00:27.600 --> 00:00:29.680 I know that I'll need to analyze the different states  00:00:29.680 --> 00:00:32.160 in terms of color contrast, but not just yet. 00:00:32.160 --> 00:00:36.320 Right now I'm looking for features or events or functionality that is triggered on mouseover  00:00:36.320 --> 00:00:38.720 or by hovering over items with a mouse. 00:00:38.720 --> 00:00:41.840 When I hover over the next control I get a pop-up menu 00:00:41.840 --> 00:00:47.280 This allows me to choose the country and currency, and if I hover over the different elements inside,  00:00:47.280 --> 00:00:51.120 I can see that they do have color changes with the hover state, but nothing else. 00:00:51.120 --> 00:00:55.520 I hover over the next button which says "discover" and I get a drop down menu,  00:00:55.520 --> 00:00:58.080 and so that's something I'm going to need to take into account. 00:00:58.080 --> 00:01:03.200 And when I hover over the things inside that menu, nothing else happens except for the color changes. 00:01:03.200 --> 00:01:06.560 You hover over the help button, color state change again but nothing else. 00:01:06.560 --> 00:01:10.560 Hover over different elements in the form, and nothing really significant here except   00:01:10.560 --> 00:01:11.760 for some color changes. 00:01:11.760 --> 00:01:13.840 And I can continue to do this throughout the page. 00:01:13.840 --> 00:01:17.040 I'm going to skip to a few parts that I'm aware of on this particular design. 00:01:17.040 --> 00:01:21.680 If I hover over a few of these cards I see that there's extra text that shows up,  00:01:21.680 --> 00:01:24.320 and I've looked at the rest of the page and it doesn't really have  00:01:24.320 --> 00:01:28.080 any other significant mouse events, so I'm going to move on from there. 00:01:28.080 --> 00:01:30.720 Now that I know that I have these mouse events,  00:01:30.720 --> 00:01:33.120 I want to find out if I can  access them with the keyboard. 00:01:33.120 --> 00:01:34.960 I'm going to click at the top of the page  00:01:34.960 --> 00:01:37.280 to make sure the focus is there, and I'm going to start tabbing. 00:01:37.280 --> 00:01:38.400 So hit the tab key  00:01:38.400 --> 00:01:41.600 and I don't see where the focus is, and that's a problem. 00:01:41.600 --> 00:01:43.360 And hit tab again, and I still don't   00:01:43.360 --> 00:01:45.280 see where the. focus is, that's still a problem 00:01:45.280 --> 00:01:47.440 Hit tab again and if I pay close attention  00:01:47.440 --> 00:01:51.520 to what's happening in the lower left hand corner I can see that it's on the "discover" button  00:01:51.520 --> 00:01:54.800 but there's no state change, so whereas I have the state change  00:01:54.800 --> 00:01:57.440 when I hover with the mouse, there's no focus state change. 00:01:57.440 --> 00:02:00.960 But there has to be some focus state indicator to let me know where I am,  00:02:00.960 --> 00:02:03.600 so this is already an accessibility failure. 00:02:03.600 --> 00:02:06.000 Not knowing where I am when I use the keyboard  00:02:06.000 --> 00:02:06.960 is a big problem. 00:02:06.960 --> 00:02:09.920 There is something that I can do to make the focus more visible. 00:02:09.920 --> 00:02:13.440 I'm going to turn on the Deque browser extension which you can do by pressing  00:02:13.440 --> 00:02:18.000 shift + control + J on Windows, or option command J on a Mac,  00:02:18.000 --> 00:02:21.360 or by right clicking anywhere on the web page and choosing inspect,  00:02:21.360 --> 00:02:24.080 then choosing the tab for  the Deque browser extension. 00:02:24.080 --> 00:02:25.520 Once you're on the correct tab,  00:02:25.520 --> 00:02:28.000 inside the extension go to  the drop down list of options. 00:02:28.000 --> 00:02:29.920 Tthat will probably be set to analyze,  00:02:29.920 --> 00:02:33.120 and choose Page Insights  then choose the focus option  00:02:33.120 --> 00:02:36.560 in the lower left pane of the extension, and that will add a dashed border   00:02:36.560 --> 00:02:39.040 to the object of the page that is currently in focus,  00:02:39.040 --> 00:02:42.240 making it easier for you to finish  evaluating keyboard accessibility. 00:02:42.240 --> 00:02:44.480 I need to point out that this dashed highlight feature  00:02:44.480 --> 00:02:47.840 is just a helper utility for you as an accessibility tester. 00:02:47.840 --> 00:02:50.640 Regular users will not be able to see the dashed lines  00:02:50.640 --> 00:02:52.880 while using the website in real life scenarios. 00:02:52.880 --> 00:02:55.440 Now that I can see the focus I can tell that the focus  00:02:55.440 --> 00:02:58.960 is currently on the Dream Destination logo in the upper left corner. 00:02:58.960 --> 00:02:59.920 I'm going to hit tab. 00:02:59.920 --> 00:03:03.360 It takes me to the next button or link and hit tab again  00:03:03.360 --> 00:03:04.720 and... well that's a surprise. 00:03:04.720 --> 00:03:08.400 So I skipped over the  language and currency selector  00:03:08.400 --> 00:03:11.200 and if I use shift tab to go backwards I mean no matter what I do  00:03:11.200 --> 00:03:15.520 I don't seem to be able to get to that element, so that whole menu is just not available. 00:03:15.520 --> 00:03:16.720 That's a big problem. 00:03:16.720 --> 00:03:18.960 And you notice that when  I'm on the discover button  00:03:18.960 --> 00:03:21.200 the drop down menu does not appear there either. 00:03:21.200 --> 00:03:22.320 That's also a problem. 00:03:22.320 --> 00:03:24.080 If I click through it will take me to a page  00:03:24.080 --> 00:03:25.920 that allows me to see the discover options,  00:03:25.920 --> 00:03:29.120 but I need to be able to get to that menu here on this page . 00:03:29.120 --> 00:03:30.560 And if I continue on,  00:03:30.560 --> 00:03:33.760 I started going across the top which is very logical. 00:03:33.760 --> 00:03:36.080 That's fine except for the part that wouldn't focus. 00:03:36.080 --> 00:03:38.880 But now I'm in the middle of the page which is not so logical. 00:03:38.880 --> 00:03:41.440 I ended up on the Google play icon. 00:03:41.440 --> 00:03:45.040 I expected to go to the form on the left first but that didn't happen 00:03:45.040 --> 00:03:48.400 If I hit tab again now I'm on the Apple app store icon. 00:03:48.400 --> 00:03:49.280 Hit tab again. 00:03:49.280 --> 00:03:52.000 And now I went up, which is really unexpected. 00:03:52.000 --> 00:03:53.920 I was down in the middle of page and I went up,  00:03:53.920 --> 00:03:55.280 which is really going backwards. 00:03:55.280 --> 00:03:56.320 Definitely not intuitive. 00:03:56.320 --> 00:03:57.440 And hit tab again... 00:03:57.440 --> 00:03:58.480 And oh! look at that! 00:03:58.480 --> 00:04:00.640 Now I'm inside the form so that's good. 00:04:00.640 --> 00:04:01.680 I eventually got to the form. 00:04:01.680 --> 00:04:03.280 The form is accessible in that sense. 00:04:03.280 --> 00:04:05.120 I've arrived at the form. 00:04:05.120 --> 00:04:09.280 So I would need to continue to test everything on this entire page to test for the order. 00:04:09.280 --> 00:04:11.920 I'm going to backtrack a little bit and make sure that I can actually  00:04:11.920 --> 00:04:13.520 access all of the features. 00:04:13.520 --> 00:04:16.800 If I go back and forth between the "from" and the "to" fields,  00:04:16.800 --> 00:04:20.480 you notice that I'm bypassing this icon to the side here  00:04:20.480 --> 00:04:23.280 which if I hover over it it says swap stations. 00:04:23.280 --> 00:04:27.360 So the focus is not landing on that which means that it's not keyboard accessible. 00:04:27.360 --> 00:04:29.840 So the ability to swap stations to flip them  00:04:29.840 --> 00:04:31.680 is not available to me as a keyboard user. 00:04:31.680 --> 00:04:34.720 If I tab down now I get into a tabbed interface  00:04:34.720 --> 00:04:37.360 that says one way and return and hit tab again,  00:04:37.360 --> 00:04:40.800 and now I need to find out can I access this "Return" tab  00:04:40.800 --> 00:04:44.560 and so I'm going to hit enter and it does allow me to access it  00:04:44.560 --> 00:04:45.200 which is good. 00:04:45.200 --> 00:04:47.200 And I'm going to use shift tab to go backwards  00:04:47.200 --> 00:04:49.360 and hit enter there and I'm good. 00:04:49.360 --> 00:04:50.960 So that part does pass  00:04:50.960 --> 00:04:53.360 and hit tab again to get down into the field. 00:04:53.360 --> 00:04:55.920 I see that there's this arrow off to the side here. 00:04:55.920 --> 00:04:58.000 If I keep tabbing I don't actually land on the arrow  00:04:58.000 --> 00:05:01.760 but if I select it with my mouse it does activate a calendar feature. 00:05:01.760 --> 00:05:04.560 The calendar feature is not available to the keyboard. 00:05:04.560 --> 00:05:05.920 It's only available to the mouse. 00:05:05.920 --> 00:05:08.960 And if I hit shift tab again, now I've got even more problems. 00:05:08.960 --> 00:05:11.600 I'm hitting shift tab and it's taking me underneath  00:05:11.600 --> 00:05:15.120 to some features that I can't see, so that's a significant problem...  00:05:15.120 --> 00:05:16.000 unexpected... 00:05:16.000 --> 00:05:20.000 I actually don't even know where I am for sure I'm just using shift tab to go backwards. 00:05:20.000 --> 00:05:23.040 I'm trying to get back so that I can deactivate this. 00:05:23.040 --> 00:05:26.960 Apparently I can't really deactivate it or it's going to things in the background. 00:05:26.960 --> 00:05:27.840 That's confusing. 00:05:27.840 --> 00:05:30.240 I would call that an  accessibility violation for sure. 00:05:30.240 --> 00:05:32.880 Anytime that you're landing  on something that is hidden  00:05:32.880 --> 00:05:36.560 behind something else with a keyboard, that is an accessibility violation. 00:05:36.560 --> 00:05:39.440 You need to be able to have  that item be on the top. 00:05:39.440 --> 00:05:43.360 I'm going to go ahead and see if I can select anything in here,  00:05:43.360 --> 00:05:48.400 and I'm using tab to go forward now and okay... now I'm down into the calendar itself. 00:05:48.400 --> 00:05:50.400 That was definitely problematic. 00:05:50.400 --> 00:05:53.920 I'm going to cheat again and use my mouse and just click that away,  00:05:53.920 --> 00:05:57.760 but I know that that whole calendar widget has serious accessibility problems. 00:05:57.760 --> 00:05:59.920 Keyboard access is atrocious. 00:05:59.920 --> 00:06:03.520 Moving past that calendar item, I'm going to go to the next field  00:06:03.520 --> 00:06:07.840 and I've got a minus and a plus symbol next to the number of passengers. 00:06:07.840 --> 00:06:11.120 I'm going to try hitting enter, and every time I hit enter  00:06:11.120 --> 00:06:14.160 it does increase so it's going from 1 to 9 in this case. 00:06:14.160 --> 00:06:18.400 If I go over to the minus, I'm going to hit enter, and it does start to subtract people,  00:06:18.400 --> 00:06:20.080 so that's good, that is accessible. 00:06:20.080 --> 00:06:23.680 The next feature I'm going to check is this "show all passenger types"  00:06:23.680 --> 00:06:25.680 so I'm going to tab to that the focus lands on it. 00:06:25.680 --> 00:06:26.240 That's good. 00:06:26.240 --> 00:06:29.920 I'm going to hit enter and the focus disappeared. 00:06:29.920 --> 00:06:30.720 That's not good. 00:06:30.720 --> 00:06:33.920 The focus should never disappear when you activate a feature. 00:06:33.920 --> 00:06:36.320 The focus should either remain on the button  00:06:36.320 --> 00:06:38.800 that activated it, or the focus should land on  00:06:38.800 --> 00:06:42.400 something that is new that appeared after you activated it. 00:06:42.400 --> 00:06:44.720 I'm going to hit tab again just to find out where I am. 00:06:44.720 --> 00:06:49.760 Okay so with one extra tab I was able to land on a somewhat intuitive place. 00:06:49.760 --> 00:06:52.160 It's the hide button which is basically   00:06:52.160 --> 00:06:55.440 the opposite of the expose button you know show and hide. 00:06:55.440 --> 00:06:56.080 So that's good. 00:06:56.080 --> 00:06:58.320 With only one more tab I was able to land on that,  00:06:58.320 --> 00:07:00.320 however I shouldn't have had to guess. 00:07:00.320 --> 00:07:01.440 I'm gonna hit tab again. 00:07:01.440 --> 00:07:02.880 It never actually let me go to  00:07:02.880 --> 00:07:05.360 the things that I selected which were up above. 00:07:05.360 --> 00:07:06.720 It's taken me past them. 00:07:06.720 --> 00:07:11.120 The hide button showed up below the items, and then from there I continued forward,  00:07:11.120 --> 00:07:15.280 but I really want to go into those items, and if I use shift tab I can. 00:07:15.280 --> 00:07:15.840 That's good. 00:07:15.840 --> 00:07:20.160 But the fact that I had to go backwards is a little bit less than intuitive. 00:07:20.160 --> 00:07:23.280 My preference in this particular case would have been to have the focus  00:07:23.280 --> 00:07:26.560 land in this field -- the senior 60 plus==  00:07:26.560 --> 00:07:28.640 because that's the first field  that appeared that was new,  00:07:28.640 --> 00:07:30.640 and then I could have made choices from there  00:07:30.640 --> 00:07:32.720 but now that I know that at least it works. 00:07:32.720 --> 00:07:33.760 I'm going to move on. 00:07:33.760 --> 00:07:35.760 So I'm going to go forward and let's find out  00:07:35.760 --> 00:07:38.400 if the hide feature works, so I'm going to hit enter  00:07:38.400 --> 00:07:40.800 and in fact it does cause it to collapse,  00:07:40.800 --> 00:07:43.520 but again the focus disappeared so that's problematic. 00:07:43.520 --> 00:07:46.080 I'm going to use the tab key to find out where I am,  00:07:46.080 --> 00:07:50.720 and it does recover in a nice place so it goes past that show button,  00:07:50.720 --> 00:07:53.200 although it landed on the item on the right,  00:07:53.200 --> 00:07:56.400 and then when I tab forward it landed on the item on the left,  00:07:56.400 --> 00:07:59.200 which is counter-intuitive, so that is out of order. 00:07:59.200 --> 00:08:02.320 So before activating the "more options" feature,  00:08:02.320 --> 00:08:05.760 I'm gonna move the developer tools down so that we can see more of the web page itself. 00:08:05.760 --> 00:08:09.440 I'm gonna go back up to the web page click on "more options" by hitting enter  00:08:09.440 --> 00:08:14.560 and you see that the dialog appears and you can also see that the focus stays behind. 00:08:14.560 --> 00:08:15.680 That's not good. 00:08:15.680 --> 00:08:18.160 The focus needs to land inside the dialog. 00:08:18.160 --> 00:08:20.080 I'm going to find out if  I can eventually get to it  00:08:20.080 --> 00:08:22.240 so I'm going to use a tab key and it's still taking   00:08:22.240 --> 00:08:26.240 me to things in the background which shouldn't be getting the tab focus at all. 00:08:26.240 --> 00:08:27.120 Hit tab again. 00:08:27.120 --> 00:08:28.080 Still in the background. 00:08:28.080 --> 00:08:30.640 And I hit tab again, and finally I land inside the dialog  00:08:30.640 --> 00:08:34.880 but it's not really acting as a dialogue the fact that I was able to get in is good,  00:08:34.880 --> 00:08:38.560 but the fact that I had to  tab around first is bad. 00:08:38.560 --> 00:08:43.680 I'm going to continue tabbing through and looks like the controls are available   00:08:43.680 --> 00:08:45.040 to the keyboard, which is good,  00:08:45.040 --> 00:08:48.480 although I didn't land on the "close" button, which is bad. 00:08:48.480 --> 00:08:52.240 And if I tab past the dialog, things start to get really strange...  00:08:52.240 --> 00:08:55.280 so the dialog is still open and I'm tabbing around in the background,  00:08:55.280 --> 00:08:58.320 and it's causing some really  strange visual effects,  00:08:58.320 --> 00:09:00.800 as the dialogue is somewhat   00:09:00.800 --> 00:09:03.840 hidden behind other things that are semi-transparent. 00:09:03.840 --> 00:09:07.200 So really not a good user experience overall. 00:09:07.200 --> 00:09:10.720 I'm going to back up using shift tab, and I'm just going to hit "confirm"   00:09:10.720 --> 00:09:14.240 to get out of here and go back up to where I was before. 00:09:14.240 --> 00:09:16.320 Definite keyboard accessibility problems there. 00:09:16.320 --> 00:09:19.040 We have another feature this "add rail card" feature. 00:09:19.040 --> 00:09:20.000 I'm going to hit enter. 00:09:20.000 --> 00:09:22.960 We get another dialog and look, we have the same exact problem,  00:09:22.960 --> 00:09:25.520 and that is that the focus  remained in the background. 00:09:25.520 --> 00:09:27.120 That's an accessibility violation. 00:09:27.120 --> 00:09:30.640 Hit tab and eventually the focus does land in the dialogue which is good,  00:09:30.640 --> 00:09:32.320 so it's technically available,  00:09:32.320 --> 00:09:34.640 but it's going to be a  rather confusing experience. 00:09:34.640 --> 00:09:38.400 And I move forward and I can  tab to things which is good. 00:09:38.400 --> 00:09:41.920 And now I'm on a feature that  says "add another rail card." 00:09:41.920 --> 00:09:45.440 I'm going to hit "enter," and it does in fact expand that  00:09:45.440 --> 00:09:48.000 so I get another form field  to add another rail card,  00:09:48.000 --> 00:09:50.800 but you notice that the focus remained behind  00:09:50.800 --> 00:09:53.680 on something that isn't even  in that same location anymore. 00:09:53.680 --> 00:09:54.480 Hit tab again. 00:09:54.480 --> 00:09:56.480 I do go to the confirm button which is good. 00:09:56.480 --> 00:09:59.760 It would have been better when I clicked on add another rail card  00:09:59.760 --> 00:10:03.760 for the focus to land inside the  form element that was just added. 00:10:03.760 --> 00:10:07.280 Another thing I need to check here is whether the delete button works  00:10:07.280 --> 00:10:08.720 next to the form elements. 00:10:08.720 --> 00:10:10.880 S I'm going to use shift tab hit enter  00:10:10.880 --> 00:10:13.840 and the delete button does  in fact work so that's good. 00:10:13.840 --> 00:10:15.440 I'm going to get out of this dialog. 00:10:15.440 --> 00:10:17.760 I'm going to cheat and use  the mouse to make it quicker. 00:10:17.760 --> 00:10:20.640 So there are other elements on this page that we could test for the keyboard. 00:10:20.640 --> 00:10:23.520 I'm not going to worry about all of them right now for the sake of this video,  00:10:23.520 --> 00:10:26.160 but there is one more thing I  want to test with the keyboard  00:10:26.160 --> 00:10:28.960 and that's the information  cards below the main form. 00:10:28.960 --> 00:10:32.080 I'll tab to these cards and, just as I feared,   00:10:32.080 --> 00:10:36.080 the extra text that appears on mouse hover. does not appear on keyboard focus 00:10:36.080 --> 00:10:38.960 So that is yet another accessibility failure. 00:10:38.960 --> 00:10:41.760 What have we learned so far about the accessibility of this web page? 00:10:41.760 --> 00:10:43.760 Wellw for startersw we had a hard time seeing   00:10:43.760 --> 00:10:46.720 where the focus was on the page which made it actually impossible   00:10:46.720 --> 00:10:49.600 to test keyboard accessibility we had to use the browser extension  00:10:49.600 --> 00:10:52.800 to create a visible focus  indicator where there wasn't one  00:10:52.800 --> 00:10:55.280 and that allowed us to finish testing, but the fact that there was   00:10:55.280 --> 00:10:58.480 no focus visible indicator was a violation in and of itself,  00:10:58.480 --> 00:11:02.720 and that's of Web Content Accessibility  Guidelines success criteria 2.4.7 00:11:02.720 --> 00:11:05.120 We saw this problem with  the login and register link  00:11:05.120 --> 00:11:08.960 with the language and currency drop down menu with the discover drop down menu  00:11:08.960 --> 00:11:12.320 with a help link and probably  on other locations of the page  00:11:12.320 --> 00:11:14.160 but we didn't finish testing the entire page  00:11:14.160 --> 00:11:16.000 because we found so many  problems at the beginning. 00:11:16.000 --> 00:11:18.240 It was just faster and easier to turn on the dashed   00:11:18.240 --> 00:11:21.840 highlights from the browser extension to facilitate the rest of the testing. 00:11:21.840 --> 00:11:23.440 If you were reporting this to developers,  00:11:23.440 --> 00:11:26.000 you would need to let them know each and every instance. 00:11:26.000 --> 00:11:28.880 We also saw problems with  keyboard accessibility in general  00:11:28.880 --> 00:11:33.120 which is success criteria 2.1.1, where the language and currency drop down menu  00:11:33.120 --> 00:11:36.800 wasn't even available to tab to with a keyboard so you couldn't activate it  00:11:36.800 --> 00:11:40.640 and you could tab to the discover drop down menu but nothing was activated. 00:11:40.640 --> 00:11:45.040 You could not tab to the swap stations button; you could not tab to the calendar date pi,cker;  00:11:45.040 --> 00:11:48.720 and you could tab to the info cards but it did not show any extra text  00:11:48.720 --> 00:11:50.400 as it did when you use the mouse. 00:11:50.400 --> 00:11:53.600 And then with the "close" buttons and dialogs you couldn't tab to them at all. 00:11:53.600 --> 00:11:55.920 Beyond that there were  problems with the focus order  00:11:55.920 --> 00:11:58.640 which is success criteria 2.4.3 00:11:58.640 --> 00:12:01.840 There were lots of places that were just illogical in the center of the page  00:12:01.840 --> 00:12:05.600 and then we had problems with components not managing the focus order correctly. 00:12:05.600 --> 00:12:08.560 The focus does not go into the dialogs when you activate them. 00:12:08.560 --> 00:12:11.760 The focus does not go into new  form inputs when you add new rows,  00:12:11.760 --> 00:12:15.040 and it does not land on anything  after hiding or deleting elements. 00:12:15.040 --> 00:12:16.720 The focus just gets lost. 00:12:16.720 --> 00:12:19.520 There are likely other keyboard  accessibility problems on this page  00:12:19.520 --> 00:12:22.560 and we're definitely not done  with our accessibility testing. 00:12:22.560 --> 00:12:25.200 Move on to part 2 to find out  where we're going from here.