为什么灯塔认为clip: rect(0 0 0)不是可访问性的有效解决方案

Question

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

clip: 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清楚地表明：

检查label元素是否可见。

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

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

通过对屏幕隐藏文本，您会造成两种损害：

使用screenreader支持的

• 用户可能会听到无法在屏幕上查看的内容，可能会失去视觉焦点并迷失方向，而不使用screenreader的
• 用户将不知道该字段的用途。

后者对于使用屏幕放大镜或特殊对比度设置的人尤其有害，因为在这些设置中，上下文必须非常详细。