WAVE工具检测到表单标签缺失问题修复求助（human2.com.pl）

Hey Michał, let's get that missing form label error sorted out—it's all about making your search form accessible to screen readers and other assistive technologies, which WAVE is rightly flagging.

The core issue here is that your search input doesn't have an associated <label> element or accessibility attribute to tell assistive tools what the input is for. Remember: placeholders aren't a valid replacement for labels—they disappear once the user starts typing, and not all assistive tools recognize them as proper descriptive labels.

Here are two solid, accessible solutions to fix this:

Option 1: Visually Hidden <label> (Recommended for Full Compliance) #

This adds a proper label that's only visible to screen readers, so it won't mess up your existing layout while solving the accessibility gap:

<form action="<?php echo esc_url( home_url( '/' ) ); ?>" class="search-form searchform clearfix" method="get">
  <div class="search-wrap">
    <!-- Label hidden visually but readable by screen readers -->
    <label for="search-input" class="screen-reader-text"><?php esc_attr_e( 'Szukaj', 'colormag' ); ?></label>
    <input 
      type="text" 
      id="search-input" 
      placeholder="<?php esc_attr_e( 'Szukaj', 'colormag' ); ?>" 
      class="s field" 
      name="s" 
    />
    <!-- Include your search submit button here if it exists in your original code -->
  </div>
</form>

Most WordPress themes like Colormag already include the screen-reader-text class in their CSS, but if yours doesn't, add this snippet to your stylesheet:

.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

Option 2: aria-label Attribute (Simpler Alternative) #

If you want a more concise fix without adding an extra <label> tag, use the aria-label attribute directly on the input field. This provides a text description exclusively for assistive technologies:

<form action="<?php echo esc_url( home_url( '/' ) ); ?>" class="search-form searchform clearfix" method="get">
  <div class="search-wrap">
    <input 
      type="text" 
      aria-label="<?php esc_attr_e( 'Szukaj', 'colormag' ); ?>" 
      placeholder="<?php esc_attr_e( 'Szukaj', 'colormag' ); ?>" 
      class="s field" 
      name="s" 
    />
    <!-- Include your search submit button here if it exists in your original code -->
  </div>
</form>

Either of these fixes will resolve the "Missing form label" error in WAVE and make your search form more accessible to all users.

内容的提问来源于stack exchange，提问作者Michał Hał