WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Another Color Contrast question

for

From: Jesse Hausler
Date: Oct 3, 2014 2:42PM

We've been treating icon fonts as text because on a technical level, it is
displayed through OS/Browser functions for displaying text.

When it comes to alternative text. This is the best route i've come across.

<div aria-hidden="true" class="close">::before</div>
<div class="hiddenAssistiveText">Close Window</div>

You aria-hide the icon font because some screen readers (including iOS
VoiceOver) will announce the icon font as an emoji character. If you're
ever heard, "Girl's Head" or "Clock face *something* o'clock" on a
website.. that's why.

I believe that LinkedIn uses this method as well.

Jesse


On Fri, Oct 3, 2014 at 1:25 PM, Stefan Sollinger < <EMAIL REMOVED> >
wrote:

> You should really ensure sufficient contrast no matter if it's text or not,
> and the fact that you may comply with WCAG because it's not text doesn't
> help the visitors to your site who can't see some of the content (text or
> not).
>
> Having said that, the question if an icon font is text or not is an
> interesting one. I think the answer to that question is the definition of
> "text" as quoted by Andrew earlier in this thread:
>
> Text is defined as "sequence of characters that can be programmatically
> determined, where the sequence is expressing something in human language".
>
> I always thought defining "text" is a bit silly but actually this example
> shows why it is necessary.
>
> In the example of the time/clock font Andrew quoted you clearly have a
> sequence of characters (numbers) that express something in human language
> (time), so this particular example is clearly text, even though it uses a
> very unusual font that visually happens to look like a clock. Change the
> font and you'll recognise the text.
>
> Most icon fonts I've seen show symbols but do not consist of text according
> to above definition. The character itself does not express anything in
> human language and/or cannot be programmatically determined, only it's
> visual shape conveys information so it's non-text content. Try changing the
> font or reading it with a screen reader, often you get either nothing or
> some completely different character or symbol. I've seen icon fonts that
> come across as random characters or punctuation marks when rendered with
> the wrong font, these clearly do not express anything in human language.
>
> Stefan
> Jon,
> That's a good question. I'm not certain, but I'm leaning toward thinking
> that they count as text.
>
> For example, this page (http://timepiece.inostudio.de/) has clocks that
> are
> made with custom symbol fonts. There is an underlying span that has
> numbers associated with characters in private Unicode space. So, the parts
> of the clock seem like they are a form of text... It is an uncomfortable
> fit at first blush, I'll agree, but am interested in other's thoughts.
>
> AWK
>
>