1.14 Search button announced as ‘go button’ (L)

Magnifying glass icon in Search bar

FIGURE 1.38: Magnifying glass icon in Search bar

1.14.1 WCAG 1.1.1 (A), 1.3.1 (A) - Desktop, Mobile

Throughout the website, the ‘search the full website’ input field has a magnifying glass icon that functions as a search button. When the user navigates to this element using a screen reader, it is announced as ‘go button’.

Screen reader users navigating by interactive elements using the tab key will land on this element and might be confused as to what will happen when they interact with the button element.

1.14.2 Code snippet

<button type="submit" class=""><span class="icon-magnify"></span><span class="visually-hidden">Go</span></button>

1.14.3 Recommendation

Change the visually-hidden text within the span from ‘go’ to ‘search’.