適用 (対象)
Accessible Rich Internet Applications (WAI-ARIA)を用いたコンテンツ。
これは達成基準 1.3.1: 情報及び関係性を理解する (十分な達成方法) に関する達成方法である。
解説
この達成方法の目的は、アイコンにフォントファイルが使用されている要素を、意味的に識別する方法を示すことである。利用者がフォントファミリーを上書きすると、識別する手段がない限りそのアイコンは消える。つまり、アイコンフォントを一般的なフォント（テキスト）の使用法と区別する手段を提供する。
一部のロービジョンの利用者は、テキストコンテンツを認識するためにユーザスタイルシート、スクリプト、又は拡張機能を使いページ上のフォントを上書きする必要がある。しかし、お気に入りを示す星やリンク内のメールアイコンなど、意味のあるアイコンフォントは認識できる必要がある。
重要なのは、コンテンツ製作者が role="img" を使用してアイコンフォントを意味的にマークアップすることである。これにより利用者のフォント置換セレクターはそのセマンティックにフックして role="img" を除外できる。この結果、アイコンフォントは表示されたままとなる。
まず最初に、 CSS ファイルでアイコンのフォントを追加する。
/* specify font-family name for icons */
@font-face { font-family: 'IconFontRoleImg';/ }
/* default class for fonts-face with icons */
.icon,
[class^="icon-"],
[class*=" icon-"] { font-family: 'IconFontRoleImg' !important; }
/* specific class for icon */
.icon-star-bg:before { content: "\e982"; }
次に、クラス、意味的な属性である role="img"、そしてアクセシブルな名前 (accessible name) を追加する。
<!-- Icon via class names, role="img" and a text alternative -->
<p>
<span class="icon icon-star-bg" role="img" aria-label="Favorite"></span>
</p>
最後に、 ":not セレクター" と "[属性] セレクター" を組み合わせて使用し、通常のテキストのフォントを置き換える。
/* Replaces font faces but excludes all elements with attribute role=""img" */
*:not([role="img"]) { font-family: Verdana, sans-serif !important; }
事例
事例 1: 指標として使われる星のアイコン (インタラクティブではない)
この例では星のアイコンがお気に入りを示すものとして使われる。インタラクティブではなく、かつ、利用者がCSSでフォントファミリーを上書きしても消えることはない。
HTML
- 以下ではなく... -
<p>
<span class="icon icon-star-bg"></span>
</p>
- 以下とする... -
<p>
<span class="icon icon-star-bg" role="img" aria-label="Favorite"></span>
</p>
利用者の CSS
*:not([role="img"]) { font-family: Verdana, sans-serif !important; }
実例:
事例 2: 2 色を重ねた星のアイコンフォント
この例では、異なる色のフォントを重ね合わせて 2 色の星のアイコンを作成する。このようにすると、星の半分までを示しているように見せることができる。これはインタラクティブではなく、利用者が CSS を介してフォントファミリーを上書きしても消えない。
HTML
- 以下ではなく... -
<span class="icon-stacked">
<span class="icon icon-star-bg grey"></span>
<span class="icon icon-star-half yellow"></span>
</span>
- 以下とする... -
<span class="icon-stacked" role="img" aria-label="Favorite star half filled">
<span class="icon icon-star-bg grey" role="img" aria-hidden="true"></span>
<span class="icon icon-star-half yellow" role="img" aria-hidden="true"></span>
</span>
利用者の CSS
*:not([role="img"]) { font-family: Verdana, sans-serif !important; }
実例:
事例 3: 表示テキストのない、リンク付きメールのアイコンフォント
この例では、メールのアイコンがリンク内にあり、テキストは表示されていない。利用者がフォントファミリーを上書きしても消えない。アイコンフォントは、支援技術（キーボード又はマウス）によって "リンク付き画像" および "電子メール" として識別される。
HTML
- 以下ではなく... -
<a href="email.html">
<span class="icon icon-email"></span>
</a>
- 以下とする... -
<a href="email.html">
<span class="icon icon-email" role="img" aria-label="Email"></span>
</a>
利用者の CSS
*:not([role="img"]) { font-family: Verdana, sans-serif !important; }
実例:
実例 4: 表示テキストのあるセマンティック要素の一部としての複数のアイコンフォント
この例では、アクセシブルな名前 (accessible name)として使用するために、リンクにテキストラベルが既に表示されている。フォントファミリーが変更されても、メールとシェブロンのフォントアイコンは表示されていなければならない。これは、アイコンがそれぞれの要素に含まれ、かつ、支援技術によってフォントアイコンが無視されるように属性 aria-hidden="true" が使用されることで実現できる。
HTML
- 以下ではなく... -
<style>
.icon-double-link:before { content: "\e93e"; }
.icon-double-link:after { content: "\e993"; }
</style>
<a href="email.html" class="icon-double-link">
Email
</a>
- 以下とする... -
<style>
.icon-email:before { content: "\e93e"; }
.icon-chevron:before { content: "\e993"; }
.icon-double-link .icon-chevron { float: right; margin-left: 1.5rem; }
</style>
<a href="email.html" class="icon-double-link">
<span class="icon icon-email" role="img" aria-hidden="true"></span>
<span class="icon icon-chevron" role="img" aria-hidden="true"></span>
Email
</a>
利用者の CSS
*:not([role="img"]) { font-family: Verdana, sans-serif !important; }
実例:
検証
手順
それぞれのフォントアイコンに対して以下を確認する:
- フォントアイコンのある要素に
role="img"が使われている。
期待される結果
- 1. の結果が真である。