Originally posted here!
To hide an HTML element from assistive technologies like screen readers etc., you can use the aria-hidden attribute on any HTML element and set the value as true.
TL;DR
<html>
<body>
<!--
Set the `aria-hidden` attribute on the `img` HTML element
and its value to `true` to make it hidden from assistive technologies.
-->
<img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/12/Black_Paw.svg/852px-Black_Paw.svg.png"
width="200"
height="200"
aria-hidden="true"
/>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Veniam alias
voluptas, iste asperiores laboriosam labore eligendi eveniet saepe quas
sequi voluptatibus, accusamus totam sint aspernatur ipsa doloremque quod
vero qui nobis praesentium velit. Labore obcaecati distinctio, iure aut
nemo sequi. Saepe corrupti inventore error autem corporis. Natus animi
doloremque eligendi! Provident sapiente reiciendis doloribus similique
optio. Mollitia libero impedit doloremque inventore odio atque illum unde!
</p>
</body>
</html>
For example, let's say we have a webpage with some text and one image but the image is an SVG file that doesn't impart any information to the user other than its visual appearance.
The HTML will look like this,
<html>
<body>
<img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/12/Black_Paw.svg/852px-Black_Paw.svg.png"
width="200"
height="200"
/>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Veniam alias
voluptas, iste asperiores laboriosam labore eligendi eveniet saepe quas
sequi voluptatibus, accusamus totam sint aspernatur ipsa doloremque quod
vero qui nobis praesentium velit. Labore obcaecati distinctio, iure aut
nemo sequi. Saepe corrupti inventore error autem corporis. Natus animi
doloremque eligendi! Provident sapiente reiciendis doloribus similique
optio. Mollitia libero impedit doloremque inventore odio atque illum unde!
</p>
</body>
</html>
Now to make the img HTML element hidden to assistive technologies since it doesn't impart any information to the user, we can use the aria-hidden attribute and set its value as true.
It can be done like this,
<html>
<body>
<!--
Set the `aria-hidden` attribute on the `img` HTML element
and its value to `true` to make it hidden from assistive technologies.
-->
<img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/12/Black_Paw.svg/852px-Black_Paw.svg.png"
width="200"
height="200"
aria-hidden="true"
/>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Veniam alias
voluptas, iste asperiores laboriosam labore eligendi eveniet saepe quas
sequi voluptatibus, accusamus totam sint aspernatur ipsa doloremque quod
vero qui nobis praesentium velit. Labore obcaecati distinctio, iure aut
nemo sequi. Saepe corrupti inventore error autem corporis. Natus animi
doloremque eligendi! Provident sapiente reiciendis doloribus similique
optio. Mollitia libero impedit doloremque inventore odio atque illum unde!
</p>
</body>
</html>
We have successfully hidden the img HTML tag from assistive technologies.
See the above code live in the codesandbox.
That's all ๐!
Top comments (0)