Is `menu` the proper ARIA role for a group of action buttons, even if you don't intend on creating a Windows-style menu bar?

userwXX3 0
Viewed 10

I have an application that displays a list of items. Each item has a cluster of action buttons visible: Move, Copy, Delete.

I originally put this in a <nav>, but I don't think that's right: These aren't links; we're not navigating anywhere.

I looked at the menu and menubar roles, but those seem specifically tailored to the kind of menu that has horizontal and vertical navigation to dropdowns and submenus. The docs on the menu role seem to require keyboard nav and a bunch of considerations that aren't necessary for a few buttons.

Is it fine to just use menu and menuitem and call it complete? Or should I move on from that and use something like region instead?

wai-aria html
1 Answers

Only use menu related roles if you're going to support left/right arrow key navigation.

If you have a "toolbar" of buttons and there are a lot of buttons, then it can be helpful if the toolbar is only one tab stop so that the user can easily navigate past the toolbar to the rest of the page. When doing so, navigating between the buttons within the toolbar requires the left/right arrow keys. Follow the toolbar design pattern if you go that approach. But you only have 3 buttons so a toolbar might be overkill.

It sounds like you have a group of buttons that don't necessarily need to be a toolbar. They're just grouped together. I agree that <nav> is not appropriate because the buttons are not for navigation. Is there a visible label grouping the buttons together? If so, then that group label would be helpful to convey to assistive technology users such as screen reader users. In that case, a region would be good as long as it has a label pointing to the group label.

So if you had something like this:

<span>Actions</span>
<button>Move</button>
<button>Copy</button>
<button>Delete</button>

I would

  • change the <span> to a heading and give it an ID
  • add a container (<div>) around the buttons and give it a region role and an aria-labelledby pointing to the heading
<h3 id="foo">Actions</h3>
<div role="region" aria-labelledby="foo">
  <button>Move</button>
  <button>Copy</button>
  <button>Delete</button>
</div>
slugolicious0
Related