Missing form label in WAVE tool

Question

I'd like to fix an error in WAVE tool on my site: http://human2.com.pl/ and the error is :

[url=https://gifyu.com/image/sUbw][img]https://s1.gifyu.com/images/Przechwytywanie58ca1183ef15bd0c.jpg[/img][/url]

the code which contains an error:

<form action="<?php echo esc_url( home_url( '/' ) ); ?>" class="search-form searchform clearfix" method="get">
   <div class="search-wrap">
      <input type="text" placeholder="<?php esc_attr_e( 'Szukaj', 'colormag' ); ?>" class="s field" name="s">
      <button class="search-icon" type="submit"> Klik</button>
   </div>
</form><!-- .searchform -->

Can anyone could help me to fix it ? Thanks

Answer 1

As the WAVE messages says, "A form control (your input) does not have a corresponding label (<label> tag)".

So to fix the error, you need to Create a <label> tag and then add a for attribute within it, the value of which should be the id of your input. So basically, your HTML should look like this :

<form action="<?php echo esc_url( home_url( '/' ) ); ?>" class="search-form searchform clearfix" method="get">
   <div class="search-wrap">
      <label id="searchLabel" for="search">
      <input id="search" aria-labelledby="searchLabel" type="text" placeholder="<?php esc_attr_e( 'Szukaj', 'colormag' ); ?>" class="s field" name="s">
      <button class="search-icon" type="submit"> Klik</button>
   </div>
</form><!-- .searchform -->