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:
- focus on the whole item (with the green border).
- 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!