アクセシビリティとSEOのための効果的な代替テキスト作成の究極ガイド

画像が示す内容と、それが人々にどのように重要かを説明する簡潔で記述的な文としてaltテキストを書いてください。 各画像に対して、明確な説明は、スクリーンリーダーに依存するユーザーに対してコンテキストを伝える支援技術を助けます。

Altテキストは検索の可視性をサポートします。これにより、検索エンジンはサイトのコンテンツを理解し、周囲の説明に関連付けられた画像をインデックス化できます。よく作られた説明は、数千の検索を可能にし、ユーザーを適切な製品や機能と結びつけます。良いaltテキストはアクセシビリティに寄与し、ユーザーエクスペリエンスを強化し、検索シグナルをページのコンテキストに合わせるのに役立ちます。言語をシンプルに保ち、散漫を避け、ページのコンテキスト内で画像が自身を説明できるようにしてください。

ガイドライン: 各画像に対して、主語、動作、コンテキストを記した具体的な説明を書いてください。製品の場合、製品名、色、主な特徴を記述します。汎用的なラベルではなく正確な用語を使用し、サイトのコンテンツ戦略との一貫性を保つためにドキュメントを確認してください。最も効果的なaltテキストは、ページを豊かにするもので、周囲のテキストで既に述べられていることを繰り返さないものです。

野生動物の画像の例: 給餌器近くの枝に止まるシジュウカラ。Altテキストは「庭の鳥の給餌器近くの枝に止まる2羽のシジュウカラ。」のように読めます。これにより、シーンが明確に伝わり、画像を見ることなくユーザーが理解できます。一部の画像は小さな特徴を示すだけの場合があります。その場合、コンテキスト内の機能を記述します。例えば、「サイトヘッダーの枝に止まるシジュウカラのアイコン。」

最後に、ドラフト作成後、チームメンバーにaltテキストを承認してもらい、正確性とドキュメントとの整合性を確保してからサイトに公開してください。

アクセシビリティとSEOのためのAltテキスト執筆の究極ガイド；Altテキストを使用するタイミング

スクリーンリーダーのために、画像が伝える内容とページ上での適切な役割を記述した簡潔で情報提供的なaltテキストから始めます。このアプローチは、小さなアイコンから複雑な図表まで、あらゆるものに適用でき、画像が見られない場合にユーザーが周囲のコンテンツを理解するのを助けます。

記述する内容については、コンテンツと機能に焦点を当てます。画像が装飾的で意味を追加しない場合、altテキストを省略するか、空のalt属性を設定してスクリーン上の流れを中断しないようにします。

情報を伝える画像にaltテキストを使用します: チャート、図表、写真、ロゴ、またはメッセージに寄与するあらゆるビジュアル。Excelチャートのトレンドを示す図表の場合、軸とトレンドラインを記述します。砂漠のシーンや鳥の写真が焦点の場合、主語と設定を記します。色が意味を持つ場合、それらを言及します（例: 白い背景に太い線）。画像にシジュウカラなどの野生動物が登場する場合、動物とその動作を記述します。行をシンプルに保ち、すべてのピクセルを記述しないでください。大規模な図表の場合、短い説明を提供し、下に長いノートやガイドへのリンクを配置します。

2つの実践的な例がこの技法を説明します: 「白い枠のペインに止まる鳥、砂漠の風景の上に」と「ExcelからのチャートはQ2売上が14%上昇を示す。」画像にテキストが含まれる場合、正確な言葉を引用符で囲んで含めます（話されたテキストの周りに引用符を置くことで意図を明確にします）。装飾的なアイコンやボタンの場合、「検索アイコン」や「ワード文書アイコン」などの短いラベルを使用してナビゲーションをスムーズに保ちます。

作成者への注意: 多様なビジュアルセットで練習し、一貫したスタイルを保ってください。このガイドは情報提供的な記述をサポートし、スクリーンリーダーに依存する視聴者を助け、ウェブサイト、ブログ、または製品ページなどのプロジェクトに明確な基準を提供します。実世界の例を使用し、ピアとレビューし、変更を追跡し資産全体で安定した特徴を反映するためのシンプルなExcelシートを作成してください。

HTMLでは、altテキストはimg要素のalt属性に表示されます。自動altテキストは役立ちますが、コンテキストが重要なので正確性をレビューしてください。画像が装飾的な場合、支援技術が意味のあるコンテンツに集中できるようにaltテキストを省略します。複雑なビジュアル、チャート、または図表をカバーするために必要な場合、altテキストをリンクされたページの長い説明と組み合わせます。

Altテキストを追加するタイミング: 範囲、トリガー、実践的なガイドライン

公開時またはコンテンツ更新時に、意味のあるすべての画像に簡潔なaltテキストを追加します。これにより、支援技術に依存するユーザーを助け、サイトのSEOを改善し、記事内での画像の役割を説明します。

範囲: 情報を伝える画像には、物体、図表、アイコン、チャートが含まれます。ヘッダーや枠内の止まる要素、例えばオレンジのバッジは、記事に追加する役割を説明したaltテキストが必要です。一部の画像はテキストと組み合わせた場合にのみ意味を持ちますので、altテキストが必要なものとそうでないものを知ってください。

トリガー: 新しい画像を書くとき、メディアを置き換えるとき、またはサイト間で資産を再利用するときにaltテキストを追加または更新します。特に図表とチャートの場合、altテキストが表示されている内容に一致することを確認し、周囲のコンテンツの流れに整合することを確保します。

実践的なガイドライン: altテキストを簡潔に保ちます。基本的な物体の場合、1-2つの短いフレーズで機能や目的を記述します。図表の場合、機能と主な流れを説明します。チャートの場合、トレンドや主要な値を要約します。目に見えるテキストを含む画像の場合、alt記述にそのテキストを表示します。汎用的な記述では不十分な場合があります–その場合、意味を捉えた具体的なaltを提供します。不明瞭な装飾画像やビジュアルの場合、空のaltまたは情報役割を反映した簡単なノートを使用します。

レビューとコラボレーション: 作成者はエディターとデザイナーに確認し、実際のユーザーでaltテキストをテストし、デバイス間で意味が保持されることを検証します。記事のカバレッジを確認し、アクセシビリティを強く保つための基本的なチェックリストを使用します。

Altテキストの定義: 記述するものと除外するもの

画像の目的を伝える1つの簡潔な文で画像を記述し、次に主な主語とコンテキストをカバーした情報提供的な説明を追加します。誰または何が登場するのか、動作、設定を含めて、ユーザーが表示されているすべてを理解できるようにします。

• 記述するもの
  • 主語と動作: 人、動物（例: 枝に止まるシジュウカラ）、またはブランド、製品、ツールなどの物体を特定します。
  • 画像内のテキスト: 引用や短いフレーズを表示されたまま正確に書き起こし、数字や日付を含めます。
  • コンテキストと目的: このエントリで画像が存在する理由と、周囲のコンテンツについて何を伝えるかを説明します。
  • ブランドとスタイリング: 意味を明確にする場合、ブランド名と視覚スタイルやアイコンを記します。
  • グラフィックコンテンツ: グラフやチャートの場合、トレンド、ラベル、軸、主要なデータポイントを要約します。
  • 製品とオファー: 製品、モデル、色、および目に見えるオファーや割引を記述します。
  • 色、レイアウト、構成: 理解に影響する場合、支配的な色と目に見えるレイアウトの手がかりを言及します。
  • 場所とタイミング: 関連する場合、シーンがどこでいつ起こるかをを含めます。
  • 長さとトーン: 情報提供的で中立的になり、ユーザーの期待に合った言語を選択します。
  • 流れと読みやすさ: スクリーンリーダーが自然に追従できるように記述を構造化し、断片的フレーズを避けます。
• 除外するもの
  • 装飾のみの画像: 情報提供的なコンテンツを提供しない場合、空のalt属性（空）を使用するか、装飾としてマークします。
  • 冗長な詳細: 理解を助けない華美または冗長な言語をスキップします。
  • 非情報提供的なビジュアル: 解釈を変えない限り、背景ノイズや無関係な雰囲気を記述しないでください。
  • 無関係なコンテキスト: 画像に表示されない周辺トピックを除外します。
  • 重複記述: 周囲のテキストで既に伝達された情報を繰り返さないでください。
• 実践的なガイドライン
  • ガイドライン: WCAGに準拠した慣行に従い、アクセシビリティとSEOの目標に対してレビューします。
  • 長さ: 標準画像の場合、125–160文字程度を目指します。複雑な図表や流れの重いシーンの場合、長い記述が必要になることがあります。
  • 用語の選択: ブランドボイスと消費者期待に合った言語を選択し、表示されている場合に製品名とオファーを含めます。
  • 一貫性: エントリ全体で安定したスタイルを保ち、適切な場所でブランド、製品、色などの関連詳細をタグ付けします。
  • レビュー: 必須のすべてを説明しつつ余分を避けるために、迅速なレビューでaltテキストをテストします。
• 例とアプローチ
  • エントリー例: 「夕暮れ時の松の枝に止まるシジュウカラ；柔らかい青空と松の針；給餌器に目に見えるブランドステッカー。」
  • グラフ例: 「Q3までの月次売上を示す折れ線グラフ、軸はRevenue (USD)とMonthでラベル付け、製品カテゴリごとに色分け。」
  • 引用例: 「画像は赤いバッジに'Limited time offer'の引用を示す；ユーザー動作をガイドする場合、正確な文言を含めます。
  • 記述アプローチ: 視力のあるユーザーが気づくすべてを説明し、周囲のガイドやレビューノートで検証します。
• 実践的に保つ
  • エントリーと記述の整合: 各画像エントリは、表示コンテンツと目的に一致した記述的なaltテキストを持つべきです。
  • 流れと簡潔さ: スムーズに読める文を作成し、散漫を避け、記述を情報提供的に保ちます。
  • 長形式の場合: 複雑なビジュアルの場合、関係と結果を説明した長い記述を提供し、簡潔なalt文で要約します。
• クイックチェックリスト
  • 画像の目的を説明していますか？ はい/いいえ
  • すべての必須要素（引用やオファー含む）が記述されていますか？ はい/いいえ
  • 装飾コンテンツは空にマークされていますか？ はい/いいえ
  • トーンは中立的で情報提供的なですか？ はい/いいえ

スクリーンリーダーのためのビジュアルコンテンツ記述: 具体的なフレーズパターン

物体とその動作から始め、次に簡潔な行でコンテキストを追加します。これにより、リーダーはシーンを一目で理解でき、グラフやチャートのような複雑なコンテンツでも読みのテンポを安定させます。

コンテンツタイプ別にパターンを選択します: チャートとグラフ、画像、コントロール、データテーブル、装飾要素。チャートの場合、指標、時間枠、トレンドを名付けます。画像の場合、主語と背景や詳細を特定します。UIコントロールの場合、ラベルと動作を述べます。リーダーがスキャンできるフレーズを使用し、意味を曖昧にする長い段落を避けます。

SharePointとブランド資産内で、一貫性を保つために小さな具体的なパターンのセットを再利用します。アクセシブルコンテンツの著名な擁護者であるAndréeは、これらのフレーズが短く正確なキャプションと組み合わせて迅速な読みと簡単な検索をサポートする方法を示しています。キャプションを読みやすく、冗長にせず、レビュープロセスでaltテキストを洗練する際に明確性を編集します。

パターン	例	ノート
グラフ/チャート: 物体 + 指標 + 期間 + トレンド	グラフはQ2期間中に売上が1,000から1,500ユニットに上昇することを示す	チャート、指標、必要に応じて数千単位の範囲を名付けます。フィラーを避けます。
画像/イラスト: 主語 + 背景 + 詳細	製品写真は白い背景にブランドとパッケージング詳細を示す	主語とコンテキストに焦点；背景は配置を明確に；主要な詳細のみ言及。
UIコントロール: ラベル + 動作	「Edit」をクリックしてアイテムフィールドを開く	実際のラベルを使用；対象フィールドを強調；実践的に保つ。
データテーブル: フィールド + 値 + 期間	テーブルはフィールドをリスト: Sales, Region, Period；値は千単位の合計を示す	表形式データを線形文に変換；関連する場合期間を含めます。
装飾/スペーサー: 装飾要素 + altステータス	装飾スペーサー線: altテキストは空	要素がレイアウトを追加するがコンテンツでない場合、空を使用；意味を伝えないビジュアルを記述しない。
ナラティブキャプション: ケース + 読み + 検索	このケースでは、リーダーは読み中に要約をスキャンでき、検索を使用して主要用語を位置づけます	要約のクイックアンカーを提供し、用語ベースの検索を許可。
人物: 名前 + 役割 + 動作	Andréeはデータの正確性を確認するためにチャートをレビューする	適切な名前と役割を使用してリーダーを方向づけ；名前を適切に大文字化。

SEOの考慮事項: キーワードの詰め込みなしのバランス

推奨: まず明確さに焦点を当て、画像を正確に反映した1つの主要キーワードを含め、ユーザーの意味を改善する場合にのみサポート用語を追加します。このガイドは、ライターがaltテキストでSEOとアクセシビリティをバランスさせる実践的なガイドラインを提供します。

実践では、各altテキストはリーダーが期待する場所で機能し、理解に寄与し、スペースを埋めるものではありません。よく作られたaltテキストは、障害を持つユーザーと検索エンジンの両方を助け、記事内での画像の役割の意味のある要約を提供します。

複雑な図表の場合altテキストは長くなる可能性がありますが、コアの意味を保持し、フィラーを避けます。

• 主要キーワードのガイドライン: 単一の関連キーワードを決定し、画像コンテンツが許す場合にaltテキストの先頭に配置します。
• 自然言語: ユーザーが言うかもしれない文または簡潔なフレーズとしてaltテキストを書きます。この執筆スタイルは障害を持つユーザーの読みやすさを改善し、検索エンジンがコンテキストを解釈するのを助けます。
• 単語制限: 125文字以内にします。これによりキーワードの詰め込みを防ぎ、テキストを読みやすく保ちつつ検索意図をサポートします。
• コンテキスト認識の選択: セクションと状況を考慮します。図表の場合、データや流れを記述；写真の場合、主語と動作を特定；アイコンの場合、動作や意味を説明。
• リンクとクリックの示唆: 画像がリンクの場合、目的地とクリック時の動作を記述してユーザーが進むかを決定できるようにします。
• 装飾画像: 情報提供しないビジュアルに空のalt属性（alt=""）を使用；これによりスクリーンリーダーの無意味なノイズを最小限にします。
• チェックリストアプローチ: 各altテキストをワークフローのチェックボックス駆動プロセスとして扱います。これによりチームが承認と変更追跡を助けます。
• テストとフィードバック: スクリーンリーダーでテストし、開発者とユーザーからの入力収集し、理解を改善する変更を承認します。
• 意図は何か: 常に周囲コンテンツ内での画像の意図を尋ね、altテキストがその目標を冗長なしに反映することを確保します。
• 単語選択と余白: フィラーより正確な用語を優先；落ち着いたリズムを保ち、テキスト周りの十分な余白を使用してスキャンを助けます。

ライターのための簡潔なリファレンスとしてここに：コンテンツコンテキストにaltテキストを合わせ、このガイドを使用して記事のアクセシビリティとSEOのバランスを改善します。

チェックリストを見るにはここをクリックしてください。

要約: このアプローチは記事の読みやすさを改善し、障害を持つユーザーをサポートし、altテキストとページ関連性のリンクを保ち、パフォーマンスを犠牲にしません。

異なる画像タイプのためのAltテキスト: 写真、図表、ロゴ、インフォグラフィック

フレーム内の誰または何がおり、ページ上でなぜ重要かを記述した簡潔で主語中心のaltテキストで写真をラベル付けします。支援技術ユーザーのために書き、周囲のコピーと記述を合わせることでリーダーが画像の目的を知るようにします。

写真: 主な主語から始め、設定と動作のようなコンテキストを追加します。長さをタイトに保ち、90–120文字を目指します。ノイズメーカーや他のオーディオキューが登場する場合、括弧で記します。画像にスピーチが含まれる場合、短い引用スニペットを引用符で含めます。例: 「教師が生徒が聞く中、ホワイトボードに書く。」このアプローチはユーザーが全体の瞬間を知り、検索とナビゲーションをサポートします。シーンを明確に記述することでページ間のラベル一貫性を助けます。

図表: すべてのラベルではなく、図表の目的と情報の流れを記述します。目標、主要ステップ、およびそれらのつながりを述べます。軸やカテゴリが登場する場合、簡単に言及（例: 「x軸: 時間；y軸: 収益」）。画像からの長いテキストを複製しないでください。例: 「入力から出力へのプロセスフロー、4つのステップ: 入力、分析、決定、行動。」図表の場合、関係と結果に焦点を当てます。

ロゴ: ブランドを特定し、意味がある場合ロゴの象徴性を記述します。「BrandNameロゴ」または「BrandNameワードマーク」を優先します。ロゴが装飾的な場合、alt属性を空にし、ペインがユーザーに装飾を発表できるようにします。ページ間で一貫したパターンを使用し、ユーザーが期待することを知り、検索結果でブランドを表面化できるようにします。

インフォグラフィック: 主な発見の簡潔な要約を提供し、主要数字を平易な言語で述べます。グラフィックからの長いテキストを複製せず、必要な数字をaltテキストに引き出します。引用が影響を伝える場合、引用符で含めます。例: 「採用の42%増加。」UIペインでは、チェックボックスで短いaltテキストと長いバージョンを切り替えられるため、異なるニーズのマインドとユーザーが必要なものを得ます。さまざまな状況で、このアプローチはリーダーの興味を高く保ち、全ユーザーのアクセシビリティを確保します。クイックaltテキストは必須数字と簡単な takeaways を含みます。