@_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属性を使う。
ということです。
