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. Any input is appreciated!

Answer 1

If it's just a decorative icon, it should better be served with CSS instead of HTML, for example with a pseudo-element: ::after(content:…; font:…;). Unfortunately, some screenreaders might read this content, too, and we can't apply WAI-ARIA in CSS, of course. So, depending on your situation, you might be "forced" to use markup with aria-hidden="true" instead.

If possible, you should also use a corresponding Unicode symbol (like ☁, which is "U+2601 CLOUD") instead of a irrelevant character (like c).

If there is no corresponding character, you should make use of Unicode's Private Use Areas, which are code points that are left undefined, so you can define your own characters/symbols.

You might be interested in these posts:

• css-tricks.com: HTML for Icon Font Usage
• nimbupani.com: Markup-free icon fonts using unicode-range

Answer 2

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;
}

Answer 3

While aria-hidden="true" works to hide the audible icon, it will still show up in the assistive technology's list of links and headings.

I'm still trying to find a way to hide them entirely, but it's tricky. To the OP, yes, aria-hidden="true" will hide them somewhat, but not entirely. Don't rely on it alone. Also, make sure you test with real users!

I came across this really good article: http://pictos.cc/articles/using-icon-fonts/

Best of luck!