Question

From MDN：

在下面的示例中，按钮的样式看起来像典型的＆＃34;关闭＆＃34;按钮，中间有一个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示例中，屏幕阅读器只会说出＆＃34;关闭＆＃34;因为aria-label会覆盖按钮中的文本。即使您在没有Bootstrap的情况下重复使用代码，这也会有效。

在您的示例中，屏幕阅读器会说＆＃34;关闭x＆＃34;因为你没有做任何事情来隐藏＆＃34; x＆＃34;来自屏幕阅读器。您还要添加一个文本节点，然后用类隐藏它。

我会使用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标签向屏幕阅读器提示何时添加暂停，方法是在标题后加上必要的句点或逗号（有关Pausing in a screen reader for accessibility的更多信息）：

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

可访问性：仅限sr或aria-label

2 个答案: