Mahtab: Welcome to episode 20 of The Crux of It. I am Mahtab Rezai, I am the Principal and CEO of Crux Collaborative. We are a User Experience Consulting firm specializing in regulated industries. Today, I'm joined by my colleague Annette Gustafson. Hi Annette.

Annette: Hello.

Mahtab: So we are going to go into some next-level nerd territory today and talk a little bit about keyboard-only accessibility. Exciting stuff. Recently, we redesigned our own website and in the process of doing that, and in collaborating together on balancing user experience and visual design and thinking about accessibility, we learned quite a bit. Both of us.

Annette: We did.

Mahtab: One of the things that was an area of learning that was new to both of us was around keyboard-only accessibility. How it started was our developer initially presented a design solution that we both had a really negative reaction to from how it looked visually. And we were like, why is this here? It doesn't look right. It looks like an error. He was like, it's an accessibility requirement and once we dug in, we really learned a lot about focus accessibility and what it is.

Annette: Yeah. It met the needs of accessibility but you and I both had this reaction. Full disclosure, we've been at this industry for 20 years so we had a flashback of - you remember back in the day when you had that dotted border around things that you click? So it brought us back to that old time of like, what's going on here?

Mahtab: It felt like a really old website and sort of like, is this an error? I kept thinking it was a coding error of some kind. But before we get to further into that, let's talk a little bit quickly about accessibility design and what that means. So how would you define accessibility?

Annette: When you design for accessibility, it really means you're designing for all people. You want to make it accessible to all people. So that's making sure that the user can navigate through the content, clearly read the content, making sure you have contrast. Being mindful of all those things. That's both the visual components as well as the techie backend stuff.

Mahtab: Absolutely. So you need to ensure that whether someone is using a standard input device like a mouse or keyboard or whether they're using something to assist them like a screen reader, magnification software, speech recognition software- that they can interact with your site.

Annette: Yes. They can use the site.

Mahtab: One of the ways that people interact with sites is by not using a mouse at all, by using keyboards only.

Annette: How does that user navigate the site? First, let's talk about what the typical user may be that is a keyboard only user. You'd be surprised. More people than you think are controlling navigation via the keyboard.

Some users that we can think of are users that may have tremors, they don't have that fine muscle control of their hand, so it'd be very difficult to use the mouse. This is common in the condition like Parkinson's.

You can also think of the elderly population, limited dexterity. When you have arthritis in your hands, your fingers don't move, it'd be very hard to grip a mouse and have that fine control when you're navigating through a site.

So it's much easier to use a keyboard. Alternately to using a mouse when you're moving around and clicking on things, how does the user navigate via the keyboard? They're using the tab key.

Mahtab: Yes. So you need to really be aware of how you're designing the site so as to not cause hardship or issues for them to make their way through the site to the information that they need.

Some of the most common issues and things that can go wrong are your navigation becomes too lengthy and just impossible to get through. The order of your navigation is poorly thought-out, doesn't make sense, makes it confusing. Or what we're going to talk about is focus indicators: you don't have them or they're poorly executed.

Annette: How is the user going to know where they are as they're tabbing through?

Mahtab: Let's talk about that. You just did a really good job of defining it, is as they're tabbing through, what's telling them about where they are? And that visual cue, that's the focus indicator.

Annette: Yes.

Mahtab: As you're tabbing.

Annette: Just as a point of clarification, what they are tabbing through is the interactive elements of the site. So it helps them navigate through the navigation, the menu at the top, links, buttons, things like expandable menus, accordions and then input fields.

Mahtab: Yes. And when we say interactive elements by that also in addition to defining all the ones you did is think anything that they could then hit the enter key and it would take them somewhere.

Annette: Yep.

Mahtab: So it's not just taking them from visual element to visual element, it's actually the things that help them move to the next place.

Annette: Yep. It's in lieu of that mouse click that helps them advance. It's a tab enter to navigate.

Mahtab: Yes. So sighted users who are doing this are going to be given a visual indicator and that's the focus element. So let's talk about how we create that focus element. So this was something that we learned.

We didn't realize that by default, a browser actually shows a focus state and the default focus state is an outline around an object that is keyboard focusable. So like a link or navigation element. But the reason we didn't know that is because it's apparently very popular to override it.

Annette: Yes. It's very common to override it and you're overriding this in the CSS file. So the main class that we're talking about here is the dot focus class. Often times when it is overwritten, it'll be outline = none or "outline:none" and then that causes the default state to go away. Then since you haven't specified a state, there is no visual cue to the users of what the focus state is.

Mahtab: So if you're looking on a website and you're tabbing and you're not seeing anything-

Annette: They overrode it!

Mahtab: If you went to view source, likelihood you'd see that, that outline is none.

Annette: So we wanted to dig a little deeper. So when we had first started QAing the site, going live with the site, we had a very chunky dark-gray outline around each of them. It met the needs of accessibility, which was fantastic, that was important. However,-

Mahtab: However, it was ugly.

Annette: It was ugly, right?

Mahtab: Yes.

Annette: So we feel that you can find a balance in both being visually appealing and meeting the needs of accessibility. So we dug a little deeper...

Mahtab: Just really exploring our options to see what can we do that both meets the need of clearly letting the user know their focus while not looking like an icky “you are here” arrow has been put -like slapped- on top of the design.

Annette: Yes. Where we ultimately landed was doing something actually pretty similar to what the default browser is and choosing that one because it's familiar to users, but then we also modified it to make it work best for our site.

So some of the things that we did do is we enlarged the size of that border, we made it have more weight, we also made sure that the color that we chose passed contrast, that's another important part of accessibility. Then we also chose to remain consistent. So you can do unique focus elements per the type of...

Mahtab: You could do a different focus element for navigation versus links, that type of thing and we just decided to go with one. And we talk about this all the time. So many of the things that you do with visual design is you're speaking a language and the user is learning that language when they learn your site. We talk about link language, they can expect that links always look the same or navigable elements look the same so that they know-

Annette: Or you select the color and they're cued into that color.

Mahtab: Yes. Similarly, we didn't want to now introduce five new words into the language in the first site but just have a single consistent one that says this is your focus area.

Annette: So we tested a full page that had multiple interactive elements and we did find when we use the unique element for each of them, your eye couldn't track properly. Even though we had a focus state, it was shifting and it was different. So ultimately going with a consistent one, it was very easy for the eye to track through all the different interactive elements on the page.

Mahtab: That was after, as Annette said, we've been doing this for a while. And after doing this for a while, it's both surprising and also really fun to find something new to learn.

Annette: Yeah, there's new challenges.

Mahtab: So that was a really fun one for us that we wanted to share that we really enjoyed digging into, learning about, playing around with, coming up with a solution for our site and really look forward to applying what we learned on our own site now to the experiences that we're designing.

Annette: Yes, absolutely.

Mahtab: So I think that is what we wanted to say about focus points and accessibility. So thank you for listening. You can subscribe or find us on SoundCloud, iTunes, Google Play, Stitcher as well as on our website,