Make search bar and results more accessible #255
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Added information on how to navigate to results in the aria-label attribute on the search bar Added a new field to English internationalization with instructions on how to navigate to search results. This field will appear via the aria-label to screen reader users. Added an enclosing div informing screen readers to update when the search results populate. Signed-off-by: Patrick Smyth <[email protected]>
✅ Deploy Preview for docssigstore ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
Made label instructing how to access search results less verbose Signed-off-by: Patrick Smyth <[email protected]>
Signed-off-by: Patrick Smyth <[email protected]>
After testing, we found it better to include the word search. Signed-off-by: Patrick Smyth <[email protected]>
Signed-off-by: Patrick Smyth <[email protected]>
|
@ltagliaferri , this PR adds an aria-live region to the search bar, meaning that search results are read out loud when a screen reader user types in the bar. In addition, a short note with information on navigating to the results has been included as a label. You won't perceive any changes on this PR without using a screen reader like NVDA or VoiceOver. This is ready to merge when you have a chance, thank you! |
ltagliaferri
approved these changes
Oct 16, 2023
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Changes
Added information on how to navigate to results in the aria-label attribute on the search bar
Added a new field to English internationalization with instructions on how to navigate to search results. This field will appear via the aria-label to screen reader users.
Added an enclosing div informing screen readers to update when the search results populate.
Notes
Resolves #254
Creating this issue as a draft for testing with other devices.