react-places-autocomplete
react-places-autocomplete copied to clipboard
hibiken
👂 Accessibility for screenreaders
I was testing this component with a screenreader and found a couple issues with the display of the autocomplete suggestions. When listening to the screenreader there is no way to know that a dropdown with suggestions has appeared as you type into the input.
Consider these two fairly simple options.
Option 1: provide a visually-hidden <span> that says to arrow down for autocomplete suggestions
<span class="visually-hidden" id="autocomplete-description">Arrow down for autocomplete suggestions</span>
<div aria-describedby="autocomplete-description" id="PlacesAutocomplete__autocomplete-container ... />
or Option 2: add the aria-live="polite" attribute so the screenreader will automatically start reading the suggestions as you type into the input.
<div aria-live="polite" id="PlacesAutocomplete__autocomplete-container ... >
I have tested both options with a screenreader and both work nicely to add a bit more accessibility to the autocomplete. If you like any of these suggestions I'd be happy to make a PR. 😁
Side note: I also noticed that the input has no <label> which is an accessibility requirement. This one isn't so much of an issue, as the developer using the component can easily add a <label> and the inputId={...} prop, but could also be solved by including a aria-label attribute by default.
@bvellek Great issue! Thank you for testing it out for SR. Both options sound good, which do you think is more friendly for users with screenreaders? I would love a PR for this issue @bvellek if you have time to work on it 👍
@kenny-hibino Great! I am going to reach out to the a11y community to make sure I choose the best solution, then I will submit a PR.
Hey @kenny-hibino sorry for the delay. I reached out to the a11y community and was able to get the opinion of a few frequent users of screen readers. They recommended going with the first option to add a descriptive <span> so non-sighted users know they can arrow down as they type to see suggestions. In order to hide the span visually, I added the styles from http://a11yproject.com/posts/how-to-hide-content/ . I submitted a PR. Let me know if you have any questions or want to make any changes 😁
@bvellek Thank you so much. I just left a comment in your PR. Please take a look 👍
@kenny-hibino made some changes! let me know if that works for you or if you would like me to change anything else.
Was there a reason why the above PR wasn't implemented (assuming that's the case because of the issue status)? Just ran into the same issue today, curious more than anything else.
hey @Alastair-smith2 , I am not sure why this was never merged. I gather things have changed a bit since this was originally submitted and will likely need to be rebased and adjusted.
@hibiken could you tell us why you never merged this ? It'd be nice to have !
@bvellek would you be willing to update the PR? I would review and merge it.
