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

A11Y - Omnibar Search Button missing aria-label #282

Open
allen-mckenzie opened this issue Mar 21, 2021 · 0 comments
Open

A11Y - Omnibar Search Button missing aria-label #282

allen-mckenzie opened this issue Mar 21, 2021 · 0 comments

Comments

@allen-mckenzie
Copy link
Contributor

Description

The button on the Omnibar Search widget does not have an aira-label attribute so it fails for accessibility (A11Y)

Steps to Fix

File location: /idx/widgets/omnibar/create-omnibar.php
Line: 72
<input id="omnibar" class="idx-omnibar-input" type="text" placeholder="$placeholder"><button type="submit" value="Search" aria-label="Search"><i class="fas fa-search"></i><span>Search</span></button>
Line: 134
<button class="idx-omnibar-extra-button" type="submit" value="Search" aria-label="Search"><i class="fas fa-search"></i><span>Search</span></button>

Expected behavior: Screen readers rely on the aria-label to correctly announce a button. If one is not provided they announce them as just "Button" and this is not helpful for those with disabilities. The button should announce a unique and helpful name.

Actual behavior: No aria-label attribute is present causing A11Y validations to fail and screenreaders to just say "Button" instead of something unique and helpful

Additional Resources: https://web.dev/button-name/?utm_source=lighthouse&utm_medium=lr

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants