ファイル名や同じ言葉が読まれる装飾画像

区切り線には alt がないため、ファイル名が読まれます。写真の alt は同じリンクの中の見出しを繰り返し、tabindex によって何もしないTabの移動先が増えています。

区切り線と写真を alt="" にし、tabindex を取り除きます。空の alt は、画像が装飾であることを示すHTML自身の書き方です。スクリーンリーダーは画像を飛ばし、読み込みに失敗してもブラウザーは何も表示しません。リンクは「リンク、マグカップの釉薬がけ、11月14日（土）10:00」と一度だけ読まれ、Tabの移動先も一つになります。この写真はカードのテキスト以上のことを示していないため、alt を空にします。テキストにない内容を示す写真には、その部分の alt を書きます（「実装の判断」を参照）。

どちらの方法でも装飾は読まれず、カードは一度だけ読まれます。まずは空の alt を使います。属性一つで済み、テーマの区切り線からCMSで選ぶ写真まで、どんな画像にも使え、HTMLが装飾のために定めている方法だからです。CSSで描く方法はスタイルシートの変更が必要で、テーマで固定された画像にしか向きませんが、alt なしで区切り線を戻してしまうことがなくなります。強制カラーモードでは背景画像が表示されません。装飾なら問題ありませんが、意味のあるものにCSSを使ってはいけない理由になります。

テキストの隣の画像は場合ごとに判断する。 取り除いても読む人に必要なものが何も失われない場合だけ、その画像は装飾です。同じ画像でも、場所によって読まれなくてよいこともあれば、alt が必要なこともあります。alt に隣のテキストを繰り返さないことは共通で、変わるのは画像が独自の内容を加えているかどうかです。よくある場合は次のとおりです。

• タイトルとリンクがすべてを伝えているカードの、雰囲気を伝える写真や素材写真（「マグカップの釉薬がけ」のカードの棚のマグカップなど）：alt=""。
• 同じリンク先を指す画像とテキストが同じリンクの中にある場合：リンクを一つにまとめ、画像は alt=""、テキストをリンクの名前にする（WCAG達成方法 H2）。
• 色、柄、状態など、テキストにない内容を示す商品写真：その内容だけを alt に書く（「クリーム色の釉薬、縁は茶色」）。商品名は繰り返さない。
• 同じことを書いたラベルの隣のアイコン（「食洗機可」の隣の食洗機のアイコンなど）：alt=""。
• リンクやボタンの唯一の中身になっている画像：空にしない。alt がリンクやボタンの名前になる。
• 隣のテキストが一部しか要約していないグラフ、地図、図：情報を伝える画像なので、代替テキストが必要（情報を伝える画像のガイドを参照）。

迷ったら、画像を除いてカードを読み上げ、足りないものがないかを確かめます。

alt は省かずに空にする。 alt="" と alt がないことは、反対の意味になります。alt=" "、alt="区切り線"、alt="スペーサー"、alt="装飾" はどれも読み上げられるため、修正になりません。

aria-hidden と role="presentation"。 どちらも画像をスクリーンリーダーから隠し、alt のないインラインSVGでは役に立ちます。<img> では alt="" がARIAなしで同じことをします。aria-hidden だけで alt のない画像は自動チェックで検出され、読み込みに失敗すると壊れた画像のアイコンが表示されます。

画像だけのリンク。 リンクの中身が画像だけなら、その画像を読まれなくすることはできません。alt がリンクの名前になるため、リンク先（「マグカップの釉薬がけのワークショップ」）を書くか、見えるテキストを足してから画像を読まれなくします。

フォーカス。 読まれない画像から tabindex を取り除き、拡大やライトボックスの効果など、それを付けるスクリプトも確認します。画像で何かを操作させるなら、名前のある実際のボタンで囲みます。

Section 508の試験での確認方法。 Trusted Testerの装飾画像の試験（7.B）では、次の三つがすべて満たされる場合だけ合格になります。

• ページ上で、重要な情報を伝える唯一の手段になっていない。
• Tabの移動順序に入っていない。
• アクセシブルな名前が空になっている（属性がないのではない）。

区切り線は三つ目を、カードの写真の tabindex は二つ目を満たしません。名前が空でない画像にはこの試験は適用されないため、タイトルを繰り返す alt の写真は、意味のある画像の試験（7.A）で判断されます。それでも、上で述べた理由から修正します。背景画像も7.Bの対象外で、別に試験されます。

CMSとコンポーネントライブラリ。 画像の項目に「装飾」のチェックボックスを用意して alt="" を出力させます。項目を空のままにして、テーマがファイル名を代わりに出力しないようにします。タイトルと画像の両方を受け取るカードのコンポーネントでは、タイトルを画像の alt に写さないようにし、写真が加える内容を編集者が書くか、装飾として指定できるようにします。