Our mobile accessibility expert, Chris McMeeking, will address a design feature he has been seeing recently. He will address why it has good intentions, but how it is inherently inaccessible for anyone who has a disability and isn’t a blind talkback user. Below is a transcript of the video, the video also has timed captions. Enjoy!
Hello, my name is Chris McMeeking, I am a software engineer here at Deque. Also, accessibility expert and member of the DW3C mobile accessibility task force. I am here today to talk to you about an annoying design pattern I’m seeing pop up. I saw Google implement this in their Google Plus app recently. I’ve seen it in LinkedIn and a couple other applications. It’s interesting because I think it’s based on some good motivations, but ultimately it doesn’t speak to inclusive design. And I’ll talk to that when we see it.
So, the first thing I’m going to do is I’m going to turn off Talkback. Notice that in my screen capture thing, here you can see where I’m touching on the screen. You see the circle here, that’s where I’m touching on the screen, and I’m going to turn on Talkback. When I turn on Talkback, notice I have this little post message up here at the bottom. This is the speak feedback that Talkback is giving me. And I’m going to have it, give that to you through those toasts. And when it’s important, I will make sure to announce it.
A Google+ Post, The Good (Data Association) [1:18]
Let’s go here. Let’s open up Google Plus. I have Google Plus opened, let’s go back and let’s find a post. Let’s find a post of some kind. I think the best way to do this is to go home, and then go to … let’s look at this vegetarian recipes. We have this vegetarian recipe. And now let’s look at the … and notice now, when I focus this thing in Talkback, my Talkback focus rectangle has encapsulated essentially the data on the entire screen. And this is the point that I want to talk about. This is confusing, this is rough. This is hard to use, this is maybe good … I see the motivation for this pattern. I see that, you know, what users are trying to do, what Google is trying to do here is wrap all of this information together, right? All of this information is associated, and it’s important to capture that. Data association is an important and complicated thing, especially on mobile where you can do this touch to explore thing.
Data association is an important and complicated thing
But let’s talk about this touch to explore thing, right? Because maybe for blind Talkback users doing this wide global mapping and associating all of this data together and having this really large touch target, maybe that’s a good thing. And then what they’ve done is they’ve allowed you to when you double-click this you open this context menu so that all of those actions that you can do are accessible. We can talk about the things that they have in that context menu in a little bit. But let’s point out first one of the bad things that I see about this design pattern. And that is the presentation of information. One of the things that we talked about was the idea of collecting all of this information and this data association. And when you read through all of this, if you can eventually, you get down to the fact that you have 54 plus ones, four comments, two shares, so on and so forth.
Because maybe for blind Talkback users … that’s a good thing.
That’s all the information there. So let’s refocus this and let’s dissect this announcement. Manju Mahadevan, nine hours ago. This spicy mixture of peanuts, lentils, rice flour and lentil crisps simply called Mixture is a popular South Indian snack, yada, yada, yada. Four comments, 54 plus ones, two people shared this. That’s the whole announcement. And so, what they’ve done is they’ve wrapped all of this information together in a really nice package, and then after that comes actions. Comment, open link, it gives you the name of the link, see full post, plus one post, navigate to Manju Mahadevan profile, reshare, double tap to activate. And it’s cool. All of that information is wrapped into one bubble, which is useful.
A Google+ Post, The Bad (Hiding Active Controls from AT) [3:58]
That being said, it’s really hard to digest that much information at once, especially when the last thing that you get about this information is the actions and the fact that it can be activated. And a blind user coming back to this will be used to that. And then, again, we activate it and we have all these actions there. That’s great. It’s cool. It’s good to have that information wrapped together, it’s good to associate all of those things together, but what we lose here, now let’s talk about all of the things that we’ve lost.
it’s really hard to digest that much information at once
Because we’ve lost the ability to do a lot of things. Let’s say that I am a sided Talkback user. That I use Talkback just for the sake of having it reading things out to me because I have difficulty reading. Or maybe my vision is such that I can see things on the page, I can see controls, but I can’t interact with them. Notice where I’m touching here. This touch target. I’m trying to focus this comment button right here and I cannot. I’m trying to focus this share thing here and I cannot. I’m trying to focus this plus one and I can’t focus. There are actionable controls on here that Talkback can’t focus.
There are actionable controls on here that Talkback can’t focus.
Now, one of the things that I said was maybe from a blind Talkback user’s point of view, this is accessible. Maybe collecting all of this information is important. The fact that there are controls here, the fact that there are separate controls here and that I can normally focus them individually, that in itself presents information.
The fact that there are separate controls …. in itself presents information.
Structure IS Information [5:23]
When we wrap all of this together and put this big focus rectangle around this entire blob of information, I have lost content because structure is information. And forcing this one big focus on a blob is hiding information from the user. There are better ways to group controls. Things like the label for attribute. Things like saying … imagine if I could go through this real quick, swipe, and focus this individual controls, and say plus one for this post title. And comment on this post title. And share this post title individually, instead of wrapping them all in this big blob of information.
There are better ways to group (and associate) controls.
Inclusive Design [6:05]
Because this big blob of information, like I said, this isn’t about … accessibility isn’t about creating things specifically for blind Talkback users. And the motivation there is good, but it’s about inclusive design. Now, let’s talk about the other bad things that this design idiom does. Let’s say that you’re a Braille board user, and you come to this control, and you’re looking at this, and you’re trying to digest all of this information at once.
Accessibility isn’t about creating things specifically for blind Talkback users.
By grouping all of this things and not allowing all of these controls to be separately focusable. What you’ve done is you forced the Braille board user to consume a very, very large chunk of content. Not only that, but I would argue that the actions, and the shares, and the fact that you can comment, and the fact that this thing is actionable, I would argue that that’s actually the important information here. The fact that we can go in and you can plus one a post, you can comment on the post, you can see those comments. That’s the important information and that’s shared last in this design idiom, which for a Braille board user, or even a blind Talkback user waiting for that feedback is going to be a frustrating user experience, whereas if you can just swipe through real quick and see, “Oh, this share has 54 plus ones, I’ll go back and check it out,” that is the more important information here. And with that not being available separately, it takes a long time to get to that important information.
That’s the important information and that’s shared last in this design idiom
And as I said before, structure and the separation of controls is actually information in itself. And that information is just completely lost in this design pattern to any user, whether it’d be a sighted Talkback user who’s attempting to activate these controls separately or a blind Talkback user who doesn’t know that there are separate controls on this page.
structure and the separation of controls is actually information in itself
Anyway, that is all that I had to say about it. If you have any questions about what I believe the better pattern for this would be, or how to implement that, feel free to ask them in the comments, and thank you for listening.