“辅助功能”部分出现灯塔错误

Question

我网站上 Lighthouse 的“辅助功能”部分遇到问题，问题出现在名称和标签部分。错误是“按钮没有可访问的名称”。错误是“添加到愿望清单图标”，它没有名称和标签。我在代码的前端添加了这些，但我仍然看到错误。

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

我添加了名称和区域标签，但仍然看到错误。

任何解决此问题的建议。谢谢你

Answer 1

我无法判断您正在使用哪个主题，但按照您所做的那样在按钮内添加文本应该可以解决该按钮周围的任何可访问性问题。您可以删除“区域标签”属性，因为它们不需要（并且拼写错误）。您还可以删除“名称”属性。它在那里无效。

如果我可以看到您的网站或您正在使用的主题，我可以在我的答案中添加更多细节。