无障碍性：sr-only或aria-label

Question

来自MDN::

在下面的示例中，一个按钮被样式化成典型的“关闭”按钮，中间带有X。由于没有任何指示该按钮的目的是关闭对话框，因此使用aria-label属性向任何辅助技术提供标签。

<button aria-label="Close" onclick="myDialog.close()">X</button>

根据Bootstrap文档：

使用.sr-only可以将元素隐藏在除屏幕阅读器之外的所有设备上。

所以我想我也可以这样写：

<button onclick="myDialog.close()"><span class="sr-only">Close</span>X</button>

在Bootstrap项目中，我应该如何选择首选项？

在Bootstrap项目中，我该如何选择偏好？

- CharlesM

---

“sr-only”与可访问性无关，它只是隐藏元素，除了屏幕阅读器之外。这并不意味着它自动使元素适合屏幕阅读器使用。 - Mr_Green

请注意，在BS4中，代码中的.sr-only已被替换为<button aria-label="Close"><span aria-hidden="true">X</span></button>。 - thdoan

@thdoan 你知道按钮内的 aria-hidden="true" 的目的吗？在我测试过的情况下，aria-label 覆盖了它。 - ernesto

@ernsto aria-hidden="true"将防止屏幕阅读器读取该元素内的内容。因此，在@thdoan的示例中，屏幕阅读器只会读出“关闭”（而不是“关闭X”）。 - Matty J

Answer 1

在MDN的示例中，屏幕阅读器将只会朗读“close”这个单词，因为aria-label覆盖了按钮中的文本。即使您在没有Bootstrap的情况下重用该代码，这种方法也仍然有效。

在您的示例中，屏幕阅读器将朗读“close x”，因为您未对屏幕阅读器隐藏“x”。您还添加了一个文本节点，然后使用类隐藏它。

我会使用MDN的示例。

- aardrian

---

这真的取决于屏幕阅读器/文本到语音客户端。我建议首先参考这些文章，但请记住它们可能已经过时了：(1) 文本链接：屏幕阅读器最佳实践；(2) title和aria-label属性可访问性测试用例。 - thdoan

Answer 2

sr-only类适用于仅对使用屏幕阅读器的用户有用，且应从其他人隐藏的整个文本块内容。

我正在开发的一个应用程序提供了使用可访问控制器与Web应用程序的说明：

<div class="sr-only">
  When voting with the text-to-speech audio, use the accessible
  controller to navigate your ballot. To navigate through the
  contests, use the left and right buttons. To navigate through
  contest choices, use the up and down buttons. To select or
  unselect a contest choice as your vote, use the select button.
</div>

在您的例子中，您只想为屏幕阅读器提供不同的文本内容。为了回答您的具体问题，请使用 MDN 的示例。

我已经用 aria-labels 给屏幕阅读器提示何时添加暂停，通过在必要时使用句点或逗号作为标题的后缀（更多关于辅助功能屏幕阅读器中的暂停信息请参考Pausing in a screen reader for accessibility）。

<h1 aria-label="Hello World.">
  Hello World
</h1>

- Beau Smith