スキップしてメイン コンテンツに移動

些細な日常

インラインSVGの画像のリンクと題名と説明文とランドマークとラベルの付け方

サイトに自由に描画できるインラインSVGは便利で、しかも画質に優れるからサイト作成ではとても役立つと感じる。

インラインSVGをホームページやブログのデザインに取り入れる際には通常のHTMLとは扱いが異なる部分があるので、混乱しないように幾つか取り上げてどのようなマークアップが特徴的に可能かを覚えておきたい。

インラインSVGの特徴的なマークアップ

狐狐が地面に身を丸めて眠っている
Fuchs by Schmidsi / Pixabay

リンクの付け方について

<a href="リンク先">リンク名</a>

通常のimgタグの画像にリンクを付けるように外側のsvgタグをリンクのaタグで囲んでも大丈夫かも知れないけれども実際の画像とリンクの大きさが合わなくなることもあるからsvgタグの内側の諸々の描画用のタグを直接とリンクのaタグで囲んだ方がデザインを全く崩さない。

記述例

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="auto" viewBox="0 0 320 240">
  <a href="https://example.com/">
  <circle cx="160" cy="120" r="60" stroke-width="2" stroke="#dc143c" fill="transparent"/>
  </a>
</svg>

インラインSVGは通常のimgタグの画像が一纏まりで表示されるのとは違う。描画に関してsvgタグは座標を示しているだけで、実際に画像を描画しているのは別の線や丸などの描画用のタグになる。リンクを付けるのも画像が対象のかぎりはsvgタグよりも諸々の描画用のタグを選ぶのが正確な表示に繋がる。

線描のアイコンとか隙間が多い画像に対してはクリック／タップができなくて付けたリンクが抜けてしまって機能しないという場合が出て来る。これを避けるには線の色のstroke属性や面の色のfill属性の値に「none」（無色）ではなくて「transparent」（透明）を使うと大丈夫なんだ。ブラウザに前者は色がなくてリンクの画像がないと判定されるけれども後者は透明という色があるみたいに――硝子板でも置かれたか―――リンクの画像があると判定されて記載したaタグがちゃんと機能してくれる。

svgタグの内側のリンクで、URLなどを指定するaタグのhref属性は元々は「xlink:href」とSVGが依拠するXMLの方式：xlinkの接頭辞付きで記載することになっていたけれども昨今では普通にHTMLの「href」で構わないというか、同じにするのが主流の記述に変わって来たらしい。

どちらでも使えるけれども基本的には後方互換性のある新しい「href」を使って以前の「xlink:href」は古いからなるべく使わず、敢えて使うならばsvgタグに「xmlns:xlink="http://www.w3.org/1999/xlink"」というxlinkの名前空間を記載しておいて一緒に使うのが推奨されるようだ。

svg内の描画用のタグが複数の場合は全体をgタグで囲って一つに纏めてからaタグで囲むと画像の全体をリンクの対象として扱える。

参考サイト

題名の付け方について

<title>画像の題名</title>

通常のimgタグの画像で題名を示すtitle属性に相当するtitleタグをsvg内で使うことができる。サイトのコンテンツとしては非表示で、ツールチップとしてクリック／タップで表示されたり、スクリーンリーダーで読み上げられたりするなどの操作性の向上に役立つ。

記述例

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="auto" viewBox="0 0 320 240">
  <title>真円</title>
  <circle cx="160" cy="120" r="60" stroke-width="2" stroke="#dc143c" fill="transparent"/>
</svg>

インラインSVGのtitleタグはsvg内に一つだけ使うのが推奨される。すると一つのsvgタグを一つの画像（全体が纏まった内容を持つ）に使うことが想定されるわけで、どんな画像のマークアップなのかを複数の内容から混乱しなくなるのが良いと思う。複数の内容が必要ならばそれぞれのインラインSVGを作成するとtitleタグもそれぞれに一つずつしか記載しなくて済む。

もう一つsvg内のtitleタグの記述は全ての子要素の先頭に置くことが推奨される。画像の題名なので、サイトのマークアップとして合理的に纏められるし、作成上も分かり易いソースコードになる。そして様々なデバイスのツールチップや読み上げで拾われることも多いようだ。後ろの方だと除外される場合もないわけではないから標準的な仕方として全ての子要素の先頭に置くのがsvg内のtitleタグにとっては機能し易い。

インラインSVGで画像以外にtextタグで文章を表示する際に説明文が分かればdescタグを敢えて追加する必要はない。

svg内のtitleタグは説明文のdescタグと一緒に使われることも珍しくなくて画像の内容がもっと詳しく伝えられる。 

svg内に複数の画像か画像以外のマークアップもあれば題名を付けたい画像のマークアップだけをgタグで囲ってtitleタグを入れると題名の対象を正確に指定できる。

参考サイト

説明文の付け方について

<desc>画像の説明文</desc>

通常のimgタグの画像で説明文を示すalt属性に相当するdescタグをsvg内で使うことができる。alt属性は画像が表示されないときに代替文として表示されるものだけれどもdescタグはサイトのコンテンツとしては専ら非表示で、スクリーンリーダーで読み上げられるなどの操作性の向上に役立つ。

記述例

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="auto" viewBox="0 0 320 240">
  <desc>真円がクリムゾンの線で描かれている。</desc>
  <circle cx="160" cy="120" r="60" stroke-width="2" stroke="#dc143c" fill="transparent"/>
</svg>

svg内にtitleタグを使うのは一つだけが推奨されてインラインSVGは中身が一つの画像を表示するように扱うのが賢明とすると結果的にdescタグもsvg内に何個も使う必要はなくなる。

インラインSVGで画像以外にtextタグで文章を表示する際に説明文が分かればdescタグを敢えて追加する必要はない。

svg内のdescタグは題名のtitleタグと一緒に使われることも珍しくなくて画像の内容がもっと易しく伝えられる。

svg内に複数の画像か画像以外のマークアップもあれば説明文を付けたい画像のマークアップだけをgタグで囲ってdescタグを入れると説明文の対象を正確に指定できる。

参考サイト

ランドマークの付け方

role="img"

視覚障害者はサイトのどこに何があるかをスクリーンリーダーの読み上げで把握するけれどもインラインSVGに関して画像や図表などがあると直ぐに分からない場合が多いからコンテンツの性質を示すようなランドマークを付けると良いと思う。

記述例

<svg role="img" xmlns="http://www.w3.org/2000/svg" width="100%" height="auto" viewBox="0 0 320 240">
  <circle cx="160" cy="120" r="60" stroke-width="2" stroke="#dc143c" fill="transparent"/>
</svg>

role属性を使って画像や図表などの「img」の値を入れてsvgタグに記載する。

通常のimgタグの画像には一般的に付ける必要はなくてHTMLの要素によってコンテンツの性質が分かるものもある。対応表がARIA in HTML 日本語訳に載っているけれどもSVG：svg要素に関しては「対応するロールなし」となっているので、大概、何かを付けると操作性に効果的かも知れないわけだ。

SVGに使用可能なrole属性の値

  • img＿画像、図表など
  • document＿文章、言葉など
  • application＿入力を要求する機能など

インラインSVGの画像のrole属性の値は「img」だけれどもその他の文章や入力機能といったコンテンツを作成する場合には相応の値を取ってランドマークを付けられる。

参考サイト

ラベルの付け方について

aria-label="画像のラベル"

画像などの文章以外のコンテンツはスクリーンリーダーの読み上げの対象から外れて何なのかが分からない。そこでラベルを付けることによってコンテンツの状況、または機能を把握する手がかりを与えるとサイトの操作性を上げられる。

記述例

<svg aria-label="インラインSVGで円を描画してみた" xmlns="http://www.w3.org/2000/svg" width="100%" height="auto" viewBox="0 0 320 240">
  <circle cx="160" cy="120" r="60" stroke-width="2" stroke="#dc143c" fill="transparent"/>
</svg>

ラベルはコンテンツの状況ならば題名や説明文に近いけれどもコンテンツの機能を示すことにも使えるのが特徴的だ。

例えばシェアボタンのTwitterのアイコンは見るだけのものではないから「Twitterへ共有する」と機能を明かすと「Twitterのアイコンがある」と状況を述べるよりもサイトでの役割が分かって操作性が上がる。

ラベルは単体でも使われるけれどもランドマークと組み合わせるとコンテンツの性質に状況や機能を補足するから利便性にさらに優れると感じる。

画像のための文章があってさらに何かを追加する場合は他のARIA属性を使うことができる。

SVGを強く補足するARIA属性

aria-labelledby
短い文章を添える（aria-labelと同じくらいの文字数）
aria-describedby
長い文章を添える（aria-labelを大きく越える文字数）

何れも画像に文章があるときに使われるけれども前者は念押す、後者は詳解するために役立つだろう。

aria-labelと変わらず、ランドマークのrole属性と組み合わせると良いと思う。

参考サイト

サイトの利視覚障害者の利便性のために

視覚障害者がスクリーンリーダーの読み上げでサイトを把握する際に色んな文章を有利でも余りに盛り込み過ぎると読み上げが延び捲って却ってサイトの利便性を下げないともかぎらないから注意して行わなくてはならない。

インラインSVGで気がかりなのは題名か説明文、または両方とラベルを一緒に記載すると読み上げが冗長になるかも知れない。

例えば見るのが主体の画像には内容を良く伝えるための題名か説明文、または両方だけ、行うのが主体のシェアボタンのアイコンには機能を良く伝えるためのラベルだけにするようなサイト作成があり得ると考える。

上記の要素や属性を全て一つのインラインSVGに追加することができるし、視覚障害者のために多く補足できるけれども文章の冗長な読み上げからサイトの利便性を下げたら良い結果は得られないので、必要なマークアップだけを取捨選択して追加するという気持ちも大事だ。

参考サイト

コメント