アイコン（アクセシビリティ）

アイコンはラベルと組み合わせて使う

ピクトグラム記号としてのアイコンはそれ自体にも意味を内包しており、図像であることから分かりやすさをともなっています。そのため、テキストのラベルにアイコンを付与することで、そのラベルが目に留まりやすく、またメニュー項目などの場合に、項目ごとの差異を強調して表示できるといった効果が得られます。ただし、それはあくまでも視覚的なものであり、非視覚的には情報を提供していません。

視覚障害のある人やスクリーンリーダー利用者も公平に情報を得たり操作したりできるようにするためには、ラベルと組み合わせて使用する必要があります。また、一般に、アイコン自体で示される意味は多義的あるいはシソーラス的であり、ウェブサイト側が想定しているひとつの意味として確実に情報伝達がなされるとは限らないことからも、視覚的に情報を得られる環境であったとしても、ラベルと組み合わせて提示されていることで、安定的に適切な意味を提示することができるようになります。

アクセシビリティの観点および適切な情報伝達の観点から、アイコンは必ずラベルと組み合わせて使用してください。

ラベルと組み合わせたアイコンの代替テキスト

ラベルと組み合わせて提示されるアイコンには代替テキストは不要です。<img>要素の場合は空の代替テキスト（alt=""）、CSSのリストマークや背景等でアイコンを配置している場合は特に何も指定しないでください（アイコンのためにaria-labelをつけないでください）。

ラベルがリンクの場合のリンクの範囲

ラベルがリンクである場合は、ラベルと組み合わせて提示されるアイコンがリードアイコンかフロントアイコンかを問わず、アイコンもリンクの範囲になるようにしましょう。この時、アイコンとラベルが別の<a>要素にならないように注意してください。

事情によりアイコン単体で使用しなければならない場合

既存システムの制約や表示領域の都合から、どうしてもアイコン単体で使用しなければならない場合は、本来組み合わせるべきであったラベルの内容を代替テキストを設定します。また、そのアイコンがアクションやリンクをともなう場合は、44×44 CSS px以上のターゲットサイズを確保してください。

なお、デジタル庁デザインシステムでは、表示領域の都合からアイコン単体で配置しなければならないボタンで利用するために、ラベルをアイコンの一部に含めた専用アイコンを定義しており、視覚的にもラベルに相当するテキスト情報をできるだけ提供できるようにしています。

アイコンの色は、背景色に対してコントラスト比4.5:1以上を確保する

デジタル庁デザインシステムでは、すべてのアイコンはリードアイコンまたはテールアイコンというテキストシーケンスの一部として使われる可能性があるため、背景色に対するコントラスト比が4.5:1以上になるような色でアイコンを作る必要があります。

非テキスト要素としてしか使わないことが保証されている場合に限り、背景色に対するコントラスト比を3:1以上を確保していればよいものとします。