2

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.

enter image description here,

  • 3
    Split button has two functions, A is primary and B is secondary. To make it accessible, I'd choose your (b) option – Alexey Kolchenko Apr 22 '15 at 11:18
  • Enter could perform the action of the split button (A) and F4 / open the dropdown/menu. In Microsoft Ribbons, A+B are highlighted and Enter opens it, apparently with no key to repeat the last action (=click on A). – CoDEmanX Apr 22 '15 at 13:27
  • Thanks @AlexeyKolchenko, I finalized to go for an option "b" – Pradeep Apr 24 '15 at 5:21
2

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.

1

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:

Three button that are grouped - so no space between them

From a functional perspective, these are clearly 3 buttons; yet visually they are strongly grouped.

  • In your example it makes sense, because they are all buttons. But the question is about a button and dropdown menu, where the last extends the functionality of the first. When the button gets focus first, people can forget about the other options they have. – jazZRo Apr 23 '15 at 7:21
0

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.

enter image description here

C. Only A gets Focused.

  • That is exactly the problem, it is not one button, there are actually two controls which are only visually linked and can contain different actions. How can you reach the button now? I agree that it should be either one control or two separate ones, but that’s beyond the scope of this question. – jazZRo Apr 22 '15 at 13:55
  • 1
    I don't think that is correct, because the primary segment is usually a clickable button (otherwise one would just use a conventional dropdown). So the user expects that hitting Enter will depress the button rather than activate a dropdown. @Izhaki is correct to point out that because the button and the dropdown perform different but related functions (i.e. they aren't substitutes for each other), the correct answer is to tab to each segment in order. – tohster Apr 22 '15 at 21:10
  • primary area has an action to do but if the user uses keyboard, and hits 'enter' it should provide the options available and not execute. Allow the user to choose then what to execute. – pzv Apr 23 '15 at 4:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.