安全でアクセシブルなアイコン・フォントという翻訳文書を公開した。アイコン・フォントをできうる限りアクセシブルな形で実装するための前提的な知識と、それを考慮して作成されたA Font Gardeというライブラリについての記事、Bulletproof Accessible Icon Fontsを日本語に訳したもの。
補助的なアイコンの場合は表示できない時に、空白ではなく何も表示しないようにして、後続の要素の位置揃えに影響を与えないように……など、耳が痛いことも書かれている。この文書に書かれていることをこのまま採用する必要はないと思うけど、アイコン・フォントにどのような問題があるのか、そしてどうすれば解決できるか(とその鍵)がしっかりと書かれているので、余裕があれば元記事とA Font Gardeのソースも読むと、アイコン・フォントの実装時に迷いが少なくなると思う。
一部Wikipediaへのリンクなどは日本語で対応するページがあればそれに置き換えておいた。他は特に変えずそのまま。公開直後は画像のリンク切れが起きていたけど、もう修正してある。
アイコン・フォントは現実的な解としてとても優れているけど、CSS的な感じのする手法だとも思う。かといってSVGでの画像置換がウェブ標準的かというと実はそうではない。アイコンを表示したいのにも関わらず、マークアップも、普通にcontentで画像を挿入したりもしていないという点で、あまりストレートな手法ではないから。
ウェブ標準的な手法だとcontentプロパティーでSVGを指定するのが有力だと思うんだけど、サイズの調節がとても難しいとか、代替テキストを指定するのがややこしい(SVG側で行う)とか、読み上げ対応は結局アイコン・フォントと同じとか、コストに見合わない低機能とややこしさなのでどうにもならない。
現状ではアイコン・フォントを使うのがベターなので、この翻訳で触れられているような形でアクセシブルかつ安全に実装するのがベターの中のベストだと思う。