Oh Good GAAD - Phase2's Day of Accessibility Testing

Catharine McNally, Associate Product Manager
#Accessibility | Posted

For today's Global Accessibility Awareness Day (GAAD), I challenged my colleagues here at Phase2 to book a flight online from the perspective of a person with a disability. They were allowed to navigate the site using one or a combination of the following methods:- a keyboard;- a screen-reader; or- low-vision-simulating goggles.

I was pleasantly surprised by the high-level of enthusiasm for doing this "experiment"! Many started off with an optimistic "I got this" grin on their faces as they accepted this challenge of booking a dream flight online. Within a minute of their experience, these individuals were frustrated and stuck, looking at me for questions and help to move forward.

Split Image of Frank Febrarro; Left side, Frank is seated at computer, smilling. Right side, Frank's facial expression is markedly more frustrated

Joshua Freeman, one of our project managers, reflects on his experience:  It was like driving on a long, straight highway with smooth pavement that would suddenly  and without warning turn to rocks, gravel and boulders.  I could cruise along without problems with everything working until a trouble spot appeared -- like not knowing where the keyboard focus was, or not being able to correctly select a date on a calendar - and then I was completely stuck. The constant swinging between trouble-free and nothing-but-trouble was much worse than if the entire experience had been merely mediocre throughout.  All in all it was a negative experience that I would really like to see fixed.

Profile view of Kellye Rogers who uses low-vision simulator goggles to navigate a website

The Most Common Blockers

  1. The keyboard focus (often the outline around an element) often disappeared, when it, unknown to the user, would be inside a drop-down menu that did not expand. The user was unaware of "how long" to keep tabbing until the focus would reappear.
  2. The tabbing was done linearly and it was often unexpected to the user to have to tab across a page to [finally] get to their destination.
  3. Users were struck by needing to have additional knowledge of keyboard combinations to do the most basic functions, like moving their arrow keys up/down/left/right.

I couldn't help but capture a few of the feedback and perspectives from this experience, and wanted to share them with you:

On Keyboard Navigation

Jeff Walpole, our CEO, took the test further than most, as he was determined to complete the whole flight booking experience despite numerous roadblocks. These "roadblocks" were largely attributed to --like most of us-- not knowing all the tab key/control combinations to perform specific actions. Jeff's reaction to this was:

This confusion shouldn't be the case. Navigating a page through a tab key should be a hierarchal experience. Think about when you use Netflix on AppleTV, all you use are your up, down, right, left arrow keys and the middle button to make your selections. Because those interfaces use hierarchical navigation, you logically understand everything you need to do. Shouldn't we all strive for the keyboard experience on a website be like that, too?

View of Hands using Tab Keys and Arrow Keys

Ray Stuart, a developer, has a long-standing love for the tab key. He finds it quicker and easier to accomplish certain things on the webpage rather than using the mouse. Ray went on to say:

"It probably started with text-mode browsers like lynx, links, and elinks. I would use them in a terminal when ssh'ed into a machine. Having a website properly set up for optimal keyboard navigation is important to me, too. One of the things that struck me about this experience booking a flight was that there was no use of tabindex. Putting some consideration into tab order of a webpage would greatly improve the logic and usability of a site. I'd like to see some improvement on this for all users, including myself.

"I also like when a website immediately puts my cursor in the username box of a login form, which can be accomplished with javascript. I will almost always use the tabkey to go to the password box and then submit button."

Our Developers Reactions

One of Joe Turgeon key takeaways was:

Understanding the tactile nature of keyboard navigation, where the user has to touch each part of the page, as opposed to a visual and mouse experience that allows skimming and jumping through content.

Sean MacCath-Moran said:

I'm often struck by how "messy" HTML is underneath even the most professional sites, which is something that negatively addresses accessibility issues very directly; screen readers have to try and sort through all of that, and it's often a difficult (sometimes impossible) task. There is little additional overhead involved in creating clean themes that are designed while keeping these issues in mind, so it's really just a matter of educating developers in order to make sites functional for all users.

On VoiceOver

Shawn Mole, an Analyst, reflects on both his positive and confusing experiences using VoiceOver:

The craziest thing about using voiceover is the giant lists of links you sometimes encounter, especially in mega-menus. You can spend forever tabbing through links, and easily lose your sense of context as you get down to the menus. Those giant grids of links only are acceptable if you can visually see the relationships between headers and sub-links to keep your place. Once you're relying on your memory to remember your "place" it's really difficult to navigate.

My favorite thing about voice over is when I encounter an ajax drop down menu for auto-completing fields (search terms, options), and the options are read out loud. The voice-over experience seems more elegant to me than the visual interface, because the keyboard and audio are perfectly synced up then; it's a much nicer experience than when you type and then have to switch to the mouse to pick something from a list of suggestions.

William O'Beirne, another Phase2 developer said:

I think the most positive thing for me about VoiceOver was how easy and intuitive the controls were. I was pretty successfully navigating pages within 15 minutes of using it, and I can see how quickly people could get with navigating a page after a few years of use.

The most frustrating thing to me was the lack of general use of ARIA attributes. There are tons of great attributes that can be added to markup to give screen readers more information about functionality and visibility of components, but it's pretty rare that I see them anywhere.

I was really surprised how many pages with lots of complicated elements like videos, slideshows, pop-ups etc. offered no non-visual context for those elements. I'd often find myself focused on an embedded YouTube video iframe without knowing what it was, or why it was important. Or suddenly paging through a ton of images in some slideshow that I had no context for, and none of the images had descriptive text.

It was definitely an insightful day for all of us here at Phase2. Thanks to the Global Accessibility Awareness Day initiative, for inspiring us to spend the day trying to gain insight on what it's like to experience a website through alternate methods. We're definitely more aware and educated! And for all the latest news on our accessibility efforts, follow us on twitter @phase2


Catharine McNally

Associate Product Manager