E-mail List Archives

Search E-mail List Archives for

Number of posts in this thread: 6 (In chronological order)

From: Alastair Campbell
Date: Fri, Sep 13 2013 5:08AM
Subject: ARIA-hidden vs role presentation for font icons
No previous message | Next message →

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

From: Cameron Cundiff
Date: Fri, Sep 13 2013 6:30AM
Subject: Re: ARIA-hidden vs role presentation for font icons
← Previous message | Next message →

>
> 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.
>

Do you mean with an ::after selector with a content property? I'd go that
route and specify the unicode for the glyph in the content property, and
also put aria-hidden on the `i` tag in case some screen has support for CSS
content. Caveat: I haven't used role=presentation.

i::after {
content: "/2708" /* unicode icon */
}

From: Alastair Campbell
Date: Fri, Sep 13 2013 8:05AM
Subject: Re: ARIA-hidden vs role presentation for font icons
← Previous message | Next message →

Thanks, that's what I thought.

I had thought they were using the <i> to cater for older browsers (using it
as a background or something), but digging in further it looks like it is a
CSS ::before selector.

I suspect that making it a selector on the <a> rather than the <i> would
solve it as well, but I'll test it.

-Alastair


Cameron Cundiff wrote:

>
> Do you mean with an ::after selector with a content property? I'd go that
> route and specify the unicode for the glyph in the content property, and
> also put aria-hidden on the `i` tag in case some screen has support for CSS
> content. Caveat: I haven't used role=presentation.
>
> i::after {
> content: "/2708" /* unicode icon */
> }
>

From: Jared Smith
Date: Fri, Sep 13 2013 8:37AM
Subject: Re: ARIA-hidden vs role presentation for font icons
← Previous message | Next message →

On Fri, Sep 13, 2013 at 8:05 AM, Alastair Campbell wrote:

> I suspect that making it a selector on the <a> rather than the <i> would
> solve it as well, but I'll test it.

Yes, this would work to inject the character, but then you wouldn't
have an element to which aria-hidden can be attached to hide the
character. You wouldn't want aria-hidden on the link or all of the
link content would be hidden. Besides, aria-hidden will (or at least
should) be ignored on focusable elements, such as links. So it seems
the <i> (I'd prefer a <span>) is necessary if you want to inject the
character inside the link AND have it hidden with aria-hidden.

Jared

From: Alastair Campbell
Date: Fri, Sep 13 2013 9:44AM
Subject: Re: ARIA-hidden vs role presentation for font icons
← Previous message | Next message →

Ah - I had thought injected content was not generally read out. In fact,
I'm sure that was the case quite recently in Jaws at least?

I did a quick test page, and when using a nonsense character, aria-hidden
was definitely the best option in VO & NVDA:
http://alastairc.ac/testing/icon-font-link.html

Given it is supposed to work that way, I assume that would work in Jaws to.

Thanks,

-Alastair

From: Jared Smith
Date: Fri, Sep 13 2013 10:12AM
Subject: Re: ARIA-hidden vs role presentation for font icons
← Previous message | No next message

It is not safe to assume that screen readers will not read generated
content. VoiceOver reads the the arrow for each of the instances where
it is present, except for the one with aria-hidden=true. So, if you
are using generated content and do not want it to be read, aria-hidden
is definitely a solution.

The other option is to use CSS. In your example,
a span {display:none;}
would work.

Jared