What is the appropriate way to hide icons from screen readers

Question

In my web application, I have made myself a font that consists solely of icons. I use these icons to complement titles and sub titles within the application and make it more visually appealing.

However, screen readers like JAWS read this out and it makes for an unpleasant experience for users of screen readers.

For instance the character c displays an image of a cloud. I use it in this way to complement for instance a header such as <h1>:

<span class="my-font">c</span>

Now I would like for screen readers to completely ignore this as this is just complementing an existing title and not adding any new meaning to what's on the page. Through my research I have found two possibilities:

aria-hidden="true" or role="presentation"

I'm just not sure which one of these (or perhaps both) are suitable to what I am trying to achieve.

Answer 1

You should use the aria-hidden="true" attribute, which says:

Indicates that the element and all of its descendants are not visible or perceivable to any user as implemented by the author.

This means that the element is not supposed to be perceived by any user. So use:

<span class="my-font" aria-hidden="true">c</span>

If the icon is supposed to be a link or is not just for decoration, I suggest you have some text accompanying them so that screen readers knows what it is. You can move the text off screen so that it is only visible to screen readers.

HTML

<span>
    <span class="my-font" aria-hidden="true">c</span>
    <span class="screen-reader">About me</span>
</span>

CSS

.screen-reader {
    position:absolute;
    top:-9999px;
    left:-9999px;
}