名前のないバナーや画像のリンク

リンクの中身は alt="" の画像だけなので名前がなく、2.4.4を満たしません。リンク先を示すピルは、リンクの一部ではなく、リンクの上に描かれた絵にすぎません。

言葉を補う方法では、レイアウトは変わりません。バナーのリンクは「ローストを見る、リンク」と読み上げられ、ピルの言葉を話せば音声操作でも見つかります。二つ目の作りのバナーでは、同じ span を重ねた空のリンクに入れるだけで、ほかは変わりません。写真がリンクの唯一の中身なら、alt="ローストを見る" のように、写真の alt に言葉を入れることもできます（達成方法H30）。この alt は写真の内容ではなく、リンク先を表します。名前に見出しではなくピルの言葉を使うのは、押すものとして読まれるのがピルだからです。WCAG 2.5.3「ラベルを含む名前」は、操作要素の名前に、画面上でそのラベルになっている言葉が含まれることを求めています。見えている言葉を話して操作できるようにするためです。隠したテキストの代わりに、ピルに付けた id、またはピルと見出しの id を aria-labelledby で参照して名前を取ることもできます（達成方法ARIA7）。こうすると、言葉がずれません。どちらの場合も、バナーを上から順に読むと、リンクとテキストでピルの言葉が2回読まれます。

どちらの方法でもバナーのリンクに名前が付き、2.4.4を満たします。言葉を補う方法は変更が小さく、レイアウトを変えずに済むため、構造を変えられないテーマや外部のスライドショーに向いています。ピルをリンクにする方法は、リンクが一つで読み上げも一度、名前はピルに見えている言葉そのものになるため、より整った形です。テンプレートを変更できる場合はこちらを選びます。自社のバナーはピルをリンクにし、変更できないスライドショーは重ねたリンクに名前を付ける、というように組み合わせても構いません。

広げたリンクが他の操作要素を覆う。 バナー内に2つ目の行動を促すボタンやスライドショーの一時停止ボタンなどがある場合は、position: relative と疑似要素より上の z-index を指定しないと押せません。バナー内のテキストも選択できなくなります。

バナー全体を一つの <a> で囲む。 HTMLとしては正しく、バナー全体を押せますが、バナー内のすべての文字がリンクの名前になり、見出し、説明文、ピルが一つの長いリンクとして読み上げられます。中に別のリンクやボタンも置けません。ピルをリンクにすれば、どちらの問題も避けられます。

隠したテキストと aria-label。 display: none はアクセシブルな名前からも文字を消すため、clip を使った .visually-hidden クラスを使います。空のリンクに aria-label を付けても名前は付きますが、ブラウザーの翻訳機能で訳されないことがあり、ピルの言葉とずれやすいため、隠したテキストか aria-labelledby を優先します。

写真の上の文字。 文字が写真の上にあるため、コントラストを確保するには、文字の下に、文字の後ろで最も濃くなる暗い幕が必要です。バナーがとるすべての幅で、どの文字の後ろでも写真の最も明るい部分と比べて確認します。

画像とアイコンのリンク。 画像だけのリンクでは、alt に画像の説明ではなくリンク先（「Northside Roasters ホーム」「Instagram」）を書きます。同じリンク内にテキストもある画像は alt="" にし、名前が二重に読まれないようにします。SVGアイコンは aria-hidden="true" で隠し、リンクに視覚的に隠したテキストを入れます。

編集できるコンテンツ。 テーマやCMSでは、バナーのピルの文字が任意項目のことがよくあります。空欄のままだと、広げたリンクはまた名前を失います。リンクを設定したらラベルを必須にするか、ラベルが空のときはリンクを出力しないようにします。