WebAIM - Web Accessibility In Mind

E-mail List Archives

Search text field with magnifier icon within the text box

for

From: Rakesh P
Date: Jan 17, 2017 9:41AM

All,


I have encountered a search text field with the following constructs.
a. A text box with a placeholder text "Search".
b. Within the text field a magnifier icon is placed and this icon is not
recognized by the screen reader.
c. As the user types in the search term the placeholder is appended along
with the words typed in by the user.
d. As the user types in the search terms, auto suggestions are populated
but not identified by the screen reader.
e. If the user selects any suggestion the page automatically navigates to
the search results page.

I observe the following WCAG violations in the component. Guide me if any
of these are not required or if I need to add anything more.
a. 3.3.2 Labels and Instructions: This is specifically because the search
placeholder is appended to the words typed in by the user. The search
placeholder should not be the part of text typed by the user. This should
be a visual label.
b. 2.1.1 Keyboard only: The magnifier icon should not be the part of text
field, it should be a separate keyboard navigable (tab) element.
c. 4.1.2 Name, role, value: The magnifier icon should have a role such as
button for the user to identify it as an actionable item.
d. 1.1.1 Non-text content: Since screen reader is not recognizing it as an
item, am anticipating that magnifier image have either empty alt or no alt.
e. 1.3.2 Meaningful sequence: The auto-suggestions populated are not
read-out by the screen reading technology.
f. 3.2.2 Change on input: As soon as the the user navigates to the search
suggestion the focus should not move to another page. User should be given
a mechanism to confirm the selection.

Sorry for a long email.