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

Prevent screen readers from reading the arrow emoji in menu items #453

Closed
ryelle opened this issue Sep 20, 2023 · 0 comments · Fixed by #454
Closed

Prevent screen readers from reading the arrow emoji in menu items #453

ryelle opened this issue Sep 20, 2023 · 0 comments · Fixed by #454
Assignees
@ryelle
Labels
Accessibility Issues related to keyboard navigation, screen readers, etc [Block] Header & Footer
Milestone
Navigation Iteration

Comments

@ryelle
Copy link
Contributor

ryelle commented Sep 20, 2023

See WordPress/wporg-parent-2021#94, WordPress/wporg-main-2022#311

It was requested that the arrow emojis be wrapped in aria-hidden, so that they're not announced to screen reader users. The code added there does not apply to the header & footer nav menus.

Since more of these will be introduced in #450, we should try to do the same for the nav items.

Example of unwrapped arrow:
Screenshot 2023-09-20 at 11 31 07 AM
@ryelle ryelle added Accessibility Issues related to keyboard navigation, screen readers, etc [Block] Header & Footer labels Sep 20, 2023
@ryelle ryelle added this to the Navigation Iteration milestone Sep 20, 2023
@ndiego ndiego mentioned this issue Sep 24, 2023
Closed
@ryelle ryelle self-assigned this Sep 25, 2023
ryelle added a commit that referenced this issue Sep 25, 2023
@ryelle
Global Header/Footer: Hide the arrow emoji for screen reader users
7924964 
The arrows are primarily decorative, and screen readers can be overly verbose when encountering special characters.

Fixes #453.
@ryelle ryelle mentioned this issue Sep 25, 2023
Merged
ryelle added a commit that referenced this issue Oct 2, 2023
@ryelle
Global Header/Footer: Hide the arrow emoji for screen reader users (#454
ee5d04e 
)

The arrows are primarily decorative, and screen readers can be overly verbose when encountering special characters.

Fixes #453.
@ryelle ryelle moved this to ✅ Done in WordPress.org Oct 3, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@ryelle ryelle

Labels
Accessibility Issues related to keyboard navigation, screen readers, etc [Block] Header & Footer
Projects
WordPress.org
Archived in project
Milestone
Navigation Iteration
Development

Successfully merging a pull request may close this issue.

Global Header/Footer: Hide the arrow emoji for screen reader users WordPress/wporg-mu-plugins
1 participant
@ryelle