Looking at some of the videos on this page you can see/hear a screen reader reading out some compiled HTML. There are also some code parts that are visual but not read out loud. That’s because the
<pre> elements contain a
If you want to display something but hide it from being read, you can apply this attribute.
<pre aria-hidden="true"> <ul> <li>apples</li> <li>peaches</li> </ul> </pre>
Hint: In older versions VoiceOver has some trouble with ignoring
aria-hidden confused with the attribute
hidden. A lonely
hidden applied to an element will not only make it invisible for screen readers but also for sighted readers as well. You should use a
hidden (maybe in combination with
display: none; for some browsers) if you don’t need this element any longer. That could be the case, e.g. with part of a registration form that you don’t need any more.
<p aria-hidden="true">Visual appearance, acoustic shielding.</p> <p hidden>Not seen or heard of.</p>
This video shows the effect of aria-hidden and the normal hidden attribute in VoiceOver, ChromeVox and Narrator.
hidden attribute (not the
aria-hidden) can be overruled by