我的 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 框架），但請隨意向它們借用； 他們花了數年時間對這段代碼進行磨練和迭代，以最大限度地提高跨平台的一致性和可訪問性。 自己旋轉可能會浪費精力。