VivianaMar 8
Can I please have some opinions from accessibility experts / screen reader users?
We have a button with a dropdown list to perform actions (publish, unpublish, etc.) on selected items. The button is disabled when no items are selected. What is correct: disabled or aria-disabled? If aria-disabled, do we need to put more information on the button apart from the name "actions"?
I have already read some explanations, but I'm still unsure.
#accessibility #a11y #ScreenReader
Show threadtechsimplifiedMar 8
@viviana For screen reader users, a button with a dropdown should use aria-expanded and aria-haspopup. The menu items need role="menuitem" and keyboard navigation (arrow keys to move, Escape to close). The button label should hint at the action, not just say "Options". Common pattern that trips up a lot of implementations!
Show threadViviana
@techsimplified The button is not a menu item, it is a button on a toolbar. aria-expanded and aria-haspopup are already present. My question is about putting the disabled button on the tab order or not.
Mar 8 at 2:55pmWeb
Show threadtechsimplifiedMar 8
@viviana For disabled buttons on a toolbar — keep it in the tab order. Screen reader users need to know the button exists even when it's unavailable, otherwise they won't know the feature is there at all. Use aria-disabled="true" instead of the disabled attribute so it stays focusable. Then announce why it's disabled via aria-describedby.
Show threadtechsimplifiedMar 8
@viviana For disabled toolbar buttons, keeping them in tab order with proper aria-disabled="true" helps screen readers understand the UI state. Users can discover what would be available and why it's currently disabled. Good accessibility thinking! 👍