bootstrap中aria-hidden=true的作用

http://stackoverflow.com/questions/21199141/bootstrap-modal-close-button-aria-hidden-true

最后一个人回答得不错：

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:

<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</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>&times;</span>
</button> 

<button type="button" class="close" data-dismiss="modal" aria-label="Close">&times;</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">&times;</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)

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.

For more information: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA