読み上げ専用テキスト
3つの「もっと読む」に、見た目には出ない「：〜について」を sr-only で足す。切替で隠し文を可視化し、支援技術のリンク一覧でどう区別されるかを帯に表示。
プレビュー
クリック
操作クリック／タップで動きます。
仕様書
- 向く場面
- 「もっと読む」が並ぶお知らせ一覧
- 見える文言は短く、リンク名に文脈を足したい場面
- 支援技術のリンク一覧で区別させたいリンク
- 避ける場面
- display:none や visibility:hidden で隠す
- 隠し文をリンクの外に置く
- 見た目のためにリンク文言を長くする
- 構成要素
- お知らせの項目
- もっと読むリンク
- 読み上げ専用テキスト
- 可視化トグル
- リンク一覧の帯
- 持っている状態
- 通常
- フォーカス
- キーボード
Tab で切替ボタンと 3 つのリンクへ、Enter で有効化。切替でも Tab 順は変わらない
- 支援技術
WCAG 2.4.4。sr-only（1px にクリップ）でリンク名に「：〜について」を足し、リンク一覧で区別できる。display:none にしない
- 動き
なし
デザインの要点
- 読み上げ利用者はリンクだけを一覧で拾って移動する。「もっと読む」が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>