Making a Search Form Accessible: label vs aria-label vs aria-labelledby

Question

The current HTML for my search form looks like this: ``` ``` I would like to make the search form accessible. As I understand accessibility from W3.org: https://www.w3.org/WAI/tutorials/forms/labels/ and a11ymatters.com: http://www.a11ymatters.com/pattern/accessible-search/, I need to add a label which will not display visually, and give a description to the search button, like this: ``` ``` With the added CSS: ``` .search-labe…

Accepted Answer

Best practice, arguably, is to use ``. It provides a larger hit area and offers a visual label that does not go away when the field gets focus (which is what happens in your example). Since designs sometimes visually hide the label text, there is not much benefit to using a `` and completely hiding it. In that scenario, using `aria-label` is probably fine in the context of a search form. `aria-labelledby` needs to point to the `id` of some text to act as a label, so if you are going to do it in this context then you might as well go back to using ``. For your submit button, the `alt` attribute is the correct thing to use, but be less verbose. In your case, you can get away with this: ``` ``` The `placeholder` does what you are trying to do by leaving a value in the field that you then clear out. A screen reader will announce the field as "Input, text, Search" and the button as "Button, search". Brief, actionable labels are best. For other code samples and examples, I made an accessible search field that starts only as the icon (as requested by a client): http://codepen.io/aardrian/pen/bVQzJj

Making a Search Form Accessible: label vs aria-label vs aria-labelledby

Solution

Problem