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

Searchbar: Redundant voiceover due to label and placeholder. #62

Open
StevenDufresne opened this issue Nov 9, 2022 · 1 comment
Open
Labels
Accessibility Issues related to keyboard navigation, screen readers, etc [Status] Needs Design Feedback

Comments

@StevenDufresne
Copy link
Contributor

See: WordPress/wporg-showcase-2022#25 for more information.

@ryelle
Copy link
Contributor

ryelle commented Dec 12, 2022

Adding more context from slack (thread):

"Search lesson plans" has a label of "Search for". This results in reading that's "Search landmark. Search for: Search lesson plans". It's very verbose. Would be better if there was just a visible label with "Search lesson plans" and no placeholder.

The issue is that we have a placeholder, basically. The label exists, but is hidden. All the new search fields have been styled to use this pattern, which will create the verbose output (a hidden label and a placeholder). Additionally, while I don't think this technically fails WCAG, the placeholder works as the visual label and it disappears as soon as you start typing.

Learn fixed this by making the label visual & removing the placeholder.

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 [Status] Needs Design Feedback
Projects
None yet
Development

No branches or pull requests

2 participants