SVGアイコンのアクセシビリティ

最近以前作ったサイトの見直しをしていて、svgアイコンのアクセシビリティはこれで大丈夫なのか？と気になりました。

アクセシビリティとは何？という方に簡単に説明すると、視覚的ハンデ（盲目や弱視）等のためスクリーンリーダーなどの読み上げ機能とキーボード操作を利用している人でも問題なくサイトの閲覧・操作ができるように設計されているかどうか　ということです。

たとえば「imgタグにalt属性を正しく入力しておく」ことは、「SEOで重要だから」という面もたしかにありますが、画像が見えない・読み込めない状況でも何の画像なのかが理解できる　という大切な役割を持っています。

話を戻しまして、昨今のサイト制作ではアイコンを多用します。imgタグを使ったアイコンや画像であれば、最初から画像として認識されておりaltタグの内容が読み上げられますが、svgではどうなのか？　というのが冒頭の話です。

色々な意見や情報が錯綜しており結構混乱したのですが、自分なりに出した結論が以下の通りです。

svgのtitleタグとdescタグは完璧ではない

世界中の全てのブラウザが最新状態であれば、svgにtitleタグと、必要ならdescタグを設定しておけばOKです。

<svg>
 <title>Sample</title>
 <use xlink:href="#icon"></use>
</svg>

svgのtitle・descタグは実際のスクリーンには表示されず、スクリーンリーダーやクローラーに利用されます。
しかし、古いバージョンのブラウザを使用していると、title、descタグは認識されません。
さらに、Chromeの旧バージョンではsvgを画像としてすら認識しません。

それらの弱点をWAI-ARIA属性でカバーするとコードは以下のようになります。

<svg role="img" aria-labelledby="test">
 <title id="test">Sample</title>
 <use xlink:href="#icon"></use >
</svg>

メッセージを持つアイコン

単純な装飾としてのsvgアイコンではなく、何らかの大切な意味やメッセージを持つアイコンもあります。
その場合は、descタグもあった方が良いでしょう。

<svg role="img" aria-labelledby="test" aria-describedby="desciption">
 <title id="test">R-15</title>
 <desc id="description">この作品を１５歳未満の方が鑑賞することはできません。</desc>
 <use xlink:href="#r15"></use>.
</svg>

上の例の通り、title・descにid属性をつけ、aria-labelledby・ aria-describedbyで指定します。

リンクアイコン

ナビゲーションメニューなど、リンクの中にアイコンとテキストが並んでいる場合、重要なのは「どのページへのリンクなのか」ということです。
従って、aタグにaria-labelを設定し、アイコンはaria-hidden="true"で読み上げから回避しておけば良いと思います。

<a href="/" aria-label="トップページにもどる">
 <svg role="img" aria-hidden="true">
   <title id="test">トップページにもどる</title>
   <use xlink:href="#home"></use>
  </svg>
</a>

最終的にブラウザが勝手に判別してくれるようになるだろうと思いますが、もうしばらくは制作側での工夫がいりそうです。

今回の参考にしたページは下記の通りです。

23:40まで受講できるから、仕事と両立できるHTML5/CSS3コース[オンライン]

2020年6月20日HTML/CSSaria-describedby, aria-hidden, aria-label, aria-labelledby, role, svg, wai-aria

Posted by abetaka