Hacker News Reader

Comment by TonyTrapp | Hacker News Reader

Regular reminder that icon fonts are bad for accessibility and are technically troublesome also in other ways: https://github.blog/2016-02-22-delivering-octicons-with-svg/

View on HN

To illustrate an issue this article describes, https://i.imgur.com/TzMXgUd.png is what the linked page looks like with a forced/limited font selection on Firefox.

If you block fonts, this is not a surprise.

Using a fresh in stall of Firefox, the linked page displays the icons correctly.

that,s the point. not everyone WANTS to load them or CAN load/see them.

I can't see how these would be bad for accessibility. The markup is a<span> with a human readable word like "home" in it.

https://github.blog/2016-02-22-delivering-octicons-with-svg/...

Raw icon names (that you cannot influence) often don't make a good replacement for proper alt text. Quite often they should not be read out at all. Furthermore, people forcing websites to use a font like OpenDyslexic will see these non-descriptive icon names instead of the real icons.

Just to complement other's responses, accessibility is a spectrum.

We ought to believe someone chooses to use an icon for aesthetics AND usability reasons. If the icon can't be rendered at all, it defeats it's purpose despite it having a "description".

Ultimately, if a well designed, user-friendly system doesn't work the way it's intended to, it is an accessibility issue of some degree. Albeit, some times more trivial than others.

The content "trending_up" is almost useless, a voiceover will not interpret the underscore as a space.

There are no ARIA attributes that link any of the text to the buttons.

It seems like the solution is to improve the accessibility tools. The information is all already there.

That's not the solution. The solution is adding the correct attributes to the markup. Attributes that are universally recognized and already work with a11y tools.

In this example we'd add an aria-labelledby to the button which references the span with the correct info.

The SVGs used to generate the icon fonts are Apache 2.0 licensed: https://github.com/google/material-design-icons/tree/master/....

When developing, the fact that icon fonts follow the size and color of the surrounding text is nice, though. E.g. when tweaking the text color of a button.

At least in my limited frontend experience.

SVGs can do the same thing.

That SVG does have to be inline though, which drastically increases your HTML page’s size. You cannot style an SVG loaded in an IMG element.

Imagine rendering 50 rows with each 6 icons, 1kb each. There are 6 unique icons, so it’s only 6kb each loading them from the server, but inline you’ll have 300kb of SVG icons

You can use an "SVG sprite" with <use>. No need to inline the SVG every time.

Oh? I have to look that up

Took me a while to figure it all out, but it works surprisingly well. I have been using https://icomoon.io/ to generate the sprites. They also provide a JS polyfill to support IE.

But how do you actually apply the styling? Just add a class to the <use> tag which contains “color:red;” ?

This should work as long as the SVG shapes have the "fill" and/or "stroke" set to "currentColor".

You can export your SVGs with fill="currentColor" and your color attribute onto the SVG tag or its container would work.

Since at $JOB i'm using SVG icons with more than one color, i use fill="var(--svg-color-base)" or fill="var(--svg-color-accent)" so i can precisely set which color i want, in a perfectly scope-able manner.

The greatest advantage is that you can reference externally your svg with xlink.href on top of your website: you have to make one more request, but it's cacheable. Pick your tradeoff :)

You're saying you can embed all the SVGs onto one page, and then reference them on other pages/domains by using xlink.href? I haven't heard of this?

So what you're describing is having site.com/page1 which has markup: <body> <svg id="icon-1"> ... </svg> </body>

and then on site.com/page2 having

Or something of this manner? Haven't encountered this, but sounds awesome; especially since you'd get the power of both inlining and caching the asset.

Either fill: currentColor or fill: var(--iconColor, currentColor) should do the trick. I prefer the 2nd one because it lets me change iconColor whenever I find it appropiate

You can also use Boxy SVG to create and edit SVG sprites: https://boxy-svg.com/#tour-symbols

Boxy says "15 day free trial" but there's no information about how much it costs.

Dora anyone know? I'm not going to sign up for something without knowing what I'm getting into.

Linux desktop app is free, macOS desktop app costs 9.99 USD (one-time payment), web app costs 9.99 USD / year (no cloud services) or 9.99 USD / month (with cloud services). The complete pricing table is shown in the footer area of the home page when you open it with a Chromium-based browser.

> when you open it with a Chromium-based browser

Looks like they're using the experimental CSSStyleSheet() constructor [1] to display the pricing table. Ugh.

[1] https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleShe...

Someone has to push us to the future! Why wouldn't a business be happy to exclude 30% of browsers?

https://www.npmjs.com/package/construct-style-sheets-polyfil...

We are using this at GitLab: https://gitlab-org.gitlab.io/gitlab-svgs/, using svg-sprite to build the sprite file: https://www.npmjs.com/package/svg-sprite

compared to the massive Js CSS and Images included on almost all 99.9% of pages a bit of SVG is trivial.

Everything's a bit in isolation, that's how they get ya. Easily to bulk up, hard to trim back down.

sigh tell me about it

1kb is a lot for a simple svg icon.

That said, if you have a single page app already, you can render as many icons as you want, since you’ll only download them once anyway.

But if you want 5 icons, 5K of SVG beats 55K of WOFF.

I wonder how React copes with a whole bunch of inline SVGs. Seems expensive

Copes totally fine and it's trivial to memoise them anyway.

Most icons are generally tiny. Millage will vary, but they can speed up your site. Fewer requests for a slightly large page size.

Thanks for the clarification. Clearly, I have things to learn about SVGs.

So is Javascript but that hasn't stopped anybody

not true. many design their sites THOUGHTFULLY and as a result they can be accessed without js. case in point: site i,m writing this comment on. counterpoint: almost anything on google.com domain these days.

(2016)? How about not using an ancient article to make a claim about a fast changing space like web dev?

Every single reasons for switching away from icon fonts mentioned in that article is still valid. Icon fonts were already a bad idea in 2016, and they still are a bad idea in 2021.

Reply on news.ycombinator.com