はてなブログ開発ブログ

はてなブログの新機能など開発に関する情報、公式のお知らせを発信します。

画像を貼り付ける際に、代替テキスト(alt属性)を指定できるようにしました

はてなブログでは、記事編集画面(PC版)の編集サイドバーにある「写真を投稿」タブから写真を貼り付ける際に、代替テキスト(alt属性)を指定できるようにしました。あわせて、キャプション(説明文)を付ける機能の改善も行いました。

画像の詳細設定ウィンドウ

代替テキストは、画像などの要素が表示できないときに、代わりに表示される文字列です。ネットワークの問題で画像が読み込まれなかった場合に表示されたり、音声ブラウザで読み上げられる際に使われたりします。

画像に代替テキストを指定するには、まず編集サイドバーの「写真を投稿」タブを開き、「貼り付け時に詳細を設定する」にチェックが入っている状態で画像を選択します。そのまま「選択した写真を貼り付け」をクリックすると、「写真の詳細設定」ウィンドウが開きます。「画像にalt属性を指定する(上級者向け)」にチェックを入れると代替テキストを入力するフォームが表示されるので、文章を入力してください。最後に「記事編集画面に貼り付ける」を選び、画像を貼り付けると完了です。複数の画像を貼り付ける場合でも、画像ごとに代替テキストを指定することができます。

キャプション(説明文)を付ける機能を改善しました

さらに、今年9月に追加した画像にキャプションを付ける機能について、以下の通り改善を行いました。

  • キャプションとして入力した文字列を、title属性にも適用するようにしました
  • キャプションを入力する「写真の詳細設定」ウィンドウに、対象となる画像のサムネイル画像を表示するようにしました

代替テキストとあわせて、画像を貼り付ける際にぜひご利用ください。