Aria-hidden

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">
<ul>
 <li>apples</li>
 <li>peaches</li>
</ul>
</pre>

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