Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Icons – Google Fonts

fonts.google.com

Post reply on HN
Print view View original

61–70 of 190 posts

Re: Icons – Google Fonts

#61

Post by SquareWheel »

charcircuit wrote: post #37
eurasiantiger wrote: post #4

The provided usage example is bad for accessibility: the name of the icon, e.g. ”check_circle”, will be announced by screen readers. If there is other contextual information that explains the icon, the icon can be hidden from screen readers using aria-hidden=”true”. However, in cases where the icon appears stand-alone, it needs to contain a human-understandable text that explains its meaning. Also, never use Google’s…

>However, in cases where the icon appears stand-alone, it needs to contain a human-understandable text that explains its meaning. Why? It's the screen reader's job to inform users of what's on their screens. It's not my job to give descriptions to things. >The CDNs are used to track your users. Do you have any evidence to support this claim?

> Do you have any evidence to support this claim?

Seems they have request logs and publish the aggregate statistics. There's no indication of tracking otherwise.

> Google Fonts logs records of the CSS and the font file requests, and access to this data is kept secure. Aggregate usage numbers track how popular font families are, and are published on our analytics page. We use data from Google’s web crawler to detect which websites use Google fonts. This data is published and accessible in the Google Fonts BigQuery database.

https://developers.google.com/fonts/faq#what_does_using_the_...

Re: Icons – Google Fonts

#62

Post by jfk13 »

tobyhinloopen wrote: post #31
jfk13 wrote: post #25

I see they promote the ligature approach: face where the font is expected to ligate the characters 'f', 'a', 'c', 'e' into a single glyph. This can be problematic on the web, as it means that if a user doesn't get your webfont for any reason (download failed, browser settings that disable webfonts, accessibility options that override fonts for clarity, etc) the entire word will appear in a fallback font, often totall…

I just set overflow: hidden and a width of 1em (so it’s a square)

In which case the layout may survive, but I expect the "labels" that appear when the icon font fails will be cropped to their first couple of letters or so: not a great fallback in terms of helping the user understand what they're meant to be.

Re: Icons – Google Fonts

#63

Post by EveYoung »

corty wrote: post #8
eurasiantiger wrote: post #4

The provided usage example is bad for accessibility: the name of the icon, e.g. ”check_circle”, will be announced by screen readers. If there is other contextual information that explains the icon, the icon can be hidden from screen readers using aria-hidden=”true”. However, in cases where the icon appears stand-alone, it needs to contain a human-understandable text that explains its meaning. Also, never use Google’s…

And special-purpose-font/script CDNs don't improve load times any more because browser caches are partitioned by domain nowadays. So using a CDN for fonts or scripts just increases your downtime probability and your GDPR headaches.

I guess it depends on where you're currently hosting your site and if you're using a CDN already. For smaller/private projects, a potential downtime of Google's CDN and GDPR are probably not too much of a concern.

Re: Icons – Google Fonts

#64

Post by EveYoung »

SquareWheel wrote: post #57

The real benefit here is that you can export these as SVG. Please do this instead. Icon fonts are convenient, but they're really bad for web performance. It needs to download the entire font even if there's only a handful of icons on a page. SVGs have excellent browser support, and decent CMS support. You can enable them in Wordpress for example with a little tinkering. If you want to make your site faster (and I hop…

Or get the SVGs from Github directly: https://github.com/google/material-design-icons

Re: Icons – Google Fonts

#65

Post by eurasiantiger »

laurent92 wrote: post #19
eurasiantiger wrote: post #4

The provided usage example is bad for accessibility: the name of the icon, e.g. ”check_circle”, will be announced by screen readers. If there is other contextual information that explains the icon, the icon can be hidden from screen readers using aria-hidden=”true”. However, in cases where the icon appears stand-alone, it needs to contain a human-understandable text that explains its meaning. Also, never use Google’s…

“Check-circle” is exactly the amount of information that the able reader has. Sight-deficient users are as much used to those weird words as able users are used to unintelligible icons.

No. A sighted user can perceive the placement of the icon within its context, e.g. a checked circle within a row in a table, and deduce that it represents confirmation of whatever information the column of the table represents in the context of the row. This information is not available to a screen reader user unless the visually hidden text makes it explicitly available to them.

By the way, your comment shows an ableist bias: an analogous assumption would be that a person who cannot walk is content because they are used to a wheelchair.

Re: Icons – Google Fonts

#66

Post by hunter2_ »

laurent92 wrote: post #19
eurasiantiger wrote: post #4

The provided usage example is bad for accessibility: the name of the icon, e.g. ”check_circle”, will be announced by screen readers. If there is other contextual information that explains the icon, the icon can be hidden from screen readers using aria-hidden=”true”. However, in cases where the icon appears stand-alone, it needs to contain a human-understandable text that explains its meaning. Also, never use Google’s…

“Check-circle” is exactly the amount of information that the able reader has. Sight-deficient users are as much used to those weird words as able users are used to unintelligible icons.

If the image stands alone such that sighted users must parse it, then your logic is correct. But if the image is merely decorative due to adjacent text such that sighted users gloss over the image, aria-hidden affords users of screen readers that exact same efficiency instead of wasting their time.

In other words, eyes can skip over decorations without the developer needing to flag them as such, but audio can't auto-skip.

Re: Icons – Google Fonts

#67

Post by a1o »

Whenever Google makes something too easy to use for development I get a feeling they are moving on from it - in this case Material.

Re: Icons – Google Fonts

#68

Post by d0gbread »

Mauricebranagh wrote: post #33
tobyhinloopen wrote: post #28

Earlier quoted context omitted.

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

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.

Re: Icons – Google Fonts

#69

Post by Kaze404 »

charcircuit wrote: post #55
madeofpalk wrote: post #43

Earlier quoted context omitted.

As a web developer, it literally is your only job to make a website that is usable by people.

I design websites that are to be used with primarily desktop screens. If you want to use an unsupported configuration such as a tiny screen or with no screen then it is not my fault if it does not work well. Similarly, if I make a VR game I am not going to design it in a way that makes creating a pancake version of the game easier to use. If someone does create a pancake mod for the game, they should not complain abo…

Ticket: "Your website isn't very accessible to people using screen readers. Could you improve it with aria tags please?"

Response: "It's not my fault you're blind. Ticket closed."

Re: Icons – Google Fonts

#70

Post by bagacrap »

TonyTrapp wrote: post #14

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/

I can't see how these would be bad for accessibility. The markup is a with a human readable word like "home" in it.
Post reply on HN