可访问性:仅限sr或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项目中,我如何选择更喜欢哪一个？

Answer 1

在MDN示例中,屏幕阅读器只会说"关闭"一词,因为它aria-label会覆盖按钮中的文本.即使您重新使用没有Bootstrap的代码,这也会有效.

在您的示例中,屏幕阅读器会说"关闭x",因为您无法隐藏屏幕阅读器中的"x".您还要添加一个文本节点,然后用类隐藏它.

我会使用MDN的例子.

Answer 2

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

我正在开发的应用程序的一个示例提供了有关在网络应用程序中使用可访问控制器的说明：

<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>