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明确指出：

检查标签元素是否可见。

“在视觉上隐藏”的骇客不是“最佳实践”。绝对应该禁止这样做。

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

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

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

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

为什么Lighthouse考虑剪辑：rect（0 0 0 0）不是可访问性的有效解决方案

1 个答案: