What will be the action if the "Tab" key is focused on the split button?
a. both the "A" & "B" gets focused.
b. "A" gets focused first and "B" get focused on next "Tab".
c. only the "A" get focused.
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.Sign up to join this community
The problem with the "split button" is that it is not just one control but that it is presented as one. I've seen people pressing the button while expecting opening the menu.
Since they are seperate controls my first impression was to focus on A when pressing the tab key, and focus on B when pressing tab again. But I agree with @AlexeyKolchenko that it should be accessible. The first tab should focus on B and the second on A. It prevents people from pressing the button while they want the menu.
WCAG guideline 2.1 (Compliance level A - highest) states:
Make all functionality available from a keyboard.
If the function of the button and the dropdown trigger is different, users must be able to access both.
So first "A" then "B" is the answer.
Then comes guideline 2.4.7 which state that each should have its own focus indicator.
I think your problem is that you think presentation first. Consider the following interface:
From a functional perspective, these are clearly 3 buttons; yet visually they are strongly grouped.
Actually it should be "C"
Reason: When you hit the Tab button the focus should be on the Primary Area, as mentioned by Alexey as well.
But the focus should shift to another button on hitting Tab again and not on the secondary area. There is no need for focus to go on Secondary area.
Because when the focus is on Primary, hitting ENTER should display the options under this bringing down the list and using arrow keys user selects.
C. Only A gets Focused.