Educating Users In App

I read this post on the dangers of using ARIA roles with a common markup format for tabs.

From the outset, it looked like they were doing everything correctly. Semantic HTML. Added ARIA roles. And yet…

Even though they could see that the tabs existed, some people weren’t able to figure out they needed to use the arrow keys to toggle the inactive tabs, so they couldn’t access that content.

I remember a lot of the work that Todd Kloots and I did to add ARIA roles and keyboard accessibility to Yahoo! Mail.

For a web application, there can be a lot of focusable elements. As a result, tabbing can be tedious. We used ARIA roles and managed tab indexing to minimize the amount of work required to navigate the interface. The implementation is near identical to what Jeff Smith uses in the Simply Accessible post.

Marco, an accessibility QA engineer and evangelist with Firefox, did a review of Yahoo! Mail. He had this to say about the tabs:

Speaking of tabs: There are instructions given on navigation wherever something might work slightly differently from what one is used to from desktop applications. For example when focused on the tabs, one is instructed to navigate left and right, and that enter will actually make that tab active. […] Very nice!

The problem with new interactions is educating users on those new interactions. That is necessary regardless of whether the users are sighted or not (or anywhere in between). There’s an education step required to ensure users are aware of what is possible. We see this education step in many apps that break away from the norm.

In the case of a site with limited navigation, maybe using an ARIA-enabled tablist is overkill. In our case, taking a moment to teach people can save them time and make their use of the application a much better one.

Marco went on to say…

Personally, I can even see myself switching to a web client away from a desktop client for the first time since this is the first instance of a web e-mail client that I found I can use as productively as my favourite desktop client.

Of course, this is just one person’s review. The application could very well have been a failure for a large segment of the user base. What works for one user may not work for other users. What works for one site may not work for other sites.

Which, goes back to what Simply Accessible did: test your implementation with your users to see if it hits the mark.

Published April 19, 2016
Categorized as HTML and CSS
Short URL: https://snook.ca/s/1081

Want to learn about scaling CSS for large projects?

I'm available for full and half-day workshops on scalable CSS architecture. I can provide on-site training for your team. Interested?
Get in touch.