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
>
> -----Original Message-----
> From: <EMAIL REMOVED> [mailto:
> <EMAIL REMOVED> ] On Behalf Of Jonathan Avila
> Sent: Friday, October 03, 2014 3:13 PM
> To: WebAIM Discussion List
> Subject: Re: [WebAIM] Another Color Contrast question
>
> > it says that "Making icons using simple line drawings that meet the
> contrast provisions for text" should be considered but are not required for
> conformance.
>
> Where do icon fonts fall into this? Are they text or non-text content?
>
> Jonathan
>
> -----Original Message-----
> From: <EMAIL REMOVED> [mailto:
> <EMAIL REMOVED> ] On Behalf Of Jesse Hausler
> Sent: Thursday, October 02, 2014 6:49 PM
> To: WebAIM Discussion List
> Subject: [WebAIM] Another Color Contrast question
>
> I've been diving more into the area of color contrast when it comes to
> icons.
>
> Under Additional Techniques (Advisory) for 1.4.3 <
>
> http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html#visual-audio-contrast-contrast-techniques-head
> >,
> it says that "Making icons using simple line drawings that meet the
> contrast provisions for text" should be considered but are not required for
> conformance.
>
> If the following are SVGs, would these be considered "simple line
> drawings"?
>
> Choose the Icons link at the top of the page and scroll down a bit to the
> Custom Icon heading.
> http://sfdc-styleguide.herokuapp.com/?id=style
>
> They're white icons on color backgrounds. Apparently, the style is all the
> rage these days. You may have noticed your favorite app icon change to
> something similar on iOS and Android.
>
> If they aren't considered line drawings, as SVGs (images) should I not
> worry about contrast for these anyways? I only have been since we're using
> these as buttons and I want to make sure.
>
> On the other hand, I don't want to make our design team re-architect
> something if it isn't necessary for WCAG.
>
> Thanks again,
> Jesse
> > > messages to <EMAIL REMOVED>
> > > messages to <EMAIL REMOVED>
> > > > > > >