辅助功能：仅限 sr 或 aria-label

From MDN https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute:

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

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

根据引导文档：

使用 .sr-only 对除屏幕阅读器之外的所有设备隐藏元素

所以我想我也可以写：

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

在 Bootstrap 项目中，我如何选择更喜欢哪一个？

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

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

我会使用 MDN 中的示例。