TL;DR: Altテキストに普遍的な125文字ルールはありません。文脈内で画像の役割を置き換えるために必要な長さを保ち、可能な限り短くします。単純な情報画像は一文で十分な場合があります。機能画像は動作を説明します。装飾画像は通常空のaltを使います。複雑なグラフは短いラベルと近くの詳細説明が必要です。
Altテキストの長さは一つの数字に単純化されがちですが、アクセシビリティはそのように機能しません。10語の説明でも、装飾画像には長すぎ、グラフには短すぎる場合があります。正しい文章は、画像がある理由と、見えない人が失う情報によって決まります。
このガイドでは、情報画像、機能画像、装飾画像、複雑な画像のAltテキストを説明します。キーワード詰め込み、キャプションの重複、目的を伝えず視覚的詳細を並べるなどの一般的な誤りも扱います。目標は有用な代替文章であり、完璧な文字数ではありません。
文脈の中で説明を書き、文字数カウンターで長さを確認します。文字数は過剰な説明を見つけるのに役立ちますが、ページ理解に必要な情報を削除する理由にはなりません。
Altテキストはどのくらいの長さが適切ですか？
画像の役割を伝えるために必要な長さを保ち、可能な限り短くします。単純な情報画像なら簡潔な一文で十分なことがあります。機能アイコンは数語で済む場合があります。複雑なグラフは短い属性と、別の場所にある長い説明が通常必要です。
HTMLやWCAGに普遍的な125文字の上限はありません。この数字は一部のチームや古いツールが使う実用的な推奨であり、長い文章を自動的に非アクセシブルにする規則ではありません。
画像なしでページを読み、何の情報が欠けるかを考えます。その代替だけを書きます。説明が段落になる場合は、詳細を表示される本文に移し、より多くの人が利用できるようにします。
Altテキストは何を説明すべきですか？
この特定の文脈で画像が果たす役割と、追加する情報を説明します。重要でない限り、見えるすべての物を並べません。同じ写真でも、ニュース、商品ページ、個人プロフィールでは異なる文章が必要です。
W3Cは、装飾などの例外を除き、非テキスト内容に同等の目的を持つ文章代替を求めています。画像代替テキストの判断ツリーは、説明、機能ラベル、近くの解説、空のalt属性から適切な方法を選ぶのに役立ちます。
媒体そのものが重要でない限り、「……の画像」「……の写真」から始める必要はありません。スクリーンリーダーと周囲のマークアップは通常、内容が画像であることをすでに示します。
情報画像、機能画像、装飾画像
書く前に画像を分類します。分類によって、内容を説明するか、動作を示すか、空にするかが決まります。
- 情報画像：画像が追加する事実や意味を伝えます。例：「駅入口の横に停められた赤い自転車。」
- 機能画像：動作や移動先を説明します。虫眼鏡ボタンは「虫眼鏡」ではなく「検索」です。
- 装飾画像：情報を追加せず無視すべき場合、HTMLで空のalt属性を使います。
- 文字の画像：重要な語が近くに実際のテキストとしてない場合は含めます。
- ロゴ：組織を示す場合は名称を伝えます。ホームへのリンク内なら「会社名、ホーム」にできます。
キャプションを一字一句繰り返さないでください。重複は意味を追加せず、読み上げを長くします。重複が疑われる場合はテキスト比較ツールで比較します。
グラフや複雑な画像のAltテキストはどう書きますか？
短い属性でグラフと主要メッセージを示し、重要なデータ、関係、手順を近くのテキストで提供します。複雑な情報は一つの長い属性には適しません。表示される説明は、ロービジョンや認知障害のある人にも役立ちます。
折れ線グラフでは、主題と主要な傾向を書きます。「月間サポート依頼は1月の120件から6月の210件に増加。」 正確な月別値が重要なら、データ表や段落を追加します。
図では、ページが依存する順序や関係を説明します。意味が変わらないなら、すべての形、矢印の色、位置を説明しません。読みやすさ分析は必要な手順を削らず、長い表示説明を簡潔にするのに役立ちます。
Altテキストの一般的な誤り
悪いAltテキストは、長すぎる、短すぎるというより、無関係、重複、または人ではなく検索エンジン向けに書かれていることが多いです。
- 「IMG_2048.jpg」のようなファイル名を使う。
- すべての説明を「……の画像」で始める。
- キャプション、見出し、近くの段落を繰り返す。
- 画像が伝えていない商品キーワードを詰め込む。
- 意味を説明せず色や位置だけを書く。
- 装飾画像に読み上げられる説明を付ける。
- 画像がリンクやボタンの唯一のラベルなのに空のaltを使う。
コピーした説明を余分なスペース削除ツールで整え、不要な改行や見えない書式がCMS欄に入らないようにします。
公開前にAltテキストを確認する方法は？
実際のページ文脈で画像を確認します。役割を決め、重複情報を削除し、画像なしでページを試し、代替文章が同じ作業を支えるか確認します。次にHTMLやCMS出力を調べ、属性があり、装飾の場合は正しく空になっているか確認します。
- 画像タイプを特定する：情報、機能、装飾、文字、複雑のどれかを決めます。
- 周囲の内容を読む：すでにある情報を繰り返しません。
- 代替を書く：役割と有用な情報に集中します。
- 長さを確認する：重複または過剰な場合だけ短くします。
- 視覚アクセシビリティを確認する：画像内に文字や重要図形がある場合はコントラストシミュレーターを使います。
- 出力を試す：空のaltが省略ではなく空属性として書かれているか確認します。
自動チェッカーは属性の欠落を見つけられますが、文章が有用かは判断できません。正しい説明は文脈次第なので、人による確認が必要です。
Altテキストの長さは品質判断であり、固定SEO目標ではありません。単純な画像は簡潔な代替、機能画像は明確な動作、装飾画像は無音、複雑な視覚情報は属性外の詳細が必要です。
画像の横で説明を書き、文字数カウンターで不要な長さを探します。ページを理解または利用するのに役立つ言葉はすべて残し、画像の役割に不要な詳細だけを削除してください。