Web アイコン

Web アイコンには、テキストグリフ、SVG グラフィック、ビットマップ画像を使用できます。形式の選択は、描画の忠実度、キャッシュ、スタイル設定、セキュリティ、および周囲のコントロールが公開するアクセシブルネームに影響します。

アイコンフォントをフォントとして扱う #

アイコンフォントは、文字コードまたはリガチャをピクトグラムに対応付けます。

<span class="material-icons" aria-hidden="true">add_location</span>

グリフは color、font-size、その他のテキストプロパティを継承するため、1 つのフォントファイルで単色アイコンセットのテーマを設定できます。同じ依存関係から、次の制約も生じます。

• フォントがブロックされたり読み込みが遅れたりすると、欠落グリフを示す四角形または代替テキストが表示されます。
• フォントを置き換えるユーザースタイルによって、アイコンが消えることがあります。
• 私用領域のコードポイントには、相互運用可能なテキスト上の意味がありません。
• リガチャ名が支援技術によって読み上げられることがあります。
• フォントのスムージングとヒンティングにより、小さいサイズで形状が変わることがあります。

装飾用のフォントグリフはアクセシビリティツリーから隠し、そのコントロールにアクセシブルネームを設定します。

<button type="button" aria-label="Add location">
  <span class="material-icons" aria-hidden="true">add_location</span>
</button>

必須のラベルを、生成された ::before コンテンツだけに配置しないでください。フォントの読み込み、カスタムスタイル、アクセシビリティ API のいずれによっても、その伝達経路が失われる可能性があります。

Unicode グリフの差異を考慮する #

Unicode 記号が規定するのは標準化された文字の識別情報であり、標準化されたアイコンデザインではありません。選択されたフォントによって、輪郭、メトリクス、および単色テキストとカラー絵文字のどちらで描画されるかが決まります。一部の文字では異体字セレクターによってテキスト表示または絵文字表示を要求できますが、プラットフォーム間で図柄が異なる可能性は残ります。

数学演算子や方向を示す矢印など、文字自体がテキストに含まれる場合は Unicode を使用します。見た目が似ている文字を、アプリケーション固有の操作を示す唯一のラベルとして使用しないでください。スクリーンリーダーは文字本来の意味を読み上げるため、意図した操作と一致しない場合があります。

SVG の統合方式を選択する #

SVG は解像度に依存しない形状を記述し、複数の塗り、線、グラデーション、アニメーションに対応します。統合方式によってスタイル設定とセキュリティの動作が決まります。

インライン SVG #

インラインマークアップは文書のカスケードに参加します。

<button type="button">
  <svg
    aria-hidden="true"
    focusable="false"
    width="20"
    height="20"
    viewBox="0 0 20 20">
    <path fill="currentColor" d="M3 10l4 4L17 4"></path>
  </svg>
  Save
</button>

currentColor はボタンのテキスト色に従います。同じ複雑なアイコンを何度も使用するとインラインマークアップによって HTML サイズが増えますが、直接スタイルを設定でき、別の画像リクエストも不要になります。

単独で意味を持つグラフィックには、アクセシブルネームが必要です。

<svg role="img" aria-labelledby="network-title" viewBox="0 0 24 24">
  <title id="network-title">Network topology</title>
  <circle cx="12" cy="12" r="8"></circle>
</svg>

一方、装飾用 SVG には aria-hidden="true" と focusable="false" を使用します。アイコンだけのボタンでは、インタラクティブオブジェクトであるボタン自体に名前を付けます。

SVG スプライト #

インラインスプライトは、再利用可能なシンボルを定義します。

<svg aria-hidden="true" hidden>
  <symbol id="icon-check" viewBox="0 0 24 24">
    <path d="M4 12l5 5L20 6"></path>
  </symbol>
</svg>

<svg aria-hidden="true" focusable="false">
  <use href="#icon-check"></use>
</svg>

同一オリジンの外部スプライトでは、定義をキャッシュ可能なファイルへ移動できます。

<svg aria-hidden="true" focusable="false">
  <use href="/icons/sprite.svg#icon-check"></use>
</svg>

複製された <use> コンテンツにブラウザーから適用できるスタイルには、意図的な制約があります。fill="currentColor" または固定のプレゼンテーション属性をシンボルに設定し、外側の <svg> にスタイルを設定してください。異なるオリジンにある外部フラグメントは、サーバーが CORS ヘッダーを返す場合でも移植性がありません。そのため、スプライトを同一オリジンから配信するか、取得して検証したうえでインライン化します。

画像としての SVG #

<img> で読み込まれた SVG は、分離された画像文書です。

<img src="/icons/product-mark.svg" alt="Example product">

ページの CSS から内部のパスには到達できず、currentColor もホスト要素から継承されません。画像コンテキストではスクリプトが無効になるため、信頼できる静的アセットでは、マークアップを挿入するより <img> の方が安全です。空の alt="" は装飾用画像を示し、意味のある画像には代替テキストが必要です。

任意の SVG マークアップをインラインで埋め込む場合や、ナビゲーション可能な文書として配信する場合は、アクティブコンテンツとして扱います。信頼できないファイルをサニタイズし、スクリプト属性とイベントハンドラー属性を禁止し、外部参照を制御して、適切なコンテンツセキュリティポリシーとともに意図したメディアタイプで配信してください。

表示密度に合わせてビットマップアイコンのサイズを設定する #

PNG、WebP、AVIF は、作成時のピクセル、多色の細部、ベクターでは再現しにくい効果を保持します。ビットマップは拡大しても細部が増えないため、密度別の画像を用意します。

<img
  src="/icons/avatar-24.png"
  srcset="/icons/avatar-24.png 1x, /icons/avatar-48.png 2x"
  width="24"
  height="24"
  alt="">

寸法を明示すると、レイアウト領域が確保されます。高密度のソースをダウンサンプリングすると鮮明な小型アイコンを生成できますが、大きな密度別画像は帯域幅とメモリーを消費します。ピクセルアートのアイコンには image-rendering ルールと整数倍率が必要になることがあります。写真やテクスチャを含むアイコンでは、必要なアルファチャンネルと圧縮特性に応じて画像形式を選択してください。

CSS の背景画像はアクセシブルネームに寄与しないため、装飾に適しています。

.status::before {
  background: url("/icons/status.svg") center / contain no-repeat;
  content: "";
}

背景が状態を伝える場合は、テキストラベルを DOM に残してください。

意味と配信上の制約に基づいて選択する #

実際の要件を満たす表現を使用します。

キャッシュ可能性を重視する場合は単一の外部スプライトまたは画像が適し、コンポーネントの分離を重視する場合はインライン SVG が適します。厳格なコンテンツセキュリティポリシーでは、マークアップの挿入より不活性な画像読み込みが適する場合があります。形式自体が意味を提供するわけではありません。装飾用アイコンは支援技術から隠したままにし、コントロールと意味のあるグラフィックには、アセットの読み込みに失敗しても残るアクセシブルネームが必要です。