<svg>ではaltが使えないからaria-labelはロジックをすっ飛ばしている

@_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属性は極限までなくしたいところ…ではありますが、仕様書に

既存の UA の多くは、 title 要素の親要素に hover されたとき,ツールチップとして描画する。

とあるように、マウスホバー時に(HTMLのtitle属性のような)ツールチップが現れます。美的観点から、これをよしとないという人もいるでしょう。その場合は、<title>を使うのではなくaria-label属性が選択することになります。

このことは、WAI-ARIA 1.3仕様訳原仕様書)にも記載されています。

ほとんどのホスト言語は、要素に名前を付けるために使用できる属性(たとえば、HTMLにおけるtitle)を提供するが、さらにこれはブラウザーツールチップを提示するかもしれない。DOMコンテンツまたはツールチップが望ましくない場合に、要素が属性の使用を禁止しないならば、著者はaria-labelを用いて要素のアクセシブルな名前を設定してもよい

まとめると、

ということです。