リンクテキストが空、または「詳しくはこちら」だけのリンク

バナーのリンクは中身が空なので、支援技術が読み上げる言葉がありません。カードの「詳しくはこちら」は、上の見出しと合わせて読んだときにだけ意味が通じます。リンク一覧では、その見出しは読まれません。

言葉を補う方法では、レイアウトは変わりません。バナーのリンクは「秋のブレンドが入荷しました、リンク」、カードのリンクは「詳しくはこちら：ほうじ茶のおいしい淹れ方、リンク」と読み上げられます。カードのリンクの名前は表示テキストで始まるため、音声操作でもその言葉で呼べます。バナーのリンクは、隠したテキストの代わりに、h2 に付けた id を aria-labelledby で参照して見出しから名前を取ることもできます。こうすると、見出しとリンクの名前がずれません。どちらの場合も、バナーを上から順に読むと、リンクと見出しで同じ言葉が2回読まれます。

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

広げたリンクが他の操作要素を覆う。 カード内に「保存」ボタンやタグのリンクなどがある場合は、position: relative と疑似要素より上の z-index を指定しないと押せません。カード内のテキストも選択できなくなります。操作要素が多いカードでは、見出しと画像だけをクリックできるようにすることも検討します。

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

隠したテキストと aria-label。 display: none はアクセシブルな名前からも文字を消すため、clip を使った .visually-hidden クラスを使います。aria-label はリンクの中身を置き換え、ブラウザーの翻訳機能で訳されないことがあり、表示テキストとずれやすいため、隠したテキストを優先します。使う場合は、表示テキストで始めてください。

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

編集できるコンテンツ。 テーマやCMSでは、バナーの見出しが任意項目のことがよくあります。空欄のままだと、広げたリンクはまた名前を失います。リンクを設定したらラベルを必須にするか、ラベルが空のときはリンクを出力しないようにします。「今すぐ購入」が並ぶ複数のバナーも、「詳しくはこちら」と同じ問題です。

厳密には文脈で足りる場合もある。 WCAG 2.4.4 は、リンクテキストを、同じ文、リスト項目、表のセルなど、プログラムで判別できる文脈と合わせて読むことを認めています。整った構造のカード内の「詳しくはこちら」は適合する場合もありますが、リンク一覧では分かりにくいままです。レベルAAAの2.4.9は、リンク単体で意味が分かることを求めています。空のリンクは、どの場合でも不適合です。