html - 辅助功能:sr-only 或 aria-label

Question

From MDN :

In the example below, a button is styled to look like a typical "close" button, with an X in the middle. Since there is nothing indicating that the purpose of the button is to close the dialog, the aria-label attribute is used to provide the label to any assistive technologies.

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

根据 Bootstrap 文档:

Hide an element to all devices except screen readers with .sr-only

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

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

在 Bootstrap 项目中，如何选择自己喜欢的项目？

Answer 1

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

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

我会使用来自 MDN 的示例。