Labels incorrect on product

Mark Warren

#247047

Hi, the DOM of your product renders fields like this:

<label>
<span class=”screen-reader-text”>Search</span>
<input placeholder=”Search by title or keywords” name=”_sf_search[]” class=”sf-input-text” type=”text” value=”” title=”Search”>
</label>

The input and the span should come after the label, and not be inside it.

This is how it should look:

<label for=”searchInput”>Search</label>
<input placeholder=”Search by title or keywords” name=”_sf_search[]” class=”sf-input-text” type=”text” value=”” title=”Search” id=”searchInput”>

if they want to hide the label, it can look like this:

<label for=”searchInput” class=”screen-reader-text” hidden>Search</label>
<input placeholder=”Search by title or keywords” name=”_sf_search[]” class=”sf-input-text” type=”text” value=”” title=”Search” id=”searchInput”>

Please fix, thanks

Add New Note to this Reply

Mark Warren

#247048

this gives options

https://www.w3.org/WAI/tutorials/forms/labels/

Add New Note to this Reply

Ross Moderator

#247067

Hi Mark

We’re working on v3 at the moment, which is a big rewrite, and we’re addressing accessibility and this kind of thing better.

We’ve already fixed this for some of our fields such as checkboxes and radios, but I see its still on the Search input.

While there is nothing technically wrong with doing it the way we do (it follows standards, albeit, lazily), I do prefere your approach and will be doing something along those lines in v3.

Thanks

Add New Note to this Reply

[Author]

Posts