はてなブログでは、はてなフォトライフに投稿した画像を表示するはてな記法︵fotolife記法︶を拡張し、画像︵
img要素︶のtitle属性とalt属性を指定できるようにしました。
編集サイドバーの﹁写真を投稿﹂などを使ってはてなフォトライフにアップロードした画像を、はてな記法モードもしくはMarkdownモードで記事編集画面に貼り付ける際に、よりアクセシビリティを考慮したマークアップを実現することができます。どうぞご利用ください。
＊見たままモードでは、はてな記法ではなくHTMLでそのまま貼り付けるため、HTML編集タブから書き換えることができます。
フォトライフ記法と、titleおよびaltを指定する方法について
はてな記法モードおよびMarkdownモードでは、編集サイドバーから﹁写真を投稿﹂したときに、次のようなfotolife記法で画像が貼り付けられます。
上の画像にPC環境でマウスを重ねると、
[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の勧告を以下で参照できます。
それぞれ日本語訳を提供しているサイトもいくつかあり、たとえば次で読むことができます。
