辅助功能：sr-only 或 aria-label
Accessibility: sr-only or aria-label
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项目中，我该如何选择自己喜欢的项目？
在 MDN 示例中，屏幕 reader 只会说出单词 "close"，因为 aria-label 会覆盖按钮中的文本。即使您在没有 Bootstrap.
的情况下重新使用代码，这也会起作用
在您的示例中，屏幕 reader 会说话 "close x"，因为您没有采取任何措施从屏幕 reader 中隐藏 "x"。您还添加了一个文本节点，然后使用 class.
隐藏它
我会使用 MDN 中的示例。
class sr-only class 用于整块文本内容，这些内容仅对使用屏幕的用户有用 reader 并且应该对其他人隐藏。
来自我正在开发的应用程序的示例提供了有关将可访问控制器与网络应用程序一起使用的说明：
<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>
在您的示例中，您只想为屏幕提供不同的文本内容 reader。要回答您的具体问题，请使用 MDN 示例。
我已经使用 aria-labels 向屏幕提示 reader 何时通过在标题后缀句点或逗号来添加停顿（有关 Pausing in a screen reader for accessibility 的更多信息）：
<h1 aria-label="Hello World.">
Hello World
</h1>
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项目中，我该如何选择自己喜欢的项目？
在 MDN 示例中，屏幕 reader 只会说出单词 "close"，因为 aria-label 会覆盖按钮中的文本。即使您在没有 Bootstrap.
在您的示例中，屏幕 reader 会说话 "close x"，因为您没有采取任何措施从屏幕 reader 中隐藏 "x"。您还添加了一个文本节点，然后使用 class.
隐藏它我会使用 MDN 中的示例。
class sr-only class 用于整块文本内容，这些内容仅对使用屏幕的用户有用 reader 并且应该对其他人隐藏。
来自我正在开发的应用程序的示例提供了有关将可访问控制器与网络应用程序一起使用的说明：
<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>
在您的示例中，您只想为屏幕提供不同的文本内容 reader。要回答您的具体问题，请使用 MDN 示例。
我已经使用 aria-labels 向屏幕提示 reader 何时通过在标题后缀句点或逗号来添加停顿（有关 Pausing in a screen reader for accessibility 的更多信息）：
<h1 aria-label="Hello World.">
Hello World
</h1>