E-mail List Archives

You are here: Home > Community > E-mail List Archives > View Thread

Thread: Icon fonts

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

From: Colleen Gratzer
Date: Fri, Jul 05 2019 8:13AM
Subject: Icon fonts
No previous message | Next message →

In my research at some point, I came across this as a solution to using
icon fonts:

<a href="http://www.facebook.com">Facebook (opens in
new tab)</a>

Is this an acceptable way to approach this situation? Is there a better way?

If so, this is hiding the icon from screen readers but still reading out
"Facebook (opens in new tab)," yes?

Thanks!

Colleen Gratzer
Chief Creative Officer | Brand Academyâ¢ Certified Branding Expert |
Accessibility Specialist
Gratzer Graphics LLC https://gratzergraphics.com

Design Domination podcast

From: Mallory
Date: Fri, Jul 05 2019 8:20AM
Subject: Re: Icon fonts
← Previous message | Next message →

Hi,
while it does do those two things (hides the icon from AT and ensures the link has full text), it means users who need to replace fonts (for readability reasons) or for whatever reason cannot get the custom fonts to load (network, browser support, JS issues), the link is not identifiable by sighted folks.

This could be slightly mitigated for mouse and keyboard users by showing that hidden text on hover and focus, tho that leaves out speech-rec and many touchscreen users.

I try as hard as possible to keep some visible text available even when icons are used. I do like SVGs better than icon fonts but there are some instances where an SVG may also not appear, so it's not an easy "just use SVGs instead of icon fonts" answer. When I use SVGs (inline) I do it very similarly to your code (aria-hide the SVG and either use text, hidden text or as a last resort aria-label on the control).

cheers,
Mallory

On Fri, Jul 5, 2019, at 4:13 PM, Colleen Gratzer wrote:
> In my research at some point, I came across this as a solution to using
> icon fonts:
>
> <a href="http://www.facebook.com"> aria-hidden="true">Facebook (opens in
> new tab)</a>
>
> Is this an acceptable way to approach this situation? Is there a better way?
>
> If so, this is hiding the icon from screen readers but still reading out
> "Facebook (opens in new tab)," yes?
>
> Thanks!
>
> Colleen Gratzer
> Chief Creative Officer | Brand Academyâ¢ Certified Branding Expert |
> Accessibility Specialist
> Gratzer Graphics LLC https://gratzergraphics.com
>
> Design Domination podcast
> > > > >

From: Mallory
Date: Fri, Jul 05 2019 8:34AM
Subject: Re: Icon fonts
← Previous message | No next message

- yeah, your code looks good to me
- SVGs can show in instances where users replace fonts, yeah.

There may be browsers/user agents which do not support SVGs, however all the major/recent ones do so far as I know.

A note on making SVGs work well with Windows High Contrast: Set the colour you want on the SVG as the "color" property of your anchor/control and let the SVG inherit it:

a {
color: /* color you want for the SVG */
}
a svg {
fill: currentColor;
}

(this is assuming some things, like that the icons only have one colour, and that they are "inline":
<a href="http://www.facebook.com">
<svg aria-hidden="true" focusable="false" ...>...</svg>
Facebook (opens in new tab)
</a>

this is a really common way I do it.)

cheers,
Mallory

On Fri, Jul 5, 2019, at 4:27 PM, Colleen Gratzer wrote:
> Thanks, Mallory. So are you saying that my code is fine as is, but you
> use SVGs so that, if fonts are replaced, sighted users can still see the
> SVG image to know what the link is for (Facebook, in my example)?
>
> Just want to make sure I'm understanding.
>
> Colleen