A Wb Accessibility Assessment Case Study Part 1:
Visually Inspecting Mouse and Keyboard Functionality
One of the first things that I do when I analyze a website for accessibility
is give it a visual inspection and just see what's on the page
and figure out what it is that I'm going to need to analyze.
I'm actually going to start with the mouse behaviors
so I do that by simply moving my mouse over the different elements on the page.
When I hover over this particular element -- it's a login and register button --
it changes colors, so there's a hover component there.
I know that I'll need to analyze the different states
in terms of color contrast, but not just yet.
Right now I'm looking for features or events or functionality that is triggered on mouseover
or by hovering over items with a mouse.
When I hover over the next control I get a pop-up menu
This allows me to choose the country and currency, and if I hover over the different elements inside,
I can see that they do have color changes with the hover state, but nothing else.
I hover over the next button which says "discover" and I get a drop down menu,
and so that's something I'm going to need to take into account.
And when I hover over the things inside that menu, nothing else happens except for the color changes.
You hover over the help button, color state change again but nothing else.
Hover over different elements in the form, and nothing really significant here except
for some color changes.
And I can continue to do this throughout the page.
I'm going to skip to a few parts that I'm aware of on this particular design.
If I hover over a few of these cards I see that there's extra text that shows up,
and I've looked at the rest of the page and it doesn't really have
any other significant mouse events, so I'm going to move on from there.
Now that I know that I have these mouse events,
I want to find out if I can access them with the keyboard.
I'm going to click at the top of the page
to make sure the focus is there, and I'm going to start tabbing.
So hit the tab key
and I don't see where the focus is, and that's a problem.
And hit tab again, and I still don't
see where the. focus is, that's still a problem
Hit tab again and if I pay close attention
to what's happening in the lower left hand corner I can see that it's on the "discover" button
but there's no state change, so whereas I have the state change
when I hover with the mouse, there's no focus state change.
But there has to be some focus state indicator to let me know where I am,
so this is already an accessibility failure.
Not knowing where I am when I use the keyboard
is a big problem.
There is something that I can do to make the focus more visible.
I'm going to turn on the Deque browser extension which you can do by pressing
shift + control + J on Windows, or option command J on a Mac,
or by right clicking anywhere on the web page and choosing inspect,
then choosing the tab for the Deque browser extension.
Once you're on the correct tab,
inside the extension go to the drop down list of options.
Tthat will probably be set to analyze,
and choose Page Insights then choose the focus option
in the lower left pane of the extension, and that will add a dashed border
to the object of the page that is currently in focus,
making it easier for you to finish evaluating keyboard accessibility.
I need to point out that this dashed highlight feature
is just a helper utility for you as an accessibility tester.
Regular users will not be able to see the dashed lines
while using the website in real life scenarios.
Now that I can see the focus I can tell that the focus
is currently on the Dream Destination logo in the upper left corner.
I'm going to hit tab.
It takes me to the next button or link and hit tab again
and... well that's a surprise.
So I skipped over the language and currency selector
and if I use shift tab to go backwards I mean no matter what I do
I don't seem to be able to get to that element, so that whole menu is just not available.
That's a big problem.
And you notice that when I'm on the discover button
the drop down menu does not appear there either.
That's also a problem.
If I click through it will take me to a page
that allows me to see the discover options,
but I need to be able to get to that menu here on this page .
And if I continue on,
I started going across the top which is very logical.
That's fine except for the part that wouldn't focus.
But now I'm in the middle of the page which is not so logical.
I ended up on the Google play icon.
I expected to go to the form on the left first but that didn't happen
If I hit tab again now I'm on the Apple app store icon.
Hit tab again.
And now I went up, which is really unexpected.
I was down in the middle of page and I went up,
which is really going backwards.
Definitely not intuitive.
And hit tab again...
And oh! look at that!
Now I'm inside the form so that's good.
I eventually got to the form.
The form is accessible in that sense.
I've arrived at the form.
So I would need to continue to test everything on this entire page to test for the order.
I'm going to backtrack a little bit and make sure that I can actually
access all of the features.
If I go back and forth between the "from" and the "to" fields,
you notice that I'm bypassing this icon to the side here
which if I hover over it it says swap stations.
So the focus is not landing on that which means that it's not keyboard accessible.
So the ability to swap stations to flip them
is not available to me as a keyboard user.
If I tab down now I get into a tabbed interface
that says one way and return and hit tab again,
and now I need to find out can I access this "Return" tab
and so I'm going to hit enter and it does allow me to access it
which is good.
And I'm going to use shift tab to go backwards
and hit enter there and I'm good.
So that part does pass
and hit tab again to get down into the field.
I see that there's this arrow off to the side here.
If I keep tabbing I don't actually land on the arrow
but if I select it with my mouse it does activate a calendar feature.
The calendar feature is not available to the keyboard.
It's only available to the mouse.
And if I hit shift tab again, now I've got even more problems.
I'm hitting shift tab and it's taking me underneath
to some features that I can't see, so that's a significant problem...
unexpected...
I actually don't even know where I am for sure I'm just using shift tab to go backwards.
I'm trying to get back so that I can deactivate this.
Apparently I can't really deactivate it or it's going to things in the background.
That's confusing.
I would call that an accessibility violation for sure.
Anytime that you're landing on something that is hidden
behind something else with a keyboard, that is an accessibility violation.
You need to be able to have that item be on the top.
I'm going to go ahead and see if I can select anything in here,
and I'm using tab to go forward now and okay... now I'm down into the calendar itself.
That was definitely problematic.
I'm going to cheat again and use my mouse and just click that away,
but I know that that whole calendar widget has serious accessibility problems.
Keyboard access is atrocious.
Moving past that calendar item, I'm going to go to the next field
and I've got a minus and a plus symbol next to the number of passengers.
I'm going to try hitting enter, and every time I hit enter
it does increase so it's going from 1 to 9 in this case.
If I go over to the minus, I'm going to hit enter, and it does start to subtract people,
so that's good, that is accessible.
The next feature I'm going to check is this "show all passenger types"
so I'm going to tab to that the focus lands on it.
That's good.
I'm going to hit enter and the focus disappeared.
That's not good.
The focus should never disappear when you activate a feature.
The focus should either remain on the button
that activated it, or the focus should land on
something that is new that appeared after you activated it.
I'm going to hit tab again just to find out where I am.
Okay so with one extra tab I was able to land on a somewhat intuitive place.
It's the hide button which is basically
the opposite of the expose button you know show and hide.
So that's good.
With only one more tab I was able to land on that,
however I shouldn't have had to guess.
I'm gonna hit tab again.
It never actually let me go to
the things that I selected which were up above.
It's taken me past them.
The hide button showed up below the items, and then from there I continued forward,
but I really want to go into those items, and if I use shift tab I can.
That's good.
But the fact that I had to go backwards is a little bit less than intuitive.
My preference in this particular case would have been to have the focus
land in this field -- the senior 60 plus==
because that's the first field that appeared that was new,
and then I could have made choices from there
but now that I know that at least it works.
I'm going to move on.
So I'm going to go forward and let's find out
if the hide feature works, so I'm going to hit enter
and in fact it does cause it to collapse,
but again the focus disappeared so that's problematic.
I'm going to use the tab key to find out where I am,
and it does recover in a nice place so it goes past that show button,
although it landed on the item on the right,
and then when I tab forward it landed on the item on the left,
which is counter-intuitive, so that is out of order.
So before activating the "more options" feature,
I'm gonna move the developer tools down so that we can see more of the web page itself.
I'm gonna go back up to the web page click on "more options" by hitting enter
and you see that the dialog appears and you can also see that the focus stays behind.
That's not good.
The focus needs to land inside the dialog.
I'm going to find out if I can eventually get to it
so I'm going to use a tab key and it's still taking
me to things in the background which shouldn't be getting the tab focus at all.
Hit tab again.
Still in the background.
And I hit tab again, and finally I land inside the dialog
but it's not really acting as a dialogue the fact that I was able to get in is good,
but the fact that I had to tab around first is bad.
I'm going to continue tabbing through and looks like the controls are available
to the keyboard, which is good,
although I didn't land on the "close" button, which is bad.
And if I tab past the dialog, things start to get really strange...
so the dialog is still open and I'm tabbing around in the background,
and it's causing some really strange visual effects,
as the dialogue is somewhat
hidden behind other things that are semi-transparent.
So really not a good user experience overall.
I'm going to back up using shift tab, and I'm just going to hit "confirm"
to get out of here and go back up to where I was before.
Definite keyboard accessibility problems there.
We have another feature this "add rail card" feature.
I'm going to hit enter.
We get another dialog and look, we have the same exact problem,
and that is that the focus remained in the background.
That's an accessibility violation.
Hit tab and eventually the focus does land in the dialogue which is good,
so it's technically available,
but it's going to be a rather confusing experience.
And I move forward and I can tab to things which is good.
And now I'm on a feature that says "add another rail card."
I'm going to hit "enter," and it does in fact expand that
so I get another form field to add another rail card,
but you notice that the focus remained behind
on something that isn't even in that same location anymore.
Hit tab again.
I do go to the confirm button which is good.
It would have been better when I clicked on add another rail card
for the focus to land inside the form element that was just added.
Another thing I need to check here is whether the delete button works
next to the form elements.
S I'm going to use shift tab hit enter
and the delete button does in fact work so that's good.
I'm going to get out of this dialog.
I'm going to cheat and use the mouse to make it quicker.
So there are other elements on this page that we could test for the keyboard.
I'm not going to worry about all of them right now for the sake of this video,
but there is one more thing I want to test with the keyboard
and that's the information cards below the main form.
I'll tab to these cards and, just as I feared,
the extra text that appears on mouse hover. does not appear on keyboard focus
So that is yet another accessibility failure.
What have we learned so far about the accessibility of this web page?
Wellw for startersw we had a hard time seeing
where the focus was on the page which made it actually impossible
to test keyboard accessibility we had to use the browser extension
to create a visible focus indicator where there wasn't one
and that allowed us to finish testing, but the fact that there was
no focus visible indicator was a violation in and of itself,
and that's of Web Content Accessibility Guidelines success criteria 2.4.7
We saw this problem with the login and register link
with the language and currency drop down menu with the discover drop down menu
with a help link and probably on other locations of the page
but we didn't finish testing the entire page
because we found so many problems at the beginning.
It was just faster and easier to turn on the dashed
highlights from the browser extension to facilitate the rest of the testing.
If you were reporting this to developers,
you would need to let them know each and every instance.
We also saw problems with keyboard accessibility in general
which is success criteria 2.1.1, where the language and currency drop down menu
wasn't even available to tab to with a keyboard so you couldn't activate it
and you could tab to the discover drop down menu but nothing was activated.
You could not tab to the swap stations button; you could not tab to the calendar date pi,cker;
and you could tab to the info cards but it did not show any extra text
as it did when you use the mouse.
And then with the "close" buttons and dialogs you couldn't tab to them at all.
Beyond that there were problems with the focus order
which is success criteria 2.4.3
There were lots of places that were just illogical in the center of the page
and then we had problems with components not managing the focus order correctly.
The focus does not go into the dialogs when you activate them.
The focus does not go into new form inputs when you add new rows,
and it does not land on anything after hiding or deleting elements.
The focus just gets lost.
There are likely other keyboard accessibility problems on this page
and we're definitely not done with our accessibility testing.
Move on to part 2 to find out where we're going from here.