どれも同じ「続きを読む」のリンク

タイトルは見出しのように見えても段落で、リンクはどちらの段落にも入っていません。そのため、コード上「続きを読む」とその記事を結び付けるものがありません。2.4.4を満たさず、どのカードのリンクもリンク一覧では同じ項目になります。

最も小さな変更で、デザインは描いたとおりに残ります。リンクの名前は「続きを読む：ホーローマグのお手入れ」になります。リンク一覧でもリンク先が分かるため2.4.4と2.4.9を満たし（達成方法C7）、画面の言葉で始まるため2.5.3も満たします。「続きを読むをクリック」は3枚のカードすべてに一致し、同じラベルが並ぶときと同じように、Dragonなどの音声操作が番号を振って選ばせます。リンク自身の id を先に、タイトルの id を後に並べた aria-labelledby="more-enamel title-enamel" でも、span なしで近い名前「続きを読む ホーローマグのお手入れ」になります。代わりにカードごとに id が2つ要ります。

3つとも2.4.4と2.5.3を満たし、2.4.9が求めるとおり、リンクだけで意味が分かるようになります。隠した言葉は画面を何も変えないため、「続きを読む」を残すデザインや、追加しかできないテーマに向いています。ただし「続きを読むをクリック」はすべてのカードに一致し、Appleの音声コントロールは名前全体が必要だと報告されているため、MacやiPhoneでは番号に頼ることになるかもしれません。タイトルをリンクにする方法は最も整ったマークアップで、カードごとに一つのリンクが、誰もが見る言葉で名付けられます。タイトルだけで内容が十分伝わるカードに向いていますが、広げたクリック範囲にはカード内の他の操作要素への配慮が要ります。見える言葉にする方法は、カードごとに行動を促す言葉を置きたいデザインに向き、カードごとに書き手が必要です。どのサイトにも当てはまる一つの正解はないため、デザインで何を残したいかで選びます。

aria-labelではなく隠したテキスト。 aria-label を使う場合は、「続きを読む：ホーローマグのお手入れ」のように表示の言葉で始めます。それでも隠したテキストの方が適しています。隠したテキストはページと一緒に翻訳されますが、aria-label はブラウザーの翻訳機能によっては元の言語のまま残り、食い違いが戻ります。隠すときは clip を使った .visually-hidden クラスを使い、名前からも言葉を消してしまう display: none は使いません。

aria-describedbyではリンク一覧は直らない。 aria-describedby でタイトルを指すと、タイトルは説明として「続きを読む、リンク」の後に読まれます。W3Cの失敗例のテストもSection 508のテストも説明を数に入れるため、リンクは2.4.4を満たす可能性が高いですが、スクリーンリーダーのリンク一覧は名前しか表示せず、「続きを読む」が3回続いたままです。

見出しリンクの横に隠した「続きを読む」。 よくある形に、見える「続きを読む」を残したまま、あらゆるものから外すものがあります。aria-hidden="true" でスクリーンリーダーに読ませず、tabindex="-1" でTabでも飛ばし、本当のリンクはタイトルにします。スクリーンリーダーにはカードごとに一つのリンクしか聞こえませんが、きれいな修正ではありません。見えている言葉どおり「続きを読むをクリック」と話した音声操作の利用者には何も起きません。アクセシビリティツリーをもとに動く音声認識ソフトは、隠したリンクを見つけられないからです。目の見えるキーボード利用者には、Tabで決して届かないリンクが見えます。隠すなら全員から隠し、隠さないなら誰からも隠さないようにします。言葉を残したいなら、隠した言葉の修正のように、その言葉をリンクの名前に入れます。

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

カードのタイトルはたいてい見出し。 周りの文字より大きく太く描いたタイトルは見出しとして読まれ、スクリーンリーダー利用者は見出しで移動します。タイトルをリンクにする修正のように、ページに合った階層の見出しにすると、どの修正を選んでも役立ちます。大きさで選ばれ、構造と合わない見出しを参照してください。

汎用的なラベルはどれも同じ問題。 カードに繰り返す「詳しくはこちら」「今すぐ購入」「詳細」「こちら」「見る」も、同じように問題になり、同じ方法で直せます。CMSやデザインシステムでは、カードのコンポーネントにリンクの言葉、または「続きを読む」の後ろに隠す言葉の入力欄を設け、編集者が空欄のままにしたときは記事のタイトルを入れるようにします。そうすれば、むき出しの「続きを読む」のまま新しいカードが公開されることはありません。

その場で文章を開く「続きを読む」はボタン。 別のページへ移らず、同じページでレビューや説明の残りを表示する「続きを読む」は button です。href="#" のリンクにはせず、aria-expanded で開いているかどうかを伝えます。1ページに複数あるときは、同じように項目ごとに名前を付けます。ボタンそのものは開いているか伝わらない表示・非表示ボタンで扱っています。