Lighthouse无障碍检测报错：Buttons do not have an accessible name 求解决办法

核心问题是你写错了无障碍标签的属性名——应该是aria-label而非area-label，Lighthouse无法识别拼写错误的属性，这才导致报错。另外还有几个可以优化的点：

• 移除外层div上的无效area-label：div不是可交互元素，这个标签对无障碍检测没有意义
• 给SVG图标添加aria-hidden="true"：避免屏幕阅读器读取SVG的代码内容，因为按钮已经有明确的文本标签
• 保留按钮的可见文本<span>Add to Wishlist</span>：如果视觉上需要隐藏这个文本，可以用CSS的视觉隐藏类（比如visually-hidden），但不要直接移除，确保屏幕阅读器能获取到按钮名称

修改后的代码示例：

{{#all theme_settings.product_card_show_favorite settings.show_wishlist}}
    <div class="card-favorite-btn">
        <form action="{{add_to_wishlist_url}}" data-wishlist-add method="post">
            <button type="submit" name="Add_to_Wishlist" aria-label="Add to Wishlist">
                <span>Add to Wishlist</span>
                <svg aria-hidden="true"><use xlink:href="#icon-heart" /></svg>
            </button>
        </form>
    </div>
{{/all}}

如果你的需求是视觉上只显示图标、隐藏文本，可以给span添加视觉隐藏类（需要提前定义对应的CSS）：

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

然后修改按钮内的span：

<span class="visually-hidden">Add to Wishlist</span>

这样修改后，Lighthouse的无障碍检测就能正确识别按钮的可访问名称了。

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