WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Icon fonts

for

From: Mallory
Date: Jul 5, 2019 8:34AM

- 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>
<span class="visually-hidden">Facebook (opens in new tab)</span>
</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