How to hide an HTML element from assistive technologies like 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>
  <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 😃!