Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Icon fonts elements are announced to screen readers #1902

Open
davidrapson opened this issue Apr 6, 2022 · 0 comments
Open

Icon fonts elements are announced to screen readers #1902

davidrapson opened this issue Apr 6, 2022 · 0 comments
Labels
bug Something isn't working
Projects
💫 Bugs & Tech debt

Comments

@davidrapson
Copy link
Contributor

Summary of problem

A recent accessibility report highlighted that places where we still use the old icon font can cause issues with screen readers

Steps to replicate

This happens wherever there is an icon font element without aria-hidden="true" or used as a background image but a particularly egregious example is the search toggle.

  1. Load the sample content page at a small viewport size
  2. Use voice over and toggle the search open and closed
  3. It will announce "K" or "H" before then reading the correct descriptive label.

Expected behaviour

No additional text announced

Actual behaviour

The letter that the icon font element is mapped to is announced.
@davidrapson davidrapson added the bug Something isn't working label Apr 6, 2022
@davidrapson davidrapson mentioned this issue Apr 6, 2022
Closed
@davidrapson davidrapson added this to Needs assessment in 💫 Bugs & Tech debt Apr 22, 2022
@davidrapson davidrapson mentioned this issue Jun 13, 2022
Merged
davidrapson added a commit that referenced this issue Jul 4, 2022
@davidrapson
Allow opting-out of external link styles
50263c5 
A recent accessibility report flagged that our external link icon can be
interpreted as a new tab icon causing confusion.

We have seen similar reports in testing sessions for the new intranet.

This mirrors the issues mentioned in https://designnotes.blog.gov.uk/2016/11/28/removing-the-external-link-icon-from-gov-uk/

We also know that we have an outstanding accessibility issue with our
icon fonts which affects this icon too #1902

To allow us to test removing the external link icon, add a new config
option to opt-out of the external link styles:
`$cads-enable-external-link-icon`

This is enabled by default to respect the current defaults.
@davidrapson davidrapson mentioned this issue Jul 4, 2022
Merged
davidrapson added a commit that referenced this issue Jul 4, 2022
@davidrapson
Allow opting-out of external link styles
bf71ecd 
A recent accessibility report flagged that our external link icon can be
interpreted as a new tab icon causing confusion.

We have seen similar reports in testing sessions for the new intranet.

This mirrors the issues mentioned in https://designnotes.blog.gov.uk/2016/11/28/removing-the-external-link-icon-from-gov-uk/

We also know that we have an outstanding accessibility issue with our
icon fonts which affects this icon too #1902

To allow us to test removing the external link icon, add a new config
option to opt-out of the external link styles:
`$cads-enable-external-link-icon`

This is enabled by default to respect the current defaults.
@davidrapson davidrapson mentioned this issue Jul 25, 2022
Open
4 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working
Projects
💫 Bugs & Tech debt
Needs assessment
Milestone
No milestone
Development

No branches or pull requests
1 participant
@davidrapson