こんにちは。エキサイトでデザイナーをしている齋藤です。
今回は、アイコンを用いて何かを説明しているUIはアクセシビリティに気をつけたいというお話をします。
アイコンで説明するUIとは
冒頭、「アイコンで説明するUI」とはどんなUIなのかを、具体例を用いてご説明します。
よくある例としては、以下のような比較表です。
アイコンで利用可能/不可能を説明しています。直感的でわかりやすい見た目ですが、マークアップの仕方によってはハンディキャップのないユーザーにしか伝わらないUIになってしまいます。
ハンディキャップないユーザーにしか伝わらないマークアップ
先の例をマークアップしてみます。（前提として、アイコンにはアイコンフォントを使用しているとします）
<table> <thead> <tr> <th></th> <th>Aプラン</th> <th>Bプラン</th> <th>Cプラン</th> </tr> </thead> <tbody> .... <tr> <th>メールサポート</th> <td><span class="icon x-mark"></span></td> <td><span class="icon circle-mark"></span></td> <td><span class="icon circle-mark"></span></td> </tr> .... </thead> </table>
見出し行にはtheadタグを用いていたりと適切なタグを用いているため、一見アクセシブルなマークアップに見えます。
どこに問題があるのか
アクセシビリティ上の問題はどこにあるのでしょうか。
それは、アイコンで説明をしているセルにあります。
<tr> <th>メールサポート</th> <td><span class="icon x-mark"></span></td> <td><span class="icon circle-mark"></span></td> <td><span class="icon circle-mark"></span></td> </tr>
この要素のアクセシビリティツリーは以下のようになります。
table
row
rowheader "メールサポート"
cell
cell
cell
アイコンで説明をしているセルが空白として認識されてしまっています。
この状態では、スクリーンリーダーの読み上げがされないため、視覚にハンディキャップのあるユーザーが情報を入手できなくなってしまいます。
ハンディキャップのあるユーザーにも伝わるマークアップ
では、ハンディキャップのあるユーザーにも伝わるマークアップに修正します。
今回は、マルアイコンは「利用可能」、バツアイコンは「利用不可能」という意味がアイコンにあるため、それを明示するようにrole属性とaria-label属性を用いてマークアップします。
<tr> <th>メールサポート</th> <td><span role="img" aria-label="利用不可能" class="icon x-mark"></span></td> <td><span role="img" aria-label="利用不可能" class="icon circle-mark"></span></td> <td><span role="img" aria-label="利用不可能" class="icon circle-mark"></span></td> </tr>
なにをしたのか
アイコンフォントを使用しているspanタグにrole属性とaria-label属性を付与しました。
まず、role属性ですが、これはタグに対して意味を持たせるために使用します。
HTMLのタグはそれぞれに意味を持っていますが、spanタグは意味を持たないタグです。
しかし、今回は「アイコン（画像）を表示する」という意味を持つため、role="img"を付与します。
次にaria-label属性ですが、これはタグにアクセシブル名を付与するために使用します。
role="img"で画像の意味を加えましたが、このままでは「画像」であることしか伝わりません。
どんな内容の画像なのか（＝アクセシブル名）を示す必要があるため、マルアイコンにはaria-label="利用可能"、バツアイコンにはaria-label="利用不可能"を付与します。
修正後のアクセシビリティツリーは以下のようになります。
table
row
rowheader "メールサポート"
cell "利用不可能"
cell "利用可能"
cell "利用可能"
これで、アイコンを用いていて説明しているセルもスクリーンリーダーが読み上げられるようになりました。
さいごに
今回は、アイコンを用いて何かを説明しているUIはアクセシビリティに気をつけたいというお話をしました。
今回ご紹介した方法はWCAG達成基準 1.3.1を達成するための方法の一つとして、ウェブアクセシビリティ基盤委員会（WAIC）のページでも紹介されていますのでこちらも合わせてご覧ください。
ご精読ありがとうございました。
