This basically is a follow-up to the article “A better way to use icon fonts” published about a year ago. In the article I describe techniques which make icon fonts less annoying to screenreader users. In the meantime a lot happened, and there are better techniques around.

My preferred one, and thus the best one in my opinion, is the use of the Private Use Area in Unicode fonts. As symbols stored there aren’t represented by a character, they don’t get read by screen readers, no matter what you do.

Incredibly handy is a tool that lets you take any SVG icon or SVG font, pick your symbols and create a new custom font for you. Even better, the tool runs completely in your browser, saves your state and optimizes your font. It’s called IcoMoon.

It is easy to reference from your CSS, as you take the Unicode number from IcoMoon, for example U+e000 and use the value after e000 in CSS like so:

.element-with-icon:before { content:'\e000'; }

Of course you shouldn’t use the icon on its own, a describing text is always necessary. You can hide it from sighted users by using the known techniques. (But remember: Icon-only buttons are often confusing for your users.)

Last, but not least, I share some Sass/Compass code I use with my IcoMoon icon fonts. Note the .fontface, which is the modernizr class, so that there are no artifacts in browsers not supporting the font-face rule (Opera Mini, for exmple). But it isn’t strictly necessary to use modernizr here.1

@include font-face('icons', font-files('path/to/iconfont.woff', 'path/to/iconfont.ttf', 'path/to/iconfont.svg'), 'path/to/iconfont.eot', normal, normal);
.fontface {
  %icns:before {
    font-family: "icons";
    font-weight: normal;
    font-style: normal;
    vertical-align: -15%;
  }
  %icns-after:after {
    font-family: "icons";
    font-weight: normal;
    font-style: normal;
    vertical-align: -15%;
  }
}
@mixin font-icon($char, $color: '', $size: '') {
  @extend %icns;
  &:before {
    content: '#{$char} ';
    @if $color != '' {
      color: $color;
    }
    @if $size != '' {
      font-size: $size;
    }
    @content;
  }
}
@mixin font-icon-after($char, $color: '', $size: '') {
  @extend %icns-after;
  &:after {
    content: ' #{$char}';
    @if $color != '' {
      color: $color;
    }
    @if $size != '' {
      font-size: $size;
    }
    @content;
  }
}

It’s stunningly simple. No JavaScript required, no extra attributes. And works almost everywhere.

1 As Sven Wolferman notes on Twitter and in the comments, there are false positives on some mobile devices. Looks like we need some additional browser sniffing to get correct behavior, which is odd. (It’s still a very niche problem, so your mileage to support those mobiles may vary.)

The “old, grumpy man of accessibility”, John Foliot blogged about the problem of people being locked-in in browsers and their versions. He also mentions the topic of some people who are not helped by the words “just upgrade to the latest version”:

The latest incident that sparked my frustration comes from a DM exchange I had with a colleague on twitter, where I commented that using justified text has some fairly serious accessibility issues for Dyslexics and some screen magnifier users, who will often see the enlarged white-spaces between words in the justified text, rather than the words themselves. The phenomenon is well known, and is referred to as “Rivers of White”.

When I pointed out this problem, my colleague replied “I am using (CSS3) hyphenation — for browsers that support it.” followed by “Graceful degradation is that the text is still fully readable in older browsers. Dyslexics can always upgrade.“

It’s right, they can update, but it won’t help them, they need left-justified text, often hyphenation doesn’t even help people with disabilities – for example in Easy Read German (ERG) you aren’t even allowed to hyphenate words at all. At a recent client project we had different languages for Standard German and ERG, and we opted to use CSS3 hyphenation for body text only in the Standard version.

If there’s only one language version, I personally think left-aligned text and hyphenation is a good fit and works reasonably well. I’d however like if browsers would allow people to switch those features on and off at their own will, as they are allowed to specify their personal base font size or minimal font size. Having justification isn’t wrong, that people with special needs can’t turn them off at their own will is.

We need more empowerment of the diversity of platforms, browsers and users. All those settings should be revealed by default and shown front and center, not hidden behind some geeky stuff like user stylesheets. That would make the world a better and more accessible place.

Reader’s question:

First, I don’t think that just using any boilerplate works well in this day and age, where responsive designs dominate the interest of developers around the globe. But there are better and worse parts in boilerplates themselves. I, for example, often reference HTML5 Boilerplate for certain techniques, especially .htaccess stuff because I have a hard time to remember these. I use their technique for hiding stuff from sighted users as well but don’t use the rest of their markup or CSS.

Relatively new is HTML5Bones by Ian Devlin which, again, I advice against using without knowing its inner workings, but Ian does a great job to describe every element and every feature in detail. It’s more like a learning experience than a copy & paste starter for your web site.

Basically, I think boilerplates are the beginning of the journey to the website, not the end. I find it really annoying if I see yet another Twitter Bootstrap site popping up, where you see that no or little time was invested to see if the framework is actually a good fit for the page. There are so many content web sites which use bootstrap although it’s a framework for a web application (and in my opinion not a very good one at that).

Posted in Uncategorized