line-clampしたときに切り捨てた文章のアクセシビリティについて

3点リーダーなどを実装するときにCSSのline-clampを使うことがあります。この実装で、長い文章を指定した行数で切り捨てることができます。こういった実装をしたときに、切り捨てた文章はスクリーンリーダーとしてどう読まれるのでしょうか？

答えは見た目からは消えますが、アクセシビリティツリーとフォーカス順には残ります。

実は2026年2月のCSSWGの決議では「スクリーンリーダーからも隠す」という方向でした。その後ARIA WGなどから反論があり、「スクリーンリーダーには読ませる」に変わっています。ただし、これはあくまでデフォルトの挙動の話で、「隠したい場合にどうするか」は別の課題として残っています。

仕様の変更点

変更は以下のコミットです。

[css-overflow] Clamped content is only *visually* suppressed · w3c/csswg-drafts@1dafa60 · GitHub

CSS Working Group Editor Drafts. Contribute to w3c/csswg-drafts development by creating an account on GitHub.

GitHub

2026年10月8日のコミットで、本文には「少なくともデフォルトでは、アクセシビリティツリーからもフォーカス可能性からも除かない」と書かれています^[参照1]。

変更前後を整理すると、以下のようになります。

なお、continue: discardのほうは従来どおりdisplay: none的な挙動で、今回の変更の対象外のようです。

なぜそうなったか

議論の場は以下のissueです。

[css-overflow] Line-clamp and screen readers · Issue #12859 · w3c/csswg-drafts · GitHub

What should happen to content clamped by line-clamp in the accessibility tree? Just like content made invisible to sighted users by visibility: hidden, I think that content made invisible to sighted users using line-clamp should also be ...

GitHub

「見えないなら読ませない」から始まり、当事者側の声で「読ませる」に戻った、という流れになったようです^[参照2]。

決め手になった論点は2つあります。

1. clampされる位置はフォントサイズやウィンドウ幅で変わるので、文字を大きくしているロービジョンの人ほど読める量が減ってしまう
2. 全盲の人は自分の画面幅を意識していないので、日によって末尾が読めたり読めなかったりする

見た目の都合で決まる「どこで切るか」が、そのまま支援技術に届く情報量を左右してしまうのは確かにおかしな話です。

一方で、反対側の懸念も消えたわけではありません。例えば500行のうち3行だけを見せる抜粋一覧で全文を出すと、一覧ページが長文の塊になってしまいます。ARIA WGでも、スクリーンリーダー利用者のMatt Kingさんが「どこが見えていてどこが切られているか分からない」という問題を指摘しています^[参照3]。

現時点では、clampされた内容はどのブラウザでも支援技術に全文が渡っています。

つまり今回の仕様変更は今の挙動を追認したもので、開発者から見た動作がすぐに変わるわけではありません。

何を意識するか

line-clampは「見た目を整えるための省略」に使い、「情報を絞るための省略」には使わない、ということになりそうかなと思います。

• カードの見出しや説明文の高さをそろえる
  • line-clampを使用すると良さそうです。全文が読み上げられるのは、ほとんどの場合むしろ望ましい挙動です。ただ、日本語は文末で意味が決まるので、「〜をご利用いただけ…」のように切れると「ます」なのか「ません」なのか分からなくなってしまいます。そもそもデザインとして説明文が本当にカードに必要かは、一度話し合ってみると良さそうです。
• clampされる範囲にリンクやボタンを置かない
  • 見えないのにTabでフォーカスが入り、フォーカスが見えない状態になりえるのでひょっとするとWCAGに適合しないケースになるかもしれません。
• 「続きを読む」型のUI
  • 展開前の本文はDOM側で制御すると良さそうです。（hidden属性や<details>など）。line-clampだと支援技術の利用者には最初から全文が届いてしまい、「続きを読む」ボタンが意味をなさなくなります

「続きを読む」の例を簡単に書くと、以下のような違いになります。

<!-- line-clamp：見た目は3行だが、支援技術には全文とリンクが届く -->
<div class="clamp">
  <p>本文のテキスト。<a href="/detail">詳細</a></p>
</div>
<button type="button">続きを読む</button>

<!-- DOMで出し分け：見た目と支援技術に届く内容が一致する -->
<p>冒頭のテキスト。</p>
<div id="more" hidden>
  <p>続きのテキスト。<a href="/detail">詳細</a></p>
</div>
<button type="button" aria-expanded="false" aria-controls="more">続きを読む</button>

.clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

リンクにTabで移動すると、ブラウザによってはボックスの中身がスクロールして隠れていた行が見えるようになり、表示が崩れます。どちらにしても、見えている3行とは別の場所にフォーカスがある状態です。

まとめ

line-clampで省略されたテキストは、見た目からは消えてもスクリーンリーダーには読まれます。これは今の各ブラウザの挙動でもあり、今回の仕様変更でEditor’s Draftもそれに揃いました。ただし、今回変わったのはあくまでEditor’s Draftで、議論はまだ続いています。

一方で、支援技術の利用者にも省略した状態で届けたいケースもあります。そのためにスクリーンリーダーからも隠す仕組みをどうするかは、今後の課題として議論が続いているようです^[参照4]。