0

Hi :) I would like to ask you about how to treat elements that compose a list, but whom have assiged a button role and are put in side panel ( so it is not a menu or dropdown). My main problem is how to decide is to where ARROWS should works and where TAB. Moreover I have a differ types of list items that consist of:

  • checkbox/ radiobutton only
  • checkbox/ radiobutton with a link to another panel
  • two icons/ buttons that has defined an activities etc.

Please look at pictures and help me please :)

PINK - "arrows"

BLUE - "TAB"key

enter image description here enter image description here enter image description here enter image description here

1 Answers1

0

You should hardly decide which component will use TAB key or Arrow Keys. Keyboard accessibility for a large number of components is already defined in WAI-ARIA Authoring Practices.

Adding a different behavior could create issues to both sighted, and non-sighted users because they'll already be knowing which key to use based on the component or they'll know intuitively because of standard roles or they'll know as they use keyboard more to browse.

Offer List

Listbox will work. Arrow Keys to navigate and Enter key to perform the action.

List of Checkboxes and Radio Buttons

I would recommend to keep Checkboxes and Radio Buttons to their default keyboard behavior. Since your cases are more of a list, you can convert the list of checkboxes and radio buttons to Single Select and Multi Select Listboxes and use Checkbox and Radio Button as a font icon or graphic to show the selection, similar to how tick is shown in this Listbox example. When you convert to a Listbox, you'll meet the Arrow Keys requirement.

Selected Fruits List

There are some issues in the required keyboard behavior: How will user know if Arrow-Left or Arrow-Right need to be presed, think about non-sighted users.

Fruit Name and i icon button

In your need, you want both Fruit Name and i icon button to open a panel, suggest to NOT use Arrow-Right to i icon button and only use the Enter key to open the panel. May be you don't need i icon button at all.

Delete icon button

Suggest to use DEL key to delete the item

Conclusion

  • Remove i icon button. If you can't just keep it as graphic element without any events
  • Use Enter key to open the panel
  • Use DEL key to delete the item
  • I think the whole list will then become a listbox, navigable using Arrow Keys and Enter to invoke an operation

Vegetables List

Neither Accordion nor Nested List works here because you have two actions to do: Make a selection, and Expand and Collapse. I haven't tried TreeView but you can check.

Ritesh Jagga
  • 1,387
  • 1
  • 11
  • 23