Critical accessibility issues: aria roles and aria-label
See original GitHub issueWhen running the Axe accessibility tester against the react-select v2 code-sandbox, two critical issues are identified:
- Form elements must have labels. While you can pass
aria-label
as a prop to theSelect
component, it is not assigned as an attribute to the#react-select-2-input
HTML element. Adding this attribute satisfies the Axe tester. - Certain ARIA roles must be contained by particular parents. Each
.select__option
hasrole="option"
; however, the parent div.select__menu-list
does not haverole="listbox"
. Adding this attribute satisfies the Axe tester. Note that I had to use React Developer Tools to setmenuIsOpen
on theStateManager
to see this violation.
Below are screenshots of the Axe test results.
Issue Analytics
- State:
- Created 5 years ago
- Comments:24
Top Results From Across the Web
ARIA Techniques for WCAG 2.0 - W3C
To improve accessibility, WAI-ARIA provides Web developers with the option to ... WAI-ARIA map WAI-ARIA roles and properties to platform accessibility APIs.
Read more >Using ARIA: Roles, states, and properties - MDN Web Docs
ARIA defines semantics that can be applied to elements, with these divided into roles (defining a type of user interface element) and states ......
Read more >ARIA Made Easy | IT Accessibility - University of Arizona
WAI-ARIA addresses these accessibility challenges, for example, by defining new ways ... ARIA defines these roles for easier navigation by screen readers:.
Read more >Elements must only use allowed ARIA attributes | Axe Rules
Find and fix up to 80% of accessibility issues with axe DevTools Pro. ... ARIA explicitly defines which attributes are allowed for any...
Read more >Introduction to ARIA - Accessible Rich Internet Applications
If an ARIA role is added to the <ul> —for example, ... accessible name defined using aria-label or aria-labelledby (e.g., <div role="region" ...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
For anyone else who stumbles upon this thread and is looking for a temporary fix… You can add an accessible label to the input by wrapping the component in a
<label>
element. This will work with screen readers and VoiceOver.Issue should be reopened.
aria-label
isn’t applied ifisSearchable
is set tofalse
.The input reported by Axe is
<input id="react-select-2-input" readonly="" tabindex="0" class="css-gj7qu5-dummyInput" value="">
@bmsuseluda You should actually be using hyphen cased syntax for aria attributes but that is not the issue here –
aria-label
doesn’t work either.