アイコン

要約

アイコンの目的を識別できるように、アイコンに明確かつ一貫したラベルを付けるようにします。

テクニック

アイコンが一貫して識別されるようにします。[[WCAG-3.2.4]]
アイコンと背景の間に十分なコントラストがあるようにします。[[WCAG-1.4.11]]
フォントアイコンを識別し、ラベルを付けます。[[WCAG-3.2.4]]
アイコンがコントロール用である場合は、サイズが少なくとも44 x 44ピクセルであることを確認します。[[WCAG-2.5.5]]

例

例 1 — 一般的なサイドバーの識別

<aside
    id="warn-001"
    class="warning">
   <img src="bomb.png" alt="Warning"/>
   <p>The following experiment may cause
      bodily harm if … </p>
</aside>

…

<aside
    id="warn-002"
    class="warning">
   <img src="bomb.png" alt="Warning"/>
   <p>Risk of explosion increases as the
    coefficient … </p>
</aside>

例 3 — フォントアイコン

次の例では、私的使用領域のコードポイントを使用して、架空の「Icons」フォントファミリーから電子メールアイコンをレンダリングします。

CSS

.icon { font-family: 'Icons' !important; }
.email { background-color: #ffffff; }
.email:before { content: "\f8ee"; }

HTML

<p>
   <span
    class="icon email"
    role="img"
    aria-label="Email the publisher"></span>
</p>

解説

電子出版物では、アイコンは Webほど一般的ではありませんが、珍しいものではありません。アイコンは、教科書やその他のノンフィクション作品にあるさまざまな種類のサイドバーなど、出版物内の重要な項目を識別するためによく使用されます。また、テキストの代わりに、画像の拡張説明があることを示すためにもよく使用されます。そしてもちろん、インタラクティブコンテンツのコントロールとしてもよく使用されます。

アイコンをアクセシブルにするには、一般的に画像と同じ要件に従いますが、アイコンに固有の追加要件もいくつかあります。これらの中でも重要なのは、ネーミングの一貫性です。ラベルを提供するだけでは十分ではありません。ユーザーは、アイコンの意味と目的が出版物全体で一貫していることを期待するようになるからです。たとえば、拡張説明へのリンクに使用されるアイコンには、ある場所では「図 1 の拡張説明」というラベルを付け、次の場所では「図 2 の詳細を読む」というラベルを付けるべきではありません。図の番号は変わるため、ラベルは同一にはなりませんが、言い回しは一貫している必要があります。

アイコンが明確に区別できることも重要です。アイコンとその背景のコントラスト比が 3:1 であることで、ユーザーはアイコンが使用されている場所とそれが表すものの両方を認識できるようになります。同様に、画像がクリックなどの入力アクションのターゲットを表す場合、アイコンの長さと高さは少なくとも 24 ピクセルが必要です。特に WCAG の要件ではありませんが、アイコンは、できるだけ幅広いユーザーが拡大しなくても判読できるようにサイズを設定する必要があります。アイコンに複雑な画像を使用しないことも推奨されます。目の見えるユーザーでも意味を理解するのに苦労する可能性があるためです。

フォントアイコンは、画像アイコンとは少し異なります。フォントアイコンは、製作者が Unicode の私的使用領域（つまり、どの文字にも割り当てられていない特別なコードポイントで、製作者がそれらのコードポイントのアイコンを定義するフォントを提供できます）を使用することに依存しています。このアプローチの問題は、私的使用領域のコードポイントがユーザーエージェントと支援技術に認識されないため、アイコンの意味を通知する方法がないことです。この問題を回避するために、製作者は ARIA ロール "img" を添付し、アイコンが挿入される場所にラベルを付けることができます（上記の例 3を参照）。

要約

テクニック

例

解説

関連リンク