Screen readers read everything in anchor tags or role = "dialog"

Question

For a long time, screen readers decided to start reading everything in the attached <a> tag as a function. This allows a short link where the context is visually obvious but ambiguous for on-screen readers.
Then, developers can write something similar to this line to make the screen reader read everything:

<a href="#">More<span style="display: none;"> information about XYZ</span></a> 

However, with HTML5, the anchor tag became "transparent" and allowed for a wider range of elements within it. http://dev.w3.org/html5/markup/a.html#a
This new link functionality is great because we can really encapsulate an entire clickable object with the right semantics.
Unfortunately, a function that reads everything that is hidden in the link now bites us:

 <li><a href="#"> [ complicated markup ] </a></li> 

In the above markup, the use of hidden content will be read to screen readers.
The same problem occurs when you add the role="dialog" attribute to the <div>

What is the trick that allows screen readers to read what is truly hidden these days?

I am using IE10 and Windows 8 narrator

Answer 1

You can use aria-hidden , but do this with caution.

http://www.w3.org/TR/wai-aria/states_and_properties#aria-hidden

Authors MAY, with caution, use hidden aria to hide apparently visualized content from assistive technologies only if the act of hiding this content is intended to enhance the experience for assistive technology users by removing redundant or extraneous content. Authors using an aria hidden to hide visible content from on-screen readers SHOULD make sure that identical or equivalent values ​​and functionality are exposed to assistive technologies.