twitter-bootstrap 引导模式关闭按钮 aria-hidden=true
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21199141/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
bootstrap modal close button aria-hidden=true
提问by Reshma
As per the bootstrap document, adding aria-hidden="true"tells assistive technologies to skip the modal's DOM elements, which explains the presence of aria-hidden=truein the main modal div.
根据引导文件，添加会aria-hidden="true"告诉辅助技术跳过模态的 DOM 元素，这解释aria-hidden=true了主modal div.
What's the purpose of adding aria-hidden=truefor the modal close button in the modal-header div?
添加aria-hidden=true模态关闭按钮的目的是什么modal-header div？
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
**<*div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">× </button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>***
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
回答by Gode Agarunov
ARIA Attributes are used to make the web more accessible to those with disabilities, particularly those using screen readers. With the benefit of sight, we can see that the × (x) symbol is being used as an 'X', indicating that if you click on it the modal will close. For someone using a screen reader, if the modal is set up appropriately:
ARIA 属性用于使残障人士更容易访问网络，尤其是使用屏幕阅读器的残障人士。借助视线，我们可以看到 × (x) 符号被用作“X”，这表示如果您单击它，模态将关闭。对于使用屏幕阅读器的人，如果模态设置正确：
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
When a screen reader goes over this code, it will read simply read "Close Button".
当屏幕阅读器阅读此代码时，它只会读取“关闭按钮”。
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span>×</span></button>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">×</button>
Both of these will lead to the same result when read by the screen reader, it saying "Close Multiplication Symbol Button" or something to that effect.
当屏幕阅读器阅读时，这两个都会导致相同的结果，它说“关闭乘法符号按钮”或类似的东西。
<button type="button" class="close" data-dismiss="modal" aria-label="Close" aria-hidden="true">×</button>
In this last case, adding aria-hidden="true" to the button itself will make the screen reader ignore the entire close button, forcing the user to continue reading to the footer before finding the close button (If there is a close button in the footer, if there isn't, they are going to have a hard time closing it)
在最后一种情况下，将 aria-hidden="true" 添加到按钮本身将使屏幕阅读器忽略整个关闭按钮，迫使用户在找到关闭按钮之前继续阅读页脚（如果有关闭按钮页脚，如果没有，他们将很难关闭它）
The functionality for the typical web user is the same in all these examples, but for a segment of the population, taking care and consideration in the design, layout, and tag placement could be the difference between a website frequently visited and a website never visited again.
典型网络用户的功能在所有这些示例中都是相同的，但对于一部分人群而言，在设计、布局和标签放置方面的谨慎和考虑可能是经常访问的网站和从未访问过的网站之间的区别再次。
I know I kind of went off topic here, but when using aria-attributes, just pretend you are running a screen reader and visually see the content, content that can only be understood visually should have aria-hidden tags on it, and the ARIA tag system provides many more types of tags for providing additional information to those who need it, including having elements visible only to screen readers.
我知道我在这里有点跑题了，但是在使用 aria-attributes 时，假设您正在运行屏幕阅读器并直观地查看内容，只能在视觉上理解的内容上应该有 aria-hidden 标签，并且 ARIA标签系统提供了更多类型的标签，用于向需要的人提供附加信息，包括仅对屏幕阅读器可见的元素。
For more information: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA
更多信息：https: //developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA
回答by Daniel G?ransson
The purpose of the aria-hidden on the close button is that in that markup the "X" or "times"-symbol won't tell screen readers much.
隐藏在关闭按钮上的咏叹调的目的是在该标记中“X”或“时间”符号不会告诉屏幕阅读器太多。
To make it accessible the close button should look something like this:
要使其可访问，关闭按钮应如下所示：
<button type="button" title="Close">
<span aria-hidden="true">×</span>
<span class="hide">Close</span>
</button>
And visually hide the .hide content with CSS.
并使用 CSS 在视觉上隐藏 .hide 内容。
回答by Britnet
Not sure if this was answered however i recently had this issue and this was my answer, hope it helps.
不确定这是否得到了回答，但是我最近遇到了这个问题，这是我的回答，希望它有所帮助。
a close button could look like this
关闭按钮看起来像这样
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">× </button>
or
或者
<button type="button" class="close" data-dismiss="modal">×</button>
回答by TomerBu
@Daniel Grandson's answer should be the accepted answer.
@ Daniel Grandson的答案应该是公认的答案。
just to add a little something: Bootstrap also provides the sr-onlyclass to hide "accessibility" elements.
只是补充一点：Bootstrap 还提供了sr-only类来隐藏“可访问性”元素。
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<button type="button" class="sr-only" data-dismiss="modal">Dismiss</button>
@Gode Agarunov- Thanks for your very informative answer and aria-label. I Think it makes more sense to add an element for accessibility rather than nesting a new element to the existing one.
@ Gode Agarunov- 感谢您提供信息丰富的回答和 aria-label。我认为为可访问性添加一个元素而不是在现有元素中嵌套一个新元素更有意义。
