Webフォントとアクセシビリティの観点
https://gyazo.com/908e74abd50ec95abc11f8e12bde8a22
Webフォント以前のタイポグラフィ表現
自分がインターネットというものに触れたのは中学のころ
その頃楽天ブログというもので自分のウェブサイトをもつのがちょっとしたブームになっていた いわゆるテキストサイトのようなものをやっている友人が居て
文字を大きく表現する時に<font size="7">でそれよりも大きいものを出すのが分からなかった
なので彼は
ペイントツールで大きいサイズのフォントを１枚ずつ画像化して
それをインラインで順に貼り付けていく
というやり方でそれを回避していたのを思い出した
これはフォントサイズの可変調整、いわゆるCSSの部分による問題かと思うが、 れっきとした画像によるタイポグラフィ表現の１つである
テキスト画像という手段
それから時は流れ自分がWebの仕事をするようになり
デザイン表現において、デバイスフォントを超すタイポグラフィ表現がしたいのがあった
これを乗り越えるためにデザイナーの人々は画像でタイポグラフィ表現をする
つまりテキスト画像というものを生み出した
グラフィカルなWeb表現
テキスト情報をより強調してくれる
デバイスフォントのみのサイトとの差別化 等
しかし問題点もある
テキスト画像であることの難点
しかしそれらがサーバー上で読み取れなくなったとき、テキストとして使えなくなる
デバイスフォントはそもそもがそれを表示するHTMLにおいて存在するので その表示するものが無くなった時＝404などのリクエストエラーでしか見れなくなる
画像データは画像なのでそうはなってくれない
レスポンシブ対応における見づらさ
最近のウェブサイトはおおよそがレスポンシブ対応されていると思う
画像はデバイス幅より小さくなったらそれに合わせて可変していくのが定石
しかし装飾的な画像ならまだしもテキスト画像も縮小すると考えると
デバイスによっては見づらくなる可能性がある
テキスト画像におけるフォントサイズの大小がデバイスに委ねられてしまう
1.1.1 非テキストコンテンツの達成基準
利用者に提示される全ての非テキストコンテンツには，同等の目的を果たす代替テキストが提供されている。ただし，次の場合は除く（レベル A）。
（略）
f) 装飾，整形及び非表示 非テキストコンテンツが，純粋な装飾である場合，見た目の整形のためだけに用いられている場合，又は利用者に提供されるものではない場合，その非テキストコンテンツは，支援技術によって無視されるように実装されている。
JIS X 8341-3:2016 / WCAG 2.0「1.1 代替テキストのガイドライン」より
WCAG2.0における１つの達成基準においてテキスト画像には代替テキストが必須となる いわゆる alt に値を入れておく必要がある
altを入れておくことにより
画像がリンク切れの場合テキストとして表示される
スクリーンリーダーといった支援技術で視覚障害者への利用ができるようになる
これを満たしていないとテキスト画像を使うには難がある訳である
Webフォントにより画像テキストという手段を捨てることができる
テキスト画像であることにはそれ以外の問題がある
画像テキストはフォントの拡大・縮小ができない（≠画像の拡大・縮小）
色変更が効かない
機械翻訳をかけたときに変換されない
altが空だとコピー&ペーストできない
これらの問題を投げうってまで「テキスト画像」であることに拘るのか？を考えて欲しい
Webフォントではそうした画像としての問題・タイポグラフィ表現をカバーするだけではなく
上記アクセシビリティへの担保もできるため非常に有用なわけである
もちろん最近のパフォーマンス事情を考慮して
日本語フォントなどはリクエスト処理・表示処理も考えなおす必要はあると思う
yamanoku.icon この辺の話は他のアドベントカレンダー参加者に委ねます
なのでWeb従事者たちよ、テキスト画像を捨てよ、Webフォントへ出よう
※ もちろん表現の限度はあるのでご利用は計画的に
おまけ１：会社ロゴをWebフォントとして扱う
https://gyazo.com/74e7b643d5d81ed5df3cc6fec8b0c8ab
株式会社GEEK.icon 社内エンジニアの案
実装として面白いなと思った
アルファベットなどで表現できる場合はロゴのフォントデータをデザイナーが一式作っておくと楽しそう
フォントなのでfillではなくcolorで対応できるし
サイズもwidthやheightではなくfont-sizeで調整できる
アイコンフォントみたいな感じで扱える
今年9月にNoto Sans JPがようやくGoogle Fontsレギュラー入りしました
データー総量の削減
キャッシュ化
アーリーアクセスと比較して良いことづくめで最高ですね
https://gyazo.com/976ad0508ed216090c6cafbc7adff3de
アイコンフォントの先駆けツール
アクセシビリティ対応するためには？みたいなチュートリアルが用意されている
装飾アイコンのとき
aria-hiddenを付与してマシンリーダーブルの上でも隠蔽する
もしセマンティクスな意味がある場合は
title属性をつけてツールチップとして表示させる
.sr-onlyや.visually-hiddenなどで視覚的には隠蔽した代替テキストを提供する
<span class="sr-only">Time to destination by car:</span>
アイコンをフォーカス要素<a>などが包含している場合
フォーカス要素にaria-labelで意味付けをする
<a href="#hoge" aria-label="hogeへとスキップする">
JS APIではautoA11yというオプションがある
デフォルトでtrue