USWDS - Banner: Create clearer readout with aria #4925
Merged
Conversation
This file contains hidden or 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
2 tasks
mejiaj
reviewed
Sep 9, 2022
| @@ -1,8 +1,8 @@ | |||
| {% set lock %} | |||
| <span class="icon-lock"> | |||
| <svg xmlns="http://www.w3.org/2000/svg" width="52" height="64" viewBox="0 0 52 64" class="usa-banner__lock-image" role="img" aria-labelledby="banner-lock-title banner-lock-description" focusable="false"> | |||
| <svg xmlns="http://www.w3.org/2000/svg" width="52" height="64" viewBox="0 0 52 64" class="usa-banner__lock-image" role="img" aria-labelledby="banner-lock-description" focusable="false"> | |||
There was a problem hiding this comment.
Just to be sure this used to be described by both the title banner-lock-title and banner-lock-description.
Is this change to only have it described by the description intentional?
There was a problem hiding this comment.
Yes, this was intentional. On VoiceOver, the readout was "A lock ( Lock Locked padlock", so I simplified it by removing the reference to the title. Now that you bring it up, it might be better to just move the description content into the title field and then reference that. Objections?
There was a problem hiding this comment.
No, just double-checking. Thanks!
mejiaj
approved these changes
Sep 9, 2022
3 tasks
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.
Summary
Updated the aria-label in English versions of usa-banner. When read out on a screen reader, the statement "An official website of the United States government" can sound like "Unofficial website of the United States government". To minimize confusion, we updated the component's aria-label to instead read "Official website of the United States government".
Added
aria-hiddenattribute to the flag icon in the banner component. The flag icon in the banner component is purely decorative and we can safely remove it from the screen reader readout.Related issue
This PR addresses two issues related to the banner screen reader experience:
Closes #4419
Closes #4912
Preview link
Preview link: Banner component
Problem statement
Solution
Updating the aria-label gives us the ability to reduce confusion for those using screen readers without creating inconsistency in the visual presentation. Additionally, updating the aria for the icons in this component creates a simpler, clearer readout for screen readers.
Note: I did not hide the lock icon from the readout because I ruled that it added important context: an explanation that "A lock" means a lock icon. However, I did clarify the readout from "Lock, a locked padlock, image" to "Locked padlock icon, image" (on VoiceOver). Flagging this because it could be determined that this icon is decorative as well.
Testing and review
This component was tested on:
Please test on your available screen readers to confirm that the content is accessible and the experience is optimized.
Before opening this PR, make sure you’ve done whichever of these applies to you:
git pull origin [base branch]to pull in the most recent updates from your base and check for merge conflicts. (Often, the base branch isdevelop).npm testand confirm that all tests pass.