メモ:SVG要素のその属性は本当に必要なのか

あるウェブページで次のようなSVG要素が直に埋め込まれていたのを見つけた。

<svg viewBox="0 0 24 24" height="32" width="32" aria-hidden="false" focusable="false" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="currentColor" aria-label="email" stroke-linecap="round" stroke-linejoin="round">
  <path d="..."></path>
  <polyline points="..."></polyline>
</svg>

d属性値やpoints属性値は話の本筋とは無関係なので省略。) この例ではSVG要素に結構な属性が指定されているのだけれども、本当にその属性値は必要なのか?ということを確かめてみよう、というのがこの記事の趣旨。なお、上記例のような属性の指定が一般的なのかどうかは知らない。

viewBox="0 0 24 24" height="32" width="32"

SVGの大きさ等に関連する属性群。(SVG2訳8.6. viewBox 属性7.5. サイズ法プロパティ: width, height プロパティの効果)。

aria-hidden="false"

aria-hidden=trueはよく見かけることがあるけれども、falseは個人的にはあまりに見かけない気がする。WAI-ARIA 1.2訳aria-hidden (ステート)によれば、

執筆時点で、aria-hidden="false"はブラウザーで一貫性なく動作することが知られている。将来の実装が改善されるよう、このアプローチに頼る前に、徹底的に用心と試験を利用すること。

という感じで、実装の挙動が実装間で異なるらしい(試してはいない)。明示する必要はないと思われるので、この用法であれば記述する必要は薄いと思う。

focusable="false"

結論から言うと、そのような属性は今日のSVG仕様にはないので削除するべき。

本当にそんな属性がないのかというと、そんなことはなくて、SVG 1.2 Tinyに定義されていた。(仕様訳鏡13.12.1 focusable 属性

SVG 1.2 Tinyの位置付けは、SVG2曰く、

SVG 標準のこの版は、 2003年にリリースされた 1.1 版に基づいて開発され,その上に築かれている。 2008年には SVG の中間的なバージョン Tiny 1.2 がリリースされた。 しかしながら,それは広くから受容されず、それが増強した各種 特能の実装は,ごく少数しかなかった。 しかしながら, 1.2 の特能のうち一部は、多くの SVG 実装により実装され,この仕様の一部として組み入れられている。 その他においては、 SVG WG は,バージョン Tiny 1.2 を SVG 標準の非推奨にされた分岐であるものと見なす。

SVG2訳1.3. この標準の以前のバージョンとの関係性より。

引用の最後の文の原文はBut otherwise, the SVG Working Group consider version Tiny 1.2 to be a deprecated branch of the SVG standard.と言うことなので、まあそういうことである。

ちなみにHTML Standard 2.1.9 Dependenciesでは

User agents that implement SVG must implement the SVG 2 specification, and not any earlier revisions.

とある(と言う点でも、SVG2仕様を見にいくのがよろしかろう)。

fill="none"

SVG2訳13.4.1. フィルによる塗りの指定法: fill プロパティ

xmlns="http://www.w3.org/2000/svg"

HTMLにおいては、冗長なだけの属性なので削除する。

上の例が示すように,HTML パーサを利用しているときは、[ xmlns 属性で,要素は SVG 名前空間に属するものと宣言する ]必要はない。

SVG2訳5.1.2. 名前空間より。

stroke="currentColor"

SVG2訳13.5.1. ストロークによる塗りの指定法: stroke プロパティ

aria-label="email"

おそらく代替テキストの目的でそうしているのだろうけれども、代替テキストの目的であるならばこのように書くべきではない。なぜならSVGネイティヴの機能で代替テキストを用意するメカニズムがあるのだから。

ARIAの使い方のガイドにあたるW3CノートUsing ARIA曰く、

If you can use a native HTML element [HTML51] or attribute with the semantics and behavior you require already built in, instead of re-purposing an element and adding an ARIA role, state or property to make it accessible, then do so.

この文書がちょっと古くて、HTMLそのものを機能をターゲットにしているために、今回の説明からしてややピンボケすることもあるのだけれども、まあ、SVGネイティヴの機能があるならば、ARIAではなくそのネイティヴ機能を使うようにする、というのが趣旨といったところ。

また、SVG2訳付録 C. アクセシビリティのサポートにあるように、

WAI-ARIA のサポート, テキストによる代替

desc, title 要素によるテキスト要素の代替

代替テキストはsvgtitle要素を使えばよい。(SVG2訳5.7. desc, title 要素

一応WAI-ARIA 1.2訳aria-label (プロパティ)へのリンクもはっておく。

stroke-linecap="round"

SVG2訳13.5.4. ストロークの両端に描く cap : stroke-linecap プロパティ

stroke-linejoin="round"

SVG2訳13.5.5. 継ぎの制御法: stroke-linejoin, stroke-miterlimit プロパティ

参考:書き直したもの

コードゴルフってわけでもないんですけども、短くできる的な。

<svg viewBox="0 0 24 24" height="32" width="32" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
  <title>email</title>
  <path d="..."></path>
  <polyline points="..."></polyline>
</svg>

# 記事を公開してから気づいたけど、role=imgが要ると思われる。