Accessibility of column visibility button and menu

LeeA

I'm evaluating the accessibilty of DataTables for a project and I'm almost on-board, but the column visiblity menu control is an issue due to not conforming to the latest ARIA 1.1 authoring practices for menus. I want to help make your widget accessible for all users so I've listed what's done right and what needs work.

The good:
* Column visibility button utilizes the "aria-haspopup" attribute to indicate that a menu is attached.
* Menu container has the appropriate "menu" role.
* Keyboard focus returns to the column visibility button when closing menu with Esc key.

The bad:
* Column visibility button is missing the "aria-expanded" attribute.
* Menu item buttons are missing the role="menuitem" attribute.
* Menu item buttons should not be placed in tab order.
* Keyboard focus not set to the first menu item/button when the menu is opened.
* Menu displayed in what visibly appears as a modal dialog, but does not have dialog structure or expected keyboard interactions which is confusing from keyboard-only user perspective.

I suggest that the DataTables dev team take a look at the code examples from the W3C and from Heydon Pickering's Inclusive Components to ensure that the all users can interact with the column visibility menu.

Keep up the great work!

allan

Thank you for this! I'll look into it for the next release of Buttons.

Allan

allan

i'm circling back to this now - I don't quite understand this point:

Menu item buttons should not be placed in tab order.

What order would they be in then?

does not have dialog structure or expected keyboard interactions

What keyboard interactions would you expect here? Tab and return can be used to move focus and escape to close the "menu".

The first two points have been addressed in the latest dev code.

Thanks,
Allan