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.

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

Prevent screen readers from reading the arrow emoji in content #94

Merged
merged 1 commit into from
Aug 16, 2023

Conversation

ryelle
Copy link
Contributor

@ryelle ryelle commented Aug 15, 2023

See WordPress/wporg-main-2022#311

Please eliminate the "↗︎" icons on the links under the "Only the beginning" heading 2. You never know what screen readers will do when they come in contact with arrows. In all fairness, up arrows really don't make much sense here.

This PR will wrap any arrows in content (or patterns, which are content) in a <span aria-hidden="true"> tag. There should be no visual change, but it should improve the screen reader experience. Adding this to the parent theme will cascade the effect down to all child themes, which share this links list with arrows pattern.

Screenshots

Confirming no visual change.

Before After
trunk-home branch-home
trunk-blocks branch-blocks

How to test the changes in this Pull Request:

  1. Apply the branch, and start an environment using a child theme, for example the main site
  2. View a page with arrows (home, blocks) or create a new page with arrow emoji — use any of ←↑→↓↔↕↖↗↘↙
  3. When viewed on the frontend, the arrows should be wrapped in span

@ryelle ryelle added the Accessibility Issues related to keyboard navigation, screen readers, etc label Aug 15, 2023
@ryelle ryelle self-assigned this Aug 15, 2023
Copy link
Contributor

@StevenDufresne StevenDufresne left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

Copy link
Contributor

@adamwoodnz adamwoodnz left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍 Tested in NVDA and VoiceOver

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Accessibility Issues related to keyboard navigation, screen readers, etc
Projects
Archived in project
Development

Successfully merging this pull request may close these issues.

3 participants