Check out a free preview of the full CSS In-Depth, v2 course:
The "Icon Accessibility" Lesson is part of the full, CSS In-Depth, v2 course featured in this preview video. Here's what you'd learn in this lesson:

A look at UTF-8 characters and material design icons with a focus on accessibility of generated content.

Get Unlimited Access Now

Transcript from the "Icon Accessibility" Lesson

[00:00:01]
>> Estelle Weyl: The thing with a lot of icons, this is kind of one of the other features. And I thought this was the best place to talk about it, cuz using this to generate a content is actually a really good way to do it. So there's a lot of icons that are completely not accessible.

[00:00:15] So if I put this snowman, remember that snowman 2603? It doesn't say snowman when you're using assistive technology. So Google came out with these material icons. And you can tell that Google does not hire enough diversity because there's one, two, three, four, five, six, seven, eight. Eight airplane seats in the material icons and no pregnant women.

[00:00:46]
>> Estelle Weyl: I don't know.
>> Estelle Weyl: Okay, they need a little bit more diversity at Google, but they're never gonna get it while they still have the same hiring practices. That was another opinionated comment.
>> Speaker 2: [LAUGH]
>> Estelle Weyl: So what is material icons? If I actually were to do a View Source > Inspect on this, I would see a bunch of words.

[00:01:09] And so it would be airplane_seat_flat, airplane_seat_angled, airplane_seat_individual_suite. Because who here has ever been able to get an individual suite on a plane? This is not a material icon that I ever need to use. Extra leg room, I pay still for that, legroom_normal, legroom_reduced, that's me. Seat recline, that's the person in front of you that you want to punch.

[00:01:33]
>> Speaker 2: [LAUGH]
>> Estelle Weyl: Okay so, these are words, this the screen reader will read, right? So what they did is they used ligatures. Have you ever seen an F with an I, and the outside of the F goes to the top of the I? That's a ligature. So basically they use ligatures to say basically when you have the word airplane suite, which one's a suite, this one?

[00:01:59]
>> Estelle Weyl: That is so not worth $10,000 for one night. So basically what I did here is I have a class of material-icons. And it starts with material-icons, so I can just add a dash and something else afterwards. Margins, I'm using material, icons, font, and then I have antialiased and future settings of liga.

[00:02:25] So I'm not gonna cover fonts in-depth. But just realize that these are properties, like antialiased and there's font feature settings that you can use, like liga. So this is something you wanna look up. And then, with the generated content, actually here I'm not even using generated content, I'm just using the word face.

[00:02:49] So saying, when I have this font, the ligature of f, a, c, and e combined produces this.
>> Estelle Weyl: So here, it's generated content, here I have the black one is material-icons, and the word is accessibility. And I have accessibility Icon, so the screen reader would read accessibility. The sighted user would actually see the icon.

[00:03:19] And you generally don't actually wanna do this, because a lot of people don't understand what the icon means. So a sighted user might not know that this means accessibility, right? But if I change this, just to show you that it works, a face. You see, I typed in face, and we get a face.

[00:03:36] So there's a thousand of these that you can use. You just have to call in the material icons font.
>> Estelle Weyl: So this is one thing you can use with generated content. The other interesting thing is, there's also UTF for browsers that don't support ligatures, and those font features, you can actually use the /e84e.

[00:04:08] The only thing is, if I do this in a browser that doesn't support it, what happens? If this browser doesn't support the ligature of face, what would be written on the bottom? The word face because the cascade overwrote the /e84e, so it would actually say the word face.

[00:04:33] So later on we're going to discuss how you can actually feature detect whether the browser supports this feature, which is needed right? And then you can, in that support query you can just put that feature. Okay, so accessibility.
>> Estelle Weyl: Okay, accessibility. I've just been talking a lot about accessibility but let's go over the actual features.

[00:05:08] Generated [COUGH] content is actually read by most screen readers. But it should enhance the content, it's progressive enhancement. It should not be the base of your, it should not be relied upon.
>> Estelle Weyl: Because basically generated content is part of the presentation layer, and content is HTML, and you don't want to mix those concerns up.

[00:05:33] And I'm not just saying you don't wanna mix it up, and that's a steadfast rule and that's why. But this is just one of the examples of, you want the content to actually be on the page if it's important. So you can use these features if you want to improve user experience, but don't make it a requirement of user experience.

[00:05:53]
>> Estelle Weyl: If you're really into accessibility, the generated content is part of the accessible name computation. There's an accessibility object model, and it is actually going to be in there if it's not already. And all browsers, except for Internet Explorer, expose generated content, expose it, and therefore, can be read by the screen user.

[00:06:23]
>> Estelle Weyl: So in the future, right now,
>> Estelle Weyl: Right now we just have content, right? We just say content: url(question.svg), right? In the future, we'll be able to put a slash, and basically a hint as to what it means. Because those icons that I was talking to you about, that face, the sighted user, it's like, I have no clue why that face is there.

[00:06:53] And that bed line in, I had no clue that that was an airplane suite, because it's not in my daily lexicon. If something is gonna be purely decorative, like 25BA, I have no clue with 25BA. But like with the snowman, purely decorative, does not add to the content or context.

[00:07:13] You can just put slash and then empty quotes, so that it won't be read to the screen reader. So this is providing more information, because there is no way to put an ALT attribute on the generated content. I've had that picture of myself. No screen reader user would know that that was a picture of me.

[00:07:31] But I could write GC SVG on the style, and then they would know what they were supposed to be looking at.