Skip to content

A11Y - Omnibar Search Button missing aria-label #282

@allen-mckenzie

Description

@allen-mckenzie

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

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions