代替テキストヘルパーとは？

画像の種類を選び、タイプ別のガイドに沿ってaltテキストを書き、アクセシビリティチェックリストで確認できます。スクリーンリーダー対応の説明文を書くためのヒントと例付き。

6種類の画像タイプ(写真、アイコン、グラフ、装飾、情報、リンク画像)から1つ選ぶと、フィールドのガイドがそのタイプ向けに切り替わり、スクリーンリーダー利用者が本当に必要とする情報へ誘導します。文字数カウンタは 125 文字を超えると警告し、6項目のチェックリストで「具体的・簡潔・文脈考慮・『image of』のような枕詞を避けている・最重要情報を先頭に置いている・カンマの羅列や同語反復になっていない」かを確認できます。装飾画像には alt="" を使うリマインダーが出るので、支援技術はそのまま読み飛ばします。

使い方

1. 説明する画像のタイプを選択：写真、アイコン、グラフ、装飾画像、情報画像、リンク画像のいずれか。
2. 画像タイプに合ったガイドを参考に、簡潔な説明を書きましょう。
3. アクセシビリティチェックリストでaltテキストを確認し、HTMLやCMSで使用するためにコピーします。

使用するタイミング

• Shopify や WordPress の商品ギャラリーを公開する前に alt 属性を埋める。
• 四半期レポートのグラフに alt を付け、スクリーンリーダー利用者にも数字を届ける。
• アクセシビリティ監査の前に WCAG 1.1.1 への適合を既存サイトで点検する。

結果

Q1売上を示す棒グラフの場合：「chart.png」ではなく、「2024年第1四半期の地域別売上を示す棒グラフ：北米210万ドル、欧州180万ドル、アジア140万ドル」と記述します。

よくある質問

なぜ alt テキストはアクセシビリティで最重要属性とされるのですか?

WCAG の最初の項目(1.1.1 非テキストコンテンツ、Level A)に該当し、全盲のスクリーンリーダー利用者がすべてのページで真っ先にぶつかる要件だからです。欠落するとアクセシビリティだけでなく、検索エンジンやリンクプレビューのクローラの説明にも影響します。

alt テキストはどのくらい短くすべき?125 文字は厳格な上限ですか?

技術的には上限ではありません。ブラウザもスクリーンリーダーも長い文字列を扱えます。125 文字の目安は古い JAWS が長文を中途半端に切っていたことに由来します。今は改善されていますが、短い方が聞いていて疲れにくいのは事実です。

区切り線や背景装飾のような純粋な装飾画像はどうすればいいですか?

alt=""(空文字)を指定してください。属性そのものを書かないのは NG です。空 alt はスクリーンリーダーに「この画像はスキップしてよい」と伝えます。alt を省くと、ファイル名を読み上げるスクリーンリーダーもあり、無音より悪い結果になります。

複雑なグラフを 125 文字で説明するにはどうすれば?

個々のデータではなく、グラフの種類とキーになる発見を先に書きます。「折れ線グラフ。2024 Q3 にモバイルがデスクトップを上回った」のような形で、月次の値は同じページ内の長文説明に逃がします。

「画像:」「写真:」のような枕詞は最初に付けるべき?

付けません。スクリーンリーダーは既に「画像」と読み上げるので、「画像:猫」では「画像、画像:猫」と二重になります。「青いソファの上の灰色の猫」のように主語から始めてください。本ツールのチェックリストもこのパターンを自動で警告します。

関連ツール