Clarity on accessible name of checkboxes in a list #4190
Replies: 1 comment 1 reply
-
Looking at the example on the page https://sap.github.io/ui5-webcomponents-react/iframe.html?args=mode:MultiSelect&id=data-display-list--default&viewMode=story, I can see several problems: The checkboxes are not linked to their visual label, but all have the same accessible name. This is a violation of at least 3 WCAG criteria (SC 1.3.1, 2.5.3 and 2.4.6). However, I find the misleading nature of the role and operation of the element much more problematic, which in my opinion is a violation of SC 4.1.2 and 2.1.1: The checkboxes do not receive focus with TAB key. Instead, list entries receive the focus, but they are not marked as control elements (but only with role=list, role=listitem). The operation therefore corresponds to a selection list, which must then be marked with role=listbox and role=option and may not contain any checkboxes. See: https://www.w3.org/WAI/ARIA/apg/patterns/listbox/ |
Beta Was this translation helpful? Give feedback.
-
The code displays a list including checkboxes. The aria-labelledby for all checkboxes point to the same invisible text "__text0" "Item Selection". The accessible names of the checkboxes are not referring to "Maria/Petra".
Would you provide information if the code is a hard violation of accessible names usage or another requirement?
Related: SAP/ui5-webcomponents#6861
Beta Was this translation helpful? Give feedback.
All reactions