时间戳

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

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

问题描述

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

标签： cssaccessibilitycliplighthouse

解决方案

您的代码满足成功标准4.1.2 名称、角色、值，因为名称可以通过编程方式确定，但不符合3.3.2 标签或说明的成功标准：当内容需要用户输入且标签必须可见时，提供标签或说明

请注意，技术H44：使用标签元素将文本标签与表单控件相关联，明确指出：

检查标签元素是否可见。

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

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

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

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

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

推荐阅读