Opened 5 years ago

Last modified 5 years ago

#9629 open bug

Button: checkboxes get duplicate announcements on screen readers

Reported by: dylanb Owned by:
Priority: minor Milestone: none
Component: ui.button Version: 1.10.3
Keywords: a11y Cc:
Blocked by: Blocking:


When using DOM navigation, both the button and the checkbox for each element are available to the screen reader, leading to confusion as to what is going on.

Best approach to fixing these would be to get rid of the fake button role and set aria-hidden="true" on these visible elements to take them out of the screen reader's visibility

Change History (2)

comment:1 Changed 5 years ago by tj.vantoll

Keywords: a11y added
Status: newopen
Summary: UI button: checkboxes not screen reader accessibleButton: checkboxes get duplicate announcements on screen readers

comment:2 Changed 5 years ago by dylanb

Actually, I am going to revise my recommendation here based on the fact that the element in question is the label of the checkbox. You cannot set it to aria-hidden="true", you will either have to hide the input elements and implement role=checkbox and associated attributes on the label elements and track the status in the hidden inputs, or you will have to simply leave the labels as label elements and allow the user to continue to interact with the checkboxes

Note: See TracTickets for help on using tickets.