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 aria-hidden attribute.

If you want to display something but hide it from being read, you can apply this attribute.

<pre aria-hidden="true">

Hint: In older versions VoiceOver has some trouble with ignoring aria-hidden.

Don’t get 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>

Video example

This video shows the effect of aria-hidden and the normal hidden attribute in VoiceOver, ChromeVox and Narrator.

Hint: The hidden attribute (not the aria-hidden) can be overruled by display: value;