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

Magnifying glass icon in Search bar

FIGURE 12.13: Magnifying glass icon in Search bar

12.10.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.

12.10.2 Code snippet

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

12.10.3 Recommendation

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