WooCommerce代码中<label for>属性使用错误排查求助

错误原因 #

浏览器辅助功能检测工具触发该警告的核心原因：<label>的for属性关联了type="hidden"的输入框。这类隐藏元素对屏幕阅读器不可见、无法被用户聚焦，不符合<label>应关联可交互表单控件（如单选框、复选框）的规范，即便ID完全匹配也会被判定为错误。

修复方案 #

方案1：替换隐藏输入为单选按钮（推荐） #

WooCommerce默认配送方式选项使用单选按钮，将隐藏输入改为单选类型，保留ID与for的对应，同时添加checked属性（如果是当前选中的配送方式）：

<ul id="shipping_method" class="woocommerce-shipping-methods">
  <li>
    <input type="radio" name="shipping_method[0]" data-index="0" id="shipping_method_0_table_rate9" value="table_rate:9" class="shipping_method" checked>
    <label for="shipping_method_0_table_rate9">Table Rate: 
      <span class="woocommerce-Price-amount amount">
        <bdi><span class="woocommerce-Price-currencySymbol">$</span>135.00</bdi>
      </span>
    </label>
  </li>
</ul>

方案2：移除Label的关联属性（适配插件逻辑） #

如果插件依赖隐藏输入的逻辑无法修改，直接去掉<label>的for属性即可消除警告：

<ul id="shipping_method" class="woocommerce-shipping-methods">
  <li>
    <input type="hidden" name="shipping_method[0]" data-index="0" id="shipping_method_0_table_rate9" value="table_rate:9" class="shipping_method">
    <label>Table Rate: 
      <span class="woocommerce-Price-amount amount">
        <bdi><span class="woocommerce-Price-currencySymbol">$</span>135.00</bdi>
      </span>
    </label>
  </li>
</ul>

方案3：排查插件问题 #

该错误大概率是你使用的Table Rate配送插件输出了不规范的HTML，建议：

• 更新插件至最新版本
• 切换到官方WooCommerce Table Rate Shipping插件测试，确认是否为第三方插件的兼容性问题

内容的提问来源于stack exchange，提问作者J82