How to hide an HTML element from assistive technologies like screen readers?
Tags: html
Published: 2022-12-12 05:30:04

---
  title: How to hide an HTML element from assistive technologies like screen readers?
  published: true
  tags: HTML5
  date: Mon Dec 12 2022 11:00:04 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/hide-html-element-from-assistive-technologies-screen-readers
  cover_image: https://res.cloudinary.com/df8e3k5he/image/upload/blog/main_207d418163.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/hide-html-element-from-assistive-technologies-screen-readers)
  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
<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
<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
<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](https://codesandbox.io/s/hide-html-element-from-assistive-technologies-707oef?file=/index.html).

That's all 😃!