可访问性：sr-only 或 aria-label

Question

来自 MDN ：

在下面的示例中，按钮的样式看起来像典型的“关闭”按钮，中间有一个 X。 由于没有任何内容表明按钮的目的是关闭对话框，因此 aria-label 属性用于为任何辅助技术提供标签。

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

根据 Bootstrap 文档：

仅使用 .sr 将元素隐藏到除屏幕阅读器之外的所有设备

所以我想我也可以写：

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

在 Bootstrap 项目中，我如何选择更喜欢的项目？

Answer 1

在 MDN 示例中，屏幕阅读器只会说出“关闭”这个词，因为aria-label会覆盖按钮中的文本。 即使您在没有 Bootstrap 的情况下重新使用代码，这也将起作用。

在您的示例中，屏幕阅读器会说“关闭 x”，因为您没有采取任何措施来向屏幕阅读器隐藏“x”。 您还添加了一个文本节点，然后用一个类隐藏它。

我将使用 MDN 中的示例。

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 提示屏幕阅读器何时添加暂停，必要时通过在标题后缀句点或逗号来添加暂停（更多关于在屏幕阅读器中暂停以获取辅助功能）：

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