［連載］植木 真の「こんなブログ記事見つけました！」
第59回: 7 solutions for creating more accessible SVGs

SVGを使用するときに気をつけたい7つのポイント

今回は久しぶりにテクニカルな記事、それも英語の記事を皆さんと一緒に読んでみたいと思います。

その記事は「7 solutions for creating more accessible SVGs」というタイトルで、simply accessibleという会社のブログ記事です。

simply accessibleは、世界的にも著名なWebアクセシビリティのエキスパートであるDerek Featherstone氏が設立した会社で、アクセシビリティに関する案件なら、WebサイトやWebアプリのデザインや開発、テスト、トレーニング、コンサルティングなど、ユーザビリティやUXも含めて、かなり幅広く手掛けています。

この記事の冒頭では、次のように書かれています。

We've been working with SVGs a lot recently, which has led our developers down a rabbithole of discovery! Here are some things to consider when it comes to SVGs and accessibility.

つまり、この記事は、彼らが実際に関わってきた案件を通じて得た、SVGに関するノウハウをシェアするという目的で書かれたようです。

では、記事のタイトルにもある "7 solutions" をまず先に、確認してみましょう。

1. <img> tags and SVGs
2. <title> tags and SVGs
3. IE focus bug with focusable elements
4. Safari 10 focus bug with <use>
5. Aria-label inconsistency
6. IE8 and below render <desc>
7. Colour contrast

さあ、この7つのタイトルを見て、何となくその内容が想像できるものもあれば、何のことだろう？というものもありますね。では、順番に見ていきましょう！

1. <img> tags and SVGs

まず、1つめは、img要素でSVGを使用するときの注意点です。これは、ご存知の皆さんも多いのではないでしょうか。

When SVGs are implemented as <img> tags with an .svg as the source, we've encountered a few issues for VoiceOver and TalkBack users. These issues occur when those <img> tags don't also have an ARIA role="img" attribute.

img要素のsrc属性でSVGファイルを指定するとき、iOSのスクリーンリーダー「VoiceOver」とAndroidのスクリーンリーダー「TalkBack」で問題があるということで、img要素にrole="img"を設定していないときに起こる問題だとしています。

そのSVGがリンクではない場合とリンクの場合とでは、ユーザーに与える影響が若干異なるようですが、より確実な対応策ということで、当面はimg要素のsrc属性でSVGファイルを指定するときには、role="img"を念のため設定しておくのがよさそうです。

2. <title> tags and SVGs

続いては、title要素とSVGということなのですが、次のように書かれています。

We often see examples of making SVGs accessible by simply adding a <title> element within the inline <svg>. While this does help in some situations, like a lone SVG icon within a link, adding a <title> element doesn't make SVGs accessible in all browsing environments.

SVGのアクセシビリティに関する解説でよく見かけるのが、svg要素内にtitle要素を追加して代替テキストを提供するというのがありますが、リンク内にSVGがある場合、全てのブラウザ環境で功を奏するわけではないようですね。

この問題の解決策としては、記事中では "visually-hidden要素" と言っていますが、サンプルのソースをご覧いただければ分かるように、<span class="visuallyhidden">Close</span> と隠しテキストのようなものを埋め込んでおいて、svg要素自体にも aria-hidden="true" を設定するというのを推奨しています。

これは、ブラウザやスクリーンリーダーによるサポートが安定してくるまでの暫定策といった感じでしょうか。

3. IE focus bug with focusable elements

そして、3つめはIEのバグへの対処策のようです。

The <svg> elements inside focusable elements (like links or buttons) in Internet Explorer default to focusable="true" due to a bug. This causes both the parent element and the <svg> to receive focus.

リンクやボタンなどのフォーカス可能な要素の中でsvg要素を使用しているとき、IEではsvg要素自体もフォーカス可能（focusable="true"）になってしまうというバグがあるようです。

親要素とsvg要素の両方がフォーカスを受け取ってしまうということなのですが、キーボード操作でフォーカスを移動しているとき、svg要素がフォーカスを受けとったときにフォーカスインジケータが非表示になってしまいます。

さらに、スクリーンリーダーが親要素とsvg要素が続けてフォーカスを受け取るので、同じ読み上げが繰り返されてしまうこともあるようですね。

この問題は、svg要素はフォーカスできないというのが本来あるべきデフォルトの状態なので、svg要素にあえて focusable="false" を設定することで解決できるようです。

4. Safari 10 focus bug with <use>

さてさて、お次はSafari 10のバグ。

When accessed in Safari 10, <svg> that have <use> elements without whitespace between the parent <svg> and child <use> tags prevent focus from moving past the <svg>.

こんなバグもあったのかという感じですが、svg要素内にuse要素があるとき、svg要素の開始タグとuse要素の開始タグの間、そしてuse要素の終了タグとsvg要素の終了タグの間には、それぞれ空白文字を入れておかないと、キーボード操作時にフォーカスがsvg要素を通過できないという問題があるようです。

ただ、すでにWebKit Nightlyでは修正されているようなので、わざわざ空白文字を入れなくても、今後はこの問題は解決されていくようですね。

5. Aria-label inconsistency

お次は、aria-label属性を使ったときに起こるVoiceOverでの問題。

つづきはメルマガで……。