search

hibiken / react-places-autocomplete

React component for Google Maps Places Autocomplete
https://hibiken.github.io/react-places-autocomplete/
MIT License
1.38k stars 388 forks source link

👂 Accessibility for screenreaders #64

Open bvellek opened 7 years ago

bvellek commented 7 years ago

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.

hibiken commented 7 years ago

@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 👍

bvellek commented 7 years ago

@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.

bvellek commented 7 years ago

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 😁

hibiken commented 7 years ago

@bvellek Thank you so much. I just left a comment in your PR. Please take a look 👍

bvellek commented 7 years ago

@kenny-hibino made some changes! let me know if that works for you or if you would like me to change anything else.

Alastair-smith2 commented 6 years ago

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.

bvellek commented 6 years ago

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.

theophanemayaud commented 6 years ago

@hibiken could you tell us why you never merged this ? It'd be nice to have !

sambokai commented 4 years ago

@bvellek would you be willing to update the PR? I would review and merge it.