USWDS - Identifier: Update "An official website" screen reader text #5491
Conversation
There was a problem hiding this comment.
Lgtm! I like the direction you took with the fix!
- Sounds great with VoiceOver across browsers
- Spanish variant is unexpected
If we include a guidance update as to why we left it out, we can maybe add instructions to consider all languages used by the site and to reduce confusion for screen reader users where possible
|
Have we discussed the possibility of removing it all together so that it's |
|
We have discussed changes to the boilerplate, but banner language is a big question that we'll need to address comprehensively and consistently. I do think we'll want to ask this question, and build evidence toward a better solution, but I also think we'll want to leave the discussion until after the Web Components version is out so we can consider the implementation angle at the same time. |
|
@thisisdano Does this mean that you want to leave the visible text as is and leave this as a screen reader-only fix for now? cc: @mejiaj |
There was a problem hiding this comment.
Code looks good, I compared component to Identifier on develop storybookJS.
Summary
Updated the screen reader readout to say "Official" instead of "An official". When read out on a screen reader, the statement "An official website of [Agency name]" can sound like "UNofficial website of [Agency name]". To minimize confusion, we hid the word "An" from screen readers with
aria-hidden.Breaking change
In English versions of the identifier component, users should update their markup to hide the word "An" from screen readers by wrapping the word in a span with an
aria-hiddenattribute.Before
After
Related issue
Closes #5362
Related pull requests
Changelog PR
Preview link
Problem statement
When read out on a screen reader, the statement "An official website of the [Agency name]" can sound like "UNofficial website of [Agency name]".
Solution
To minimize the impact on visual presentation, we created a screen reader-only solution that hides "An" from the readout. Instead the screen reader will now read out "official website of the [Agency name]".
Testing and review