Tab to whole item group or button within item group?

Question

This is my first post in User Experience, so hopefully this is the right place for my question. It's a question there may not be a definitive answer to, but hopefully someone might be able to help shed a light on it for me.

I'm creating an appointment booking checkout for healthcare practitioners. The first step for the user in this checkout is to select a location, if the healthcare service has multiple locations in the system.

Here's a quick mockup of the page:

On the mockup, there are three location items (outlined in green). The information on these location items may eventually include the service name, address, map, a bit of paragraph text and a proceed button. But for now, the mockup includes just a block of text and a proceed button (the orange square).

Visitors who use pointers or fingers will be able to select a location by clicking or touching anywhere within the bounds of the green border (i.e. the whole item).

My question is, how do I approach the tabbing for keyboard users? After tabbing past the content of the header, would a keyboard user expect that tabbing will:

1. focus on the whole item (with the green border).
2. Or, focus on the proceed button (the orange square), within the item.

I've played with Voiceover on Mac and experimented with both ways. The first version is closer in behaviour to the pointer/touch behaviour, but it may not be clear that the group item is selectable.

The second version seems like what you would expect from a tab - to jump the user to an interaction area, but it feels a bit odd to be dumped in the middle of the item group without much context other that the value of the button.

Advice would be much appreciated, especially from experienced keyboard users!

Answer 1

For keyboard navigation it would be more intuitively to tab among the proceed buttons. Focusing on an item probably would be a bit confusing. An item perceived as grouping unit which includes proceed button as single action controls. Nothing visually indicates keyboard responce of item, even focus frame over flat item will not guarantee right interpretation. Wanting to proceed an item user will hunt for proceed button, but next tab clicking will move focus to the next item.

If you want to lead user's attention to the whole item which contains focused proceed button, you just could highlight it slightly to indicate its "active" state.

Answer 2

It largely depends on the information in the boxes.

If there are "links" in it that can take you to different places for the location in which they appear (ie edit location details, show appointments for that location), then I would expect tabbing to take me to each of those in each location box.

If there is just text and an image and the image would take me to the same destination as the entire location box would, then I would ensure that tabbing to a location makes clear that this location is selected and would ensure that the image doesn't appear in the tab order.