A class effect of aria-label bootstrap, arial-hidden and the like - the front end

ARIA property is used to make the web more accessible to those people with disabilities, especially those who use screen readers. By visual advantage, we can see × (x) is used as a symbol "x", it indicates if the click, the closed mode. For users who use screen readers, if the mode is set correctly:

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

When a screen reader to read this code, it will 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>

When reading a screen reader, these two methods will lead to the same result, it will say "Close multiplication sign button" or similar effect.

<button type="button" class="close" data-dismiss="modal" aria-label="Close" aria-hidden="true">&times;</button>

In this last case, add the aria-hidden = "true" button itself will ignore the entire screen reader close button, forcing the user to continue reading before closing footer button (if you have a close button in the footer, if not, they will be difficult to close)
in all these cases, the typical web user functionality is the same, but for some people, consider the design, layout and placement of labels may be aspects of the site visit frequently and have never visited the difference between the sites.
I know that I leave the topic, but when using the aria-attributes, pretend you're running a screen reader and what you see visually, can only be understood visual content on the label should aria-hidden, system, and ARIA markup to provide more many types of labels that need to provide additional information, including the elements to see the screen reader is.

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