はてなフォトライフの画像を貼り付けるときに、フォトライフ記法でaltとtitleを指定できるようにしました（はてな記法モード、Markdownモード）

はてなブログでは、はてなフォトライフに投稿した画像を表示するはてな記法（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の勧告を以下で参照できます。

HTML Standard
HTML Standard

それぞれ日本語訳を提供しているサイトもいくつかあり、たとえば次で読むことができます。

HTML Standard 日本語訳
4.7 埋め込みコンテンツ — HTML5 日本語訳