Feedback: Search - missing visible label

[sigveres]

The component only uses aria-label to provide an accessible name, but does not include a visible <label> element. It may create usabiliy challanges for users who rely on speech recognition or cognitive support. Placeholder text is not considered a sufficient substitute for label, it can also introduce contrast issues depending on styling. This is related to (WCAG 3.3.2). We should also be aware for WCAG 2.5.3 if an visible label is present to ensure compatibility with speech recognition.

My rule of thumb: Every input should have a visible and unique label

[Barsnes]

Hi!
Consumers can freely add a label to the input:

I think it's good for us to leave this issue though, since it might be relevant to talk about this on the a11y page

[Febakke]

I agree that Placeholder does not replace label. But a Label do not always have to visually be a "form label". Meaning placed on the left side or over the inputfield.

WCAGs definition of Label is broader

Text or other component with a text alternative that is presented to a user to identify a component within web content

Source

In the case of searchfields, the most common pattern in my experience is to use a button or "magnifying-glass" icon to indicate that this is a search field. (I think context also is a big part of this when it comes to search) Using other elements than traditional text is acceptable when talking about 3.3.2 Labels and instructions.

So my reading of 3.3.2 would look something like this:

Note: Might be depending on contrast on placeholder if you can use it as visible label? Im not sure, but either way it will vanish when it gets focus so I guess that rules it out

That said, I cant think of any other situation where I would use icon to represent a label for input fields. Maybe in "expert" ui?

2.5.3 Label in Name is interesting. Im guessing that having the accessible label be "search" is the common pattern here? We should do some research on this.

We will document this when working on #4286