辅助功能:仅限sr或aria标签 [英] Accessibility: sr-only or aria-label

问题描述

来自MDN :

在下面的示例中，按钮的样式看起来像典型的关闭"按钮，中间带有X.由于没有任何迹象表明按钮的目的是关闭对话框，因此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文档:

According to the Bootstrap Documentation:

将元素隐藏到除具有.sr-only的屏幕阅读器之外的所有设备上

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项目中，我如何选择喜欢的那个人?

In a Bootstrap project, how can I choose which one to prefer?

推荐答案

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

In the MDN example, a screen reader will just speak just the word "close" since aria-label overrides the text in the button. This will work even if you re-use the code without Bootstrap.

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

In your example, a screen reader will speak "close x" since you are doing nothing to hide the "x" from screen readers. You are also adding a text node to then hiding it with a class.

我将使用MDN中的示例.

I would use the example from MDN.

这篇关于辅助功能:仅限sr或aria标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！