アイコンフォントのアクセシビリティ向上 | Accessible & Usable
公開日 : 2014年8月28日 (2024年7月17日 更新) カテゴリー : アクセシビリティ ウェブデザインにおいて、アイコンを配置することは多いと思います。最近では、画像アイコンではなく、Font Awesome のようなアイコンフォントを用いるケースも増えてきました。 「アイコンフォント」の例 (Font Awesome) アイコンフォントには、画像アイコンよりも読み込みが速い、ベクターデータゆえに高解像度の画面でもきれいに表示できる (ピンチ＆ズームしてもジャギーにならない)、手軽に実装できる (わざわざアイコンを作る必要がなく、豊富なアイコンから選択して所定のコードを埋め込むだけ)、といったメリットがあります。このように、とても便利なアイコンフォントですが、アクセシビリティ (とりわけ、スクリーンリーダーを介した情報伝達) の観点で考えると、実装において若干の工夫が必要です。
入力フォームが空のときに入力案内を表示 - ［ホームページ作成］All About
テキスト入力欄に案内文字を表示 テキスト入力欄内に最初から薄い文字で案内が表示されていて、クリックしてカーソルを入れると案内文字が消えるフォームをよく見かけます。 例えば下図のようなフォームです。 このような「案内文字」を表示したり消したりする入力欄は、JavaScriptを活用すると簡単に作れます。 JavaScriptを使えば、入力欄内の文字と装飾（文字色）を自由に変更できるからです。 試しに作ってみた入力フォームを下記に掲載しています。下記の入力欄内をクリックして、カーソルを入れてみて下さい。案内文字が消えるはずです。 何もフォーム内に入力しないまま（ページ内の他の場所をクリックするなどして）カーソルを入力欄外に出せば、案内文字が戻ります。 ※JavaScriptが使えないか無効な環境では、案内文字は消えずに入ったままです。 上記のサンプルでは、以下のような動作が行われています。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
