@_yuheiyによる当エンジニアブログで実施したアクセシビリティ改善の方法についての解説は全体的に丁寧に説明しているだけに、下記の記述がちょっと気になったという話です。
これが
img
要素であればalt
属性を使って代替テキストを設定すべきですが、svg
要素ではそれができません。そこで、WAI-ARIAの出番です。次のようにすることで、alt
属性と同様に代替テキストが設定できます。
SVGネイティブに代替テキストを設定する方法は(SVGの)title
要素だ、ということはおさえておくべきかなと。SVG2仕様書訳(原仕様書)に次のように書かれています。
title 要素は、 その親要素用の短いテキスト代替を表現する。
つまり、aria-label
を使うことなく、次のように書けます。(HTML解体新書のp.339にもあります。)
<a href="..."> <svg role="img"><title>Xでシェア"</title>...</svg> </a>
「aria-label
使うな」の過激派としては、aria-label
属性は極限までなくしたいところ…ではありますが、仕様書に
とあるように、マウスホバー時に(HTMLのtitle
属性のような)ツールチップが現れます。美的観点から、これをよしとないという人もいるでしょう。その場合は、<title>
を使うのではなくaria-label
属性が選択することになります。
このことは、WAI-ARIA 1.3仕様訳(原仕様書)にも記載されています。
ほとんどのホスト言語は、要素に名前を付けるために使用できる属性(たとえば、HTMLにおける
title
)を提供するが、さらにこれはブラウザーのツールチップを提示するかもしれない。DOMコンテンツまたはツールチップが望ましくない場合に、要素が属性の使用を禁止しないならば、著者はaria-label
を用いて要素のアクセシブルな名前を設定してもよい。
まとめると、
- HTMLの
<img>
のalt
属性に対応するものは、SVGの<title>
である。 - SVGの
<title>
はツールチップをレンダリングする。これを避けたいときに、代わりにWAI-ARIAのaria-label
属性を使う。
ということです。