为什么 Lighthouse 考虑 clip: rect(0 0 0 0) 作为可访问性的有效解决方案答案

【问题标题】：Why is Lighthouse considering clip: rect(0 0 0 0) as not a valid solution for accessibility为什么 Lighthouse 考虑 clip: rect(0 0 0 0) 作为可访问性的有效解决方案
【发布时间】：2019-05-02 06:48:41
【问题描述】：

我的页面上有一个表单，其中包含使用正确填充的 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;
}

【问题讨论】：

隐藏输入字段的标签有什么好的理由吗？辅助功能不仅适用于屏幕阅读器，也适用于应该知道要输入哪些数据的有视力的人。
@MattDiMu 我在这里将其简化为输入字段，但它是用于下拉列表；对于有视力的人来说，有足够的信息可以使用它，但对于屏幕阅读器，我们希望正确使用标签来获取额外信息。所以对于有视力的人来说，这将是信息过度杀伤。
也许你最好的选择是使用 aria-label，忘记标准标签
@vals 不幸的是，aria-label 最多支持 74% 的屏幕阅读器，因此使用起来不太可靠：powermapper.com/tests/screen-readers/aria
我会说合适的类别是“input type=text with aria-label 属性”，它被标记为“失败 1% - 24% ...”所以 74% 将是最小支持，而不是最大支持。它会在 NVDA+IE 和 SaToGo+IE 中失败。但我同意它并不完全可靠

标签： css accessibility clip lighthouse

【解决方案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 技术明确指出：

检查标签元素是否可见。

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

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

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

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

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

【讨论】：