導入
Web制作の現場でSVGを扱う際、アクセシビリティを考慮して要素に説明文を付与することは非常に重要です。かつてはxlink:title属性がその役割を担っていましたが、現在は仕様として非推奨（Deprecated）となっています。本記事では、なぜxlink:titleを避けるべきなのか、そして現在推奨されている代替手法である＜title＞要素への移行方法について解説します。古いコードを保守している方や、これからSVGを実装する方はぜひ参考にしてください。
基礎知識
xlink:titleは、SVG要素に対して「そのリンクやリソースが何を指しているか」を人間が理解できるテキストで記述するための属性でした。しかし、現在のWeb標準では、属性として情報を埋め込む手法は廃止の方向にあります。
現在推奨されているのは、SVGの内部に＜title＞要素を配置する手法です。これはHTMLの＜title＞タグと同様に、文書の構造の一部として意味を持つため、スクリーンリーダーなどの支援技術がより正確に情報を取得できるようになります。また、ブラウザ標準のツールチップ表示としても機能するため、ユーザー体験の向上にも直結します。
実装/解決策
実装は非常にシンプルです。SVG要素（や
サンプルプログラム
以下は、非推奨のxlink:titleを使わず、推奨される＜title＞要素でアクセシビリティを確保したSVGの例です。
応用・注意点
現場で注意すべき点は、「すべてのSVGにtitleを付ける必要はない」ということです。装飾目的のアイコンなど、情報として重要でないSVGにまでtitleを付与すると、スクリーンリーダーの利用者が不要な情報まで読み上げられることになり、かえって使いにくくなります。
また、＜title＞要素には「id」属性を付与し、親要素からaria-labelledbyで参照するというさらに高度な手法もあります。これにより、複数の要素から同じ説明文を参照させるといった柔軟な制御が可能です。将来的な仕様変更のリスクを避けるためにも、今後は属性ベースではなく、要素ベースでの実装を基本方針としていきましょう。
コメント