我的 sr-only 替代方案对您来说是否正确？

Question

display:none或visibility:hidden不是隐藏可聚焦元素的好主意，因为屏幕阅读器看不到它们。

这是从视图中隐藏元素但保持可访问性的“传统”方式：

.sr-only {
  border: 0;
  clip: rect(0,0,0,0);
  clip-path: inset(50%);
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
}

我开始像这样使用自己的复选框，用标签设置样式的单选按钮：

[type=radio], [type=checkbox] {
  position: absolute;    /* keeps it out of flow */
  opacity: 0;            /* makes it invisible */
  pointer-events: none;  /* being able to click the content below */
}
[type=radio] + label , [type=checkbox] + label {
  /* custom styling */
}
[type=radio]:checked + label , [type=checkbox]:checked + label {
  /* custom styling */
}

你觉得这个想法有什么大问题吗？

Answer 1

我建议这里的问题是您将.sr-only样式应用于样式可聚焦的表单元素。 如果您查看像 Bootstrap 这样的库，它们有一组用于可聚焦和不可聚焦屏幕阅读器文本的实用程序类。 您会注意到，在他们的示例中，他们将“可聚焦”变体应用于锚文本。

Bootstrap 确实有自定义样式的单选按钮和其他表单元素。 但是，您会注意到它们没有扩展或以其他方式利用其屏幕阅读器文本样式。 相反，他们正在利用appearance: none来删除特定于平台的 styles 并允许自定义表单元素的样式。 这是实现自定义样式表单元素的惯用且易于访问的方式。

Slugolicious 的评论非常贴切。 虽然您可能不会选择直接利用 Bootstrap（或类似成熟的 UI 框架），但请随意向它们借用； 他们花了数年时间对这段代码进行磨练和迭代，以最大限度地提高跨平台的一致性和可访问性。 自己旋转可能会浪费精力。