ブログにおいて、画像の存在は非常に重要なものです。撮影した写真や描いた漫画を掲載している記事はもちろん、文章をメインにした記事においても、画像をアクセントに貼る、という人も少なくないのではないでしょうか。
記事内に画像を貼る際、ぜひ設定しておきたいのがalt属性（代替テキスト）です。alt属性は、画像などの要素（img要素）が表示できないときに、代わりに表示される文字列のことをいいます。
一見すると難しそうですが、はてなブログでは記事編集画面（PC版）から手軽にブログの画像にalt属性（代替テキスト）を付与することができます。
alt属性（代替テキスト）って何？ そのメリットとは？
alt属性は、ネットワークの問題で画像が読み込まれなかった場合に画像の説明を補うために使われるほか、音声ブラウザで読み上げられる際にも使われています。
つまり、alt属性で画像の説明を付与しておけば、さまざまな事情で画面上の画像が見えない読者にもきちんとブログの情報を届けられる、ということです。
HTMLや関連技術を開発するコミュニティーである「WHATWG」が発表している最新のHTML標準やワールド・ワイド・ウェブの各種技術の標準化を推進する団体「W3C」によるHTML5の勧告でもウェブをより開かれたものにするために、alt属性は必要な要素だと言及されています。
さらに、alt属性を活用すると記事のテキスト情報が増え、検索エンジンにコンテンツや画像の情報を伝える補助にもなるため、SEO（検索エンジン最適化）にも効果があると考えられます。
はてなブログで画像にalt属性（代替テキスト）を付与する方法
ここでははてなブログの記事編集画面（PC版）から画像にalt属性（代替テキスト）を指定する方法を解説します。
基本のalt属性の指定方法
1. 編集サイドバーの「写真を投稿」タブを開き、「貼り付け時に詳細を設定する」にチェックが入っている状態で画像を選択します
2.「選択した写真を貼り付け」をクリックすると、「写真の詳細設定」ウィンドウが開きます。「画像にalt属性を指定する（上級者向け）」にチェックを入れると代替テキストを入力するフォームが表示されます
3. 画像の代替となる文章を入力してください
4. 最後に「記事編集画面に貼り付ける」をタップし、画像を貼り付けると完了です
なお、複数の画像を貼り付ける場合でも、画像ごとに代替テキストを指定することができますので、画像の特徴に応じて適切な代替テキストを記入してみてください。
はてな記法・Markdownモードでより簡単にalt属性を付与しよう
はてな記法モードやMarkdownモードでは、より簡単に画像にalt属性を付与することができます。
はてな記法モードやMarkdownモードでは、画像は以下のような構造をしています。
[f:id:はてなID:画像番号:オプション]
編集サイドバーの「写真を投稿」から画像を貼り付けると、デフォルトで次のようにplainオプションが指定されます。
[f:id:hatenablog:20200623171745j:plain]
画像にalt属性を追加するには、plainの直後に:alt=任意のテキストを入力します。
[f:id:はてなID:画像番号:plain:alt=これは猫です。]
テキストを変更したい場合は、テキスト部分を編集して保存すれば書き換え完了です。
[f:id:はてなID:画像番号:plain:alt=これは犬です。]
どの画像にどんなテキストを入れたらいいの？迷ったときは事例を見よう
alt属性をつけるときに悩ましいのが、どの画像にどのようなテキストを入れればいいのか、という点です。
基本的には、デザイン装飾用の画像をのぞき、ブログ内の画像にはすべてalt属性をつけるのが望ましいとされています。
画像の特性に応じたalt属性の付け方については、日本ウェブアクセシビリティ普及ネットワークが公開している情報バリアフリーポータルサイトの「ウェブアクセシビリティ事例集」で詳しく紹介されています。
あなたのブログをもっと広く読者に届けるために、ぜひalt属性（代替テキスト）を活用してみてください。
また、そのほかの機能についても使い方を詳しく知りたい、という方には、ブログの機能から運用のコツまでをわかりやすくまとめたはてなブログの公式講座「はてなブログ アカデミー」もおすすめです。
関連記事
- 画像を貼り付ける際に、代替テキスト（alt属性）を指定できるようにしました - はてなブログ開発ブログ
- はてなフォトライフの画像を貼り付けるときに、フォトライフ記法でaltとtitleを指定できるようにしました（はてな記法モード、Markdownモード） - はてなブログ開発ブログ
alt属性の仕様や意図については、HTML標準に関するドキュメントなどを参照してください。WHATWGによる最新のHTML標準およびW3CによるHTML5の勧告を以下で参照できます。
それぞれ日本語訳を提供しているサイトもいくつかあり、たとえば以下のサイトで読むことができます。
