はてなブログでは、はてなフォトライフに投稿した画像を表示するはてな記法(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
4.7 Embedded content — HTML5
それぞれ日本語訳を提供しているサイトもいくつかあり、たとえば次で読むことができます。