SVGとは何ぞ。WordPressでAltはつけられるのか。

最終更新日

""

この記事は筆者が見聞きしたことを、主に自分の学習用にまとめたものです。正確に期しておりますが、何かございましたらおそれいりますが筆者のTwitterまでご連絡いただけますようお願いいたします。

WordPressの記事に画像としてSVGを差し込んだ場合、Altはつけられるのか?疑問を解決したので学習したことのメモ。WP ZoomUP #16の懇親会にて皆さんに教えていただきました。

結論、WordPressでAltはつけられる。

WordPressでSVGをメディアにアップロードして利用すると、画像扱いされるのでAltは入れられる。

画面キャプチャー
ブロックエディターで、画像ブロックにSVGを設定したところ。
詳細設定エリアにはaltの入力欄がある。

※ Altが出力されない場合は、テーマやプラグインに起因していることもある。もし管理画面や投稿画面でAltを設定していてもHTMLに反映されていなければ、そのあたりを確認する。

WordPressとSVG

プラグインを使ってSVG投稿可能に

WordPressはセキュリティの関係上、デフォルトでSVGをアップロードできないようにしてある。「Safe SVG」というプラグインを有効化するとできるようになる。

セキュリティ問題

SVGはXMLファイル。プログラムが走って、ウェブページが読み込まれる時、SVGの中身も読み込まれる。ではその読み込まれたSVGの中に悪意あるプログラムが仕込まれていたら…危ない。ここがSVGのセキュリティに関する問題点。

具体的に言うと、ネットで拾ってきた適当なSVGにはそういった問題がある可能性がある。また、悪意のある人にWordPressにログインされて、何か書き込まれる可能性もある。

が、Adobe Illustratorなどで自作したSVGを使い、ログインや編集権限などを制限していればほぼほぼ大丈夫らしい。

先ほど紹介した「Safe SVG」のプロ版だと、SVGをアップロードする人を制限できるとのこと。

HTMLでSVGを表示する方法の種類

HTMLでSVGを表示するにはいくつかの方法がある。@ka215さんのQiitaの記事「HTML5でのSVGファイル操作のおさらい」がとても分かりやすかったので、詳しくはそちらをご覧いただきたい。今回必要なところだけ下に抜粋。

<IMG> を使う ─ HTMLのIMGタグにSVGファイルを直接指定するやり方。

<SVG> タグを使う ─ HTML内に(インラインで)直接SVGタグでベクターパスを指定して描画するやり方。

「HTML5でのSVGファイル操作のおさらい」(by @ka215さん)から抜粋

これまでに説明したWordPressのメディアファイルとして設定する方法は、<img>タグを用いた方法。

一方次から話題にしているのは<svg>タグを使う方法。

SVGとアクセシビリティ

SVGとは何ぞ。

題名につけた『SVGとは何ぞ。』に対する解答は、株式会社まぼろしの松田直樹さん(SVG伝道師)のスライドがめちゃくちゃ分かりやすいのでこちらをご覧いただきたい。

SVGをスクリーンリーダーに読ませる方法

SVGにスクリーンリーダーでをませる情報を記載するには、こちらのスライドの9〜28ページを参照。抜粋して書き出させていただくと下記のような感じ。

  • SVGのXMLの<title>タグや<desc>タグには、画像を説明する文章情報を記述できる。
  • ただ、それらは、スクリーンリーダーが(今のところ)読んでくれない。
  • role属性とaria-*属性を使うと読んでくれる。

具体的には次のように書く。

<!-- スライド22ページのコードの書き出し -->
<svg viewBox="0 0 100 100"
		 role="img"
		 aria-labelledby="title desc">
  <title id="title">ハンバーガー</title>  
  <desc id="desc">ハンバーガーのフラットなイラストアイコン</desc>
</svg>

おまけ:SVGの中身(要素・属性)

先述の松田さんの、別のスライドをご参照いただきたい。16ページのあたりから。(尚、こちらは2014年公開のスライドですので、技術の進化と共に変わっているであろう部分(ブラウザごとの対応など)についてはご注意されたし。)

外部リンク

その他参考になる記事・ツールをご紹介。

The eye-catching Photo by Pankaj Patel on Unsplash