はてなブログでは、はてなフォトライフに投稿した画像を表示するはてな記法(fotolife記法)を拡張し、画像(img
要素)のtitle
属性とalt
属性を指定できるようにしました。
編集サイドバーの「写真を投稿」などを使ってはてなフォトライフにアップロードした画像を、はてな記法モードもしくはMarkdownモードで記事編集画面に貼り付ける際に、よりアクセシビリティを考慮したマークアップを実現することができます。どうぞご利用ください。
*見たままモードでは、はてな記法ではなくHTMLでそのまま貼り付けるため、HTML編集タブから書き換えることができます。
フォトライフ記法と、titleおよびaltを指定する方法について
はてな記法モードおよびMarkdownモードでは、編集サイドバーから「写真を投稿」したときに、次のようなfotolife記法で画像が貼り付けられます。
[f:id:hatenablog:20170217161727j:plain]
この記事を公開すると、記法そのもの(f:id:hatenablog:20170217161727j:plain
という文字列)が、画像のtitle
属性とalt
属性のデフォルト値として設定されます。
新しく拡張されたfotolife記法では、title
オプションとalt
オプションを追加し、次のように記述できるようにしました。
[f:id:hatenablog:20170217161727j:plain:title=パンダ:alt=アドベンチャーワールドで見たパンダ]
これで次のような画像が表示され、それぞれ等号の後に指定した文字列が属性値になります。
上の画像にPC環境でマウスを重ねると、title
属性の値がツールチップで表示されます。また、画像を表示できない環境で閲覧したり、画像を選択してキーボードショートカットなどでコピーすると、alt
属性の値が代替テキストとして使用されます。
オプションを記述する際には、title
とalt
のどちらを先に書いてもかまいません。オプションを省略すると上記のデフォルト値が指定されますが、次のようにオプションを指定して等号の右側を省略すると、属性値を空にできます(*等号まで省略しないよう注意してください)。
[f:id:hatenablog:20170217161727j:plain:title=:alt=]
※fotolife記法のtitle
オプションおよびalt
オプションは、はてなブログ独自の拡張です。はてなダイアリー、はてなグループなどでは利用できません。
fotolife記法の詳細は、ヘルプ「はてなフォトライフの写真を貼り付ける(fotolife記法)」や、関連する「はてなフォトライフを使う」および「記事に写真や画像を貼り付ける(編集サイドバー「写真を投稿」)」などを参照してください。
関連リンク
title
属性とalt
属性の仕様や意図については、HTML標準に関するドキュメントなどを参照してください。とくにalt
属性は、画像の代替となるテキストとして必要とされており、WHATWGによる最新のHTML標準およびW3CによるHTML5の勧告を以下で参照できます。
それぞれ日本語訳を提供しているサイトもいくつかあり、たとえば次で読むことができます。