wordpress-plugin icon indicating copy to clipboard operation
wordpress-plugin copied to clipboard

A11Y - Omnibar Search Button missing aria-label

Open allen-mckenzie opened this issue 3 years ago • 0 comments

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

allen-mckenzie avatar Mar 21 '21 19:03 allen-mckenzie