Consider adding practice/pattern for split buttons that have action and menu

[mraccess77]

There does not seem to be a standard approach for split buttons and it would be good to have an official pattern for it. Split buttons have an action and a drop down menu.

[mcking65]

Can you point to examples of good, accessible split buttons on any platform?

I think we have previously discussed them, and could not figure out how to solve basic problems, especially related to accessibility with touch screen readers. Of course, that is true for a lot of patterns, e.g., tree and treegrid for instance. However, most such patterns tend to be utilized only on surfaces where desktop/laptop access is dominant. Buttons and selects tend to be used on all surfaces. So, if we were to develop a split button pattern, it seems important to have an approach that would work on any surface.

[mraccess77]

Mobile split button function is usually found with a press and hold equivalent. Press the New message button in Outlook mobile for a new email or press and hold for new items like events.

[mcking65]

@mraccess77 wrote:

Mobile split button function is usually found with a press and hold equivalent. Press the New message button in Outlook mobile for a new email or press and hold for new items like events.

Do you think that is an acceptable pattern for web? It means overriding the browser context menu.

[mraccess77]

Hi Matt, I would not want to use context menu - I was thinking on PC something like enter/space to activate and down arrow to open the menu. But there is no appetite for it.

[JAWS-test]

@mraccess77 I think it would be good to have such an example and would be in favour of leaving the issue open.

[JAWS-test]

I think there are several options:

• New ARIA role splitbutton (this role exists for native splitbuttons in UIA: https://docs.microsoft.com/en-us/windows/win32/winauto/uiauto-supportsplitbuttoncontroltype, I don't know if it exists in other APIs).
• Use aria-rolesdescription to compensate for the lack of ARIA role splitbutton.
• Implementation as before, when native splitbuttons are transformed to web: 2 separate buttons (button and menu button) - whereas native ones consist of only one button

[aardrian]

I am using the split button in Windows 11 in Settings → Windows Update under More Options in Pause Updates for my feedback. I also tried equivalents in assorted MS Office 2021 applications (in the toolbar ribbon), which operate the same.

Looking at that implementation, both Space and Enter activate the button. The menu appears on F4. Arrow keys do nothing with the menu.

In JAWS 2022, NVDA 2021.1.3, and Narrator it announces as "split button" with no instructions for interaction. The keystrokes are the same as without the screen reader. There may be other keystrokes of course, but F4 is the only single-press keystroke I know to open the menu. Some expectations may exist based on whether the control is in a ribbon (toolbar?) or not.

All this out of the way, my suggestion for a prototype is a button followed by either a menu button and/or disclosure widget in a grouping context. At its simplest, a group role with aria-labelledby pointing at the group label (possibly from aria-label and including the words "split button") concatenated with the menu and/or button accName.

I suggest a disclosure widget pattern because in my experience, devs do not stick to platform rules for controls. They generally try to stuff more than menu items in menus.

I am not in favor of using aria-roledescription. Partly because of the localization challenges, partly because sometimes the given role is announced in addition, and partly because I expect it will be mis-used and leaves users stranded when that happens.