Lighthouse 错误：“按钮没有可访问的名称”

Question

如何修复此灯塔错误：

按钮没有可访问的名称

<button class="search-button" type="submit" value="Search"></button>

Answer 1

我会推荐这个链接供参考。

它表明按钮应该有内部文本内容或 aria-label 或 aria-labelledBy。

<button class="search-button" type="submit">Search</button>

<button class="search-button" type="submit" aria-label="search"></button>

我展示了一个带有内部文本的按钮以及一个带有 aria 标签的按钮。

Answer 2

要解决此问题，您应该添加文本：

<button type="submit">Save...</button>

或添加 aria-label

<my-icon type="button" aria-label="save button"></my-icon>

失败：

<button id="find"><img src="find.jpg></button>

通过：

<button id="find"><img src="find.jpg>Find</button>

来源这里！