WebAIM - Web Accessibility In Mind

E-mail List Archives

ARIA-hidden vs role presentation for font icons

for

From: Alastair Campbell
Date: Sep 13, 2013 5:08AM

Hi everyone,

Hopefully a quicky: I saw a tweet recently suggesting aria-hidden to hide
font-icons from screen readers.

The HTML would be something like:
<a href="something"><i class="icon1"></i> Link text</a>

CSS is then used to insert the icon into the <i> tag.

From my reading [1], role=presentation would hide the meaning of the tag,
rather than the content. Is that right?

Wouldn't it be more appropriate to use aria-hidden=true?

Another option would be using a pseudo element with CSS content to add the
icon, which effectively hides it from screen readers to.

Cheers,

-Alastair