4

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

Michał Hał
  • 41
  • 1
  • 1
  • 4

1 Answers1

5

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 -->
Nikhil Nanjappa
  • 6,454
  • 3
  • 28
  • 44
  • Alternatively if you nest the input inside the label element you do not need to worry about using the "for" and "id" attributes as the association is implicit at this point. – Austin737 Apr 13 '21 at 19:33