-
Notifications
You must be signed in to change notification settings - Fork 4.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Dropdown: accessibility problem (screen readers) #1834
Comments
@Sole-Valero PRs are welcome, will be glad to see your contributions 👍 |
Also please write why proposed behavior is correct, I'm not familiar with |
I'm on it (PR) |
In the Dropdown element, you use a div area to display the text corresponding to the selected item. If you don't use role='alert', screen readers don't notice when the text changes, so it doesn't read it again to the users...and users don't know which option is selected... |
An interesting article about accessibility and react: |
@Sole-Valero Thanks for clarification 👍 |
@layershifter I can't check my changes...I run $npm run docs , but it gives me :
My node version is v8.0.0 |
Seems that something has already listening your 8080 port. |
- patched an error. Forgotten '}'
- Dropdown.js->renderTex--> now always returns the text rendered with aria labels: role='alert' aria-live='polite'
* fix(Dropdown): accessibility problem (screen readers)(#1834) * fix(Dropdown): accessibility problem (screen readers)(#1834) - Dropdown.js --> coded added now is more simple. * fix(Dropdown): accessibility problem (screen readers)(#1834) - patched an error. Forgotten '}' * fix(Dropdown): accessibility problem (screen readers)(#1834) - Dropdown.js->renderTex--> now always returns the text rendered with aria labels: role='alert' aria-live='polite' * fix lint issue
@Sole-Valero -- we have a similar implementation with aria-live polite and role alert using 'semantic react,' but both screen readers (JAWS 18 and NVDA 2017) fail to speak the selected list item (see attached). Screen reader will only speak the label 'Search for cases by' because of the aria-labelledby reference, but not the selected item (Name, as shown in the screenshot). Do you have any suggestions to make the widget accessible? I am not sure using aria-live = polite and role = alert is an effective solution here. A few things might fix it:
If ARIA must be used and the look and feel needs to be preserved, we can do the following:
See a working example at https://codepen.io/devpant/pen/wpVPpL that works with screen readers. |
Why has this issue been closed? This is still a valid issue, I have written a Gist about it: https://gist.github.com/jutunen/d8c3948656f449cdb1da8addaac0c766 |
Hello there, Semantic UI Dropdown component still don't have aria-label and input component that is used for entering search query is not readed by screen reader, I have fixed it with this tricky implementation: |
Description
If you use Dropdown passing the items using options, it is keyboard accessible but with a screen reader the options are not read aloud as you move through them.
Steps
Reach a dropdowns with keyboard, and uses arrows keys to move through options
Expected Result
When you move through options, options are read aloud
Actual Result
Options are not read aloud
Version
0.70.0
Testcase
e.g. https://react.semantic-ui.com/modules/dropdown#dropdown-example-inline
Contribution
I can contribute patching it modifying the Semantic-UI-React/src/modules/Dropdown/Dropdown.js, in function renderText = () => (line 1028),
adding the following aria labels to the redered div (when className='text'):
role='alert' aria-live='polite'
The text was updated successfully, but these errors were encountered: