Join James Williamson for an in-depth discussion in this video Improving accessibility, part of Deploying Icon Fonts for the Web.
- View Offline
…By now, I think we've seen some patterns emerge…in terms of best practices when deploying icon fonts.…There's one thing we need to really take care of…though before we move onto the individual styling properties that we…can do with the icon fonts, and that is talking about…how to improve the accessibility of the icons on our page.…So there are a couple of problems that can crop up in terms of accessibility.…The first is if you have generated content that…is injected into your HTML, screen readers will read that.…
And so if it's a letter, that's really a problem but a lot of it times it can…cause a screen reader to read something that the…user really doesn't understand what's going on with that.…The other use case where accessibility comes into play is if you're thinking…about positioning an icon all by…itself, obviously that's going to mean something to…people looking at the layout, but it's not really going to be visible…at all to folks on accessibility devices and screen readers and things like that.…
Want to create your own icon fonts? Check out James' companion course, Creating Icon Fonts for the Web.
- Finding icon fonts
- Ensuring consistent styling
- Exploring class-based solutions for deployment
- Deploying with the data-icon attribute
- Aligning icons
- Animating icons
- Styling multicolored glyphs