Fix fallback logo so Chrome will not flag it to screen readers #1724
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
role="none"/"presentational" does not do enough to hide the child fallback image used from browsers. We have found that Chrome's new "Get image descriptions from Google" feature will notice this fallback image. This means when screenreaders such as NVDA visit the logo, it'll announce "Unlabelled graphic, To get missing image descriptions, open the context menu." for this fallback image. By using aria-hidden="true" we can ensure that the SVG and it's children are all hidden from the accessibility tree, which I have confirmed in NVDA + Chrome. - [Get image descriptions on Chrome](https://support.google.com/chrome/answer/9311597?hl=en) - [The Difference Between role=”presentation” and aria-hidden=”true”](https://timwright.org/blog/2016/11/19/difference-rolepresentation-aria-hiddentrue/)
Where possible we should use aria-hidden="true" instead of role="none"/"presentation", this is mainly for consistency with the header component where aria-hidden="true" ensures child elements are hidden as well which is not a problem with the button and footer component. - [The Difference Between role=”presentation” and aria-hidden=”true” ](https://timwright.org/blog/2016/11/19/difference-rolepresentation-aria-hiddentrue/)
zoetrope69
approved these changes
Feb 5, 2020
|
Makes sense to me, thanks Nick 👏 How confident are you that this will work consistently everywhere? Do you think we need to test this change across all of the assistive technologies we support? |
|
@36degrees I have not done a full run through testing with all assistive technologies and browsers as I have confidence that this aria attribute has very broad support and we use it elsewhere (for example the accordion component). I can do some testing soon to double check. |
|
@36degrees I've tested this in JAWS, NVDA in Edge, Chrome, IE11, Firefox and VoiceOver in Safari and it dont hear any icons being announced when tabbing to the GOV.UK link in the header. |
|
If you're confident with the changes to the other components as well then I think this is good to merge 👍 |
36degrees
approved these changes
Feb 10, 2020
|
@36degrees I also tested the start link button |
NickColley
deleted the
fix-fallback-logo-being-detected-by-chromes-image-description-feature
branch
|
Needs a changelog entry, will follow up. |
NickColley
added a commit
that referenced
this pull request
Feb 10, 2020
NickColley
added a commit
that referenced
this pull request
Feb 10, 2020
Add CHANGELOG entry for #1724
Merged
andymantell
added a commit
to surevine/govuk-react-jsx
that referenced
this pull request
Mar 6, 2020
36degrees
added a commit
to alphagov/govuk-design-system
that referenced
this pull request
May 14, 2020
The markup for the header was changed in alphagov/govuk-frontend#1724: > role="none"/"presentational" does not do enough to hide the child fallback image used in older browsers. > > We have found that Chrome's new "Get image descriptions from Google" feature will notice this fallback image. > > This means when screenreaders such as NVDA visit the logo, it'll announce "Unlabelled graphic, To get missing image descriptions, open the context menu." for this fallback image. > > By using aria-hidden="true" we can ensure that the SVG and it's children are all hidden from the accessibility tree, which I have confirmed in NVDA + Chrome. This change went out as part of GOV.UK Frontend v3.6.0. It was missed when updating the Design System to use v3.6.0 in #1187 (it's a non-breaking change, as the existing markup works fine – this is just an improvement)
vanitabarrett
changed the title
Merged
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.
role="none"/"presentational" does not do enough to hide the child fallback image used in older browsers.
We have found that Chrome's new "Get image descriptions from Google" feature will notice this fallback image.
This means when screenreaders such as NVDA visit the logo, it'll announce "Unlabelled graphic, To get missing image descriptions, open the context menu." for this fallback image.
By using aria-hidden="true" we can ensure that the SVG and it's children are all hidden from the accessibility tree, which I have confirmed in NVDA + Chrome.
I have also made this change to the other places we're using role="presentation" in this way for consistency.
Closes #1636