「こちら」と書かないリンク

「詳しくはこちら」「ここをクリック」——ありふれた書き方ですが、読み上げソフトには大問題です。多くの利用者はページ内のリンクだけを一覧で拾い読みします。すると聞こえてくるのは「こちら、こちら、こちら……」。どれがどこへ行くのか、まったく分かりません。

直し方は「行き先を文字にする」だけ

<!-- ❌ 前後を読まないと分からない -->
<p>しまちゃんの作品は<a href="/works">こちら</a>から見られます。</p>

<!-- ○ リンクだけで分かる -->
<p><a href="/works">しまちゃんの作品いちらん</a>はこちらから見られます。</p>

リンクにする範囲を「こちら」から「しまちゃんの作品いちらん」へずらしただけ。これで拾い読みでも行き先が伝わります。ついでに、視力に関係なく全員が探しやすくなる——太字のリンクを流し読みして目的地を見つけるのは、みんなやることだからです。

拾い読みを体験してみよう

読み上げソフトの利用者に、このページがどう聞こえるか。リンクの一覧を並べて再現してみます。

ボタンの文言は「動詞」にする

ボタンも同じ考え方です。押したら何が起きるのか、ボタンの文字だけで分かるようにします。

とくに「削除しますか？」→「OK／キャンセル」のような場面は、「削除する／キャンセル」にすると押しまちがいも減ります。

文字のないボタンにはaria-label

「×」だけの閉じるボタン、虫めがねアイコンだけの検索ボタン——文字がないボタンは、読み上げでは「ボタン」としか聞こえません。そんなときはaria-labelで音声用の名前をつけます。

<button aria-label="メニューを閉じる">×</button>

見た目は「×」のまま、読み上げには「メニューを閉じる、ボタン」と聞こえます。aria-labelは画面には表示されない、読み上げ専用の名札です。

このレッスンのまとめ

1. リンクはその文字だけで行き先が分かるように（「こちら」をやめる）
2. ボタンは押したら何が起きるかを動詞で書く
3. 文字のないアイコンボタンにはaria-labelで読み上げ用の名前をつける

これでアクセシビリティのコースはおしまいです。alt・コントラスト・フォーカス・ラベル・文言——どれも今日のコードから使える小さなくふうばかり。「だれでも使える」は、この積み重ねでできています。