search

zurb / foundation-icons

427 stars 85 forks source link

CSS: Use generated content and Unicode SPUA #1

Closed davidhund closed 12 years ago

davidhund commented 12 years ago

Hi guys, congrats on the icon-font. I like the style.

Accessibility with your current CSS is sub-optimal. E.g. all icon-characters are read out by screenreaders because they are in the HTML source ("This·is·a·f·checkmark"). Your current method also requires extra ('unsemantic') markup.

I would advise to change the CSS to use generated content (e.g. .icon:before { content: "✔"; … } Using e.g. :before removes the need to have the character in markup.

You could also use Unicode alternatives when they are available. So do not use "f" for the checkmark icon but use "✔" When there is no Unicode alternative you could use the Unicode "Supplementary Private Use Area" blocks: they are (AFAIK) ignored by screenreaders.

hatefulcrawdad commented 12 years ago

Thanks, we're working on a release that will be much more accessible.

hatefulcrawdad commented 12 years ago

We used SPUA for the latest version of the icons, thanks!