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

Question

Long time ago, screen readers decided to start reading everything in an anchor tag <a> as a feature. This allows a link to be short where the context is visually evident but ambiguous for screen readers.
Developers can then write something similar to this line to get the screen reader to read everything:

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

However, with HTML5, the anchor tag became "transparent" and allows to have a wider range of elements inside of it. http://dev.w3.org/html5/markup/a.html#a
This new link functionality is great as we can really encapsulate a whole clickable object with the right semantic.
Unfortunately, the feature reading everything hidden in a link is now biting us:

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

In the markup above, using any hidden content will be read to the screen readers.
The same problem happens when you add an attribute role="dialog" to a <div>

What is the trick to prevent screen readers to read what is really hidden nowadays?

I am using IE10 & Windows 8 Narrator

Answer 1

You can use aria-hidden, but do so with care.

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

Authors MAY, with caution, use aria-hidden to hide visibly rendered content from assistive technologies only if the act of hiding this content is intended to improve the experience for users of assistive technologies by removing redundant or extraneous content. Authors using aria-hidden to hide visible content from screen readers MUST ensure that identical or equivalent meaning and functionality is exposed to assistive technologies.