テクニック ARIA24:アイコンフォントを意味的に識別するために role="img" を使用する

解説

このテクニックの目的は、アイコンにフォントファイルが使用されている要素を、意味的に識別する方法を示すことである。利用者がフォントファミリーを上書きすると、識別する手段がない限りそのアイコンは消える。つまり、アイコンフォントを一般的なフォント（テキスト）の使用法と区別する手段を提供する。

一部のロービジョンの利用者は、テキストコンテンツを認識するためにユーザスタイルシート、スクリプト、又は拡張機能を使いページ上のフォントを上書きする必要がある。しかし、お気に入りを示す星やリンク内のメールアイコンなど、意味のあるアイコンフォントは認識できる必要がある。

重要なのは、コンテンツ制作者が role="img" を使用してアイコンフォントを意味的にマークアップすることである。これにより利用者のフォント置換セレクタはそのセマンティックにフックして role="img" を除外できる。この結果、アイコンフォントは表示されたままとなる。

テクニックの基本原則

1. コンテンツ制作者が CSS に font-face を追加する

最初に、 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"; }

2. コンテンツ制作者が HTML にフォントクラスを追加する

次に、クラス、意味的な属性である 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>

3. 利用者の CSS ファイルが、アイコンファイルを除いて font-family を置き換える

最後に、 ":not セレクタ" と "[属性] セレクタ" を組み合わせて使用し、通常のテキストのフォントを置き換える。

/* replaces font faces but excludes all elements with attribute role="img" */
*:not([role="img"]) { font-family: Verdana, sans-serif !important; }

事例

/* default class for fonts-face with icons */
.icon { font-family: 'IconFontRoleImg' !important; }

/* specific class for icon */
.icon-star-bg:before { content: "\e982"; }

<p>
  <span class="icon icon-star-bg"></span>
</p>

<p>
  <span class="icon icon-star-bg" role="img" aria-label="Favorite"></span>
</p>

*:not([role="img"]) { font-family: Verdana, sans-serif !important; }

/* default class for fonts-face with icons */
.icon { font-family: 'IconFontRoleImg' !important; }

/* specific classes for icons */
.icon-star-bg:before    {content: "\e982"; }
.icon-star-half:before  {content: "\e983"; }

<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>

*:not([role="img"]) { font-family: Verdana, sans-serif !important; }

/* default class for fonts-face with icons */
.icon { font-family: 'IconFontRoleImg' !important; }

/* specific class for icon */
.icon-email:before { content: "\e93e"; }

<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>

*:not([role="img"]) { font-family: Verdana, sans-serif !important; }

/* default class for fonts-face with icons */
.icon { font-family: 'IconFontRoleImg' !important; }

/* specific class for icon */
- See style declarations in HTML examples -

<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>

*:not([role="img"]) { font-family: Verdana, sans-serif !important; }

検証