css - 为什么 Lighthouse 考虑剪辑 : rect(0 0 0 0) as not a valid solution for accessibility

Question

我的页面上有一个表单，其中包含使用正确填充的 for 和 id 属性的输入和标签。在应用可访问性最佳实践后，Chrome Lighthouse 未能通过使用

的测试

剪辑:rect(0 0 0 0)

删除此行效果很好，但它违背了解决屏幕阅读器/浏览器可见元素问题的最佳做法。

有人知道为什么会发生这种情况或如何解决吗？

<label for="name" class="visually-hidden">Name</label>
<input type="text" id="name">

至于CSS

.visually-hidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    outline: 0;
    appearance: none;
}

Answer 1

您的代码满足成功标准 4.1.2 Name, Role, Value因为名称可以通过编程方式确定，但不符合 3.3.2 Labels or Instructions: Labels or instructions are provided when content requires user input 的成功标准标签必须可见的地方

注意技术H44: Using label elements to associate text labels with form controls ，明确指出:

Check that the label element is visible.

---

“视觉隐藏”黑客不是“最佳实践”。这绝对应该被禁止。

有屏幕阅读器的人不需要比没有屏幕阅读器的人更多的信息:他们需要更好的信息。

通过在屏幕上隐藏文本，您会造成两种损害:

• 在支持中使用屏幕阅读器的人会听到他们无法在屏幕上看到的东西，可能会失去视觉焦点并迷失方向，
• 不使用屏幕阅读器的人不知道该字段的用途。

后者对使用屏幕放大镜或特殊对比度设置的人尤其有害，因为上下文必须提供非常丰富的信息。