読み上げ専用テキスト
3つの「もっと読む」に、見た目には出ない「：〜について」を sr-only で足す。切替で隠し文を可視化し、支援技術のリンク一覧でどう区別されるかを帯に表示。
プレビュー
クリック
操作クリック／タップで動きます。
デザインの要点
- 読み上げ利用者はリンクだけを一覧で拾って移動する。「もっと読む」が3つ並ぶと、どれがどれか区別できない
- sr-only は display:none や visibility:hidden ではなく、1px に切り詰めて画面外に置く。消すと読み上げからも消える
- 見える文言は短いまま、隠し文で文脈を足す。見た目のためにリンク名を長くしなくてよい
- 隠し文はリンクの中に入れる。外に置くと、リンク名として拾われない
コード（コピーして使えます）
<div class="src-wrap">
<div class="src-head">
<span class="src-title">お知らせ</span>
<button type="button" id="src-toggle" aria-pressed="false" class="src-tg">隠し文を表示</button>
</div>
<ul class="src-list" id="src-list">
<li>
<h3>夏季休業のご案内</h3>
<p>8/13〜8/16 は出荷を停止します。</p>
<a href="#src-1">もっと読む<span class="src-sr">：夏季休業のご案内について</span></a>
</li>
<li>
<h3>新プラン「チーム」提供開始</h3>
<p>5 名まで ¥4,980/月で使えます。</p>
<a href="#src-2">もっと読む<span class="src-sr">：新プラン「チーム」について</span></a>
</li>
<li>
<h3>利用規約の改定</h3>
<p>10/1 から適用します。主な変更点は3つ。</p>
<a href="#src-3">もっと読む<span class="src-sr">：利用規約の改定について</span></a>
</li>
</ul>
<div class="src-band">
<div class="src-row"><span class="src-tag">リンク一覧（支援技術）</span><span id="src-links"></span></div>
<div class="src-row"><span class="src-tag">隠し文が無いと</span><span>もっと読む / もっと読む / もっと読む — 区別できない</span></div>
</div>
</div>