WordPress站点Empty link空链接无障碍错误修复（Variation Swatches for WooCommerce相关）

方案一：插件内置设置调整（优先选择，无需修改代码） #

• 登录WordPress后台，依次进入 WooCommerce > 设置 > Variation Swatches（变体样本） 配置页
• 在属性设置分类下找到颜色样本的辅助功能相关选项，开启添加无障碍标签/启用ARIA属性开关（不同插件版本措辞可能存在差异，也可能标注为「辅助功能描述」）
• 保存配置后清空站点所有缓存，重新扫描即可验证修复效果，插件会自动为每个颜色链接添加对应颜色名称的无障碍标识，解决空链接报错。

方案二：自定义代码修复（适合无内置配置的旧版插件） #

不需要修改插件源码，避免插件更新覆盖调整内容，选择以下任意一种方式即可：

方法A：PHP代码注入 #

• 进入WordPress后台，依次打开 外观 > 主题文件编辑器，在右侧文件列表选中当前主题的functions.php文件
• 在文件末尾粘贴以下代码：

// 给变体颜色样本添加无障碍ARIA标签
add_action( 'woocommerce_variation_swatches_html', function( $html, $swatch, $args ) {
    if ( $args['attribute'] === 'pa_color' ) { // 可替换为你实际的颜色属性slug
        $label = esc_attr( $swatch->name );
        $html = str_replace( '<a ', '<a aria-label="选择' . $label . '" ', $html );
    }
    return $html;
}, 10, 3 );

• 保存文件后清空缓存即可生效。

方法B：JS代码注入（门槛更低，不易出现站点报错） #

• 同样在主题functions.php文件末尾粘贴以下代码：

add_action( 'wp_footer', function() {
?>
<script>
document.addEventListener('DOMContentLoaded', function() {
    // 匹配所有变体样本的空链接
    document.querySelectorAll('.variation-swatch a:empty').forEach(function(emptyLink) {
        // 提取父元素存储的颜色值作为标签内容
        let colorName = emptyLink.closest('[data-value]').getAttribute('data-value') || '颜色选择按钮';
        emptyLink.setAttribute('aria-label', '选择' + colorName);
    });
});
</script>
<?php
}, 999 );

• 保存后清空所有缓存即可完成修复。

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