Skip to content

The accessible name for the search input on the homepage does not match the associated text for the input.

https://docs.google.com/spreadsheets/d/1GoSSXv11yG_JdogE0yBg9yS9c9LnlPLTN1y-B3-aMas/edit?gid=0#gid=0&range=8:8

Some people with limited dexterity use speech based interfaces to operate their computer. This assistive technology is able to traverse the accessibility tree of a web page and identify elements based on their accessible names. When the accessible name does not contain the visible text it is difficult for them to use their assistive technology. Refer to this W3C technique article for more information about using text in labels, "Including the text of the visible label as part of the accessible name" - https://www.w3.org/WAI/WCAG22/Techniques/general/G208 In this instance there are several text elements nearby the search input that someone could interpret as its label. In the accessibility tree the name for the element is "Start typing your institution's name" provided by the visually hidden label associated with the input. Someone attempting to use speech commands to access the input would likely not be able to and have to rely on other methods to access it. Recommend at a minimum matching the text of the hidden label to the placeholder text or the nearby heading. A best practice would be to use a visible label for the search input. A visible text label is always preferred, placeholder text is not a replacement for a visible label. Suggest: Enter your school or library name: //notice the placeholder text has been removed. Placeholder text is only appropriate to provide an example input for when certain formatting is required.

Edited by Seamus Narron