---
title: hidden="until-found"を使ってアクセシブルな折りたたみを実装する
tags:  #lt  
author: [newt](https://docswell.com/user/newt239)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/9J29VGGGER.jpg?width=480
description: 2026/07/27 雑LT_study https://web-study.connpass.com/event/396644/
published: July 27, 26
canonical: https://docswell.com/s/newt239/5JW6WX-introducing-hidden-until-found
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/9J29VGGGER.jpg)

hidden="until-found"を使って
アクセシブルな折りたたみを実装する
@newt239
雑LT_study
2026/07/27


# Page. 2

![Page Image](https://bcdn.docswell.com/page/DEY43VVGJM.jpg)

newt @newt239
学生
興味領域
デザインシステム
Webアクセシビリティ
フロントエンドエコシステム
Web標準
hidden="until-found"を使ってアクセシブルな折りたたみを実装する
02


# Page. 3

![Page Image](https://bcdn.docswell.com/page/VJNYVMM878.jpg)

hidden="until-found"とは
HTMLのhidden属性がとれる新しい値
それまで真偽属性だったhiddenが列挙属性に
2022年3月にLiving Standardとして取り込まれた
hidden="until-found"を使ってアクセシブルな折りたたみを実装する
03


# Page. 4

![Page Image](https://bcdn.docswell.com/page/YE9P6NNXJ3.jpg)

従来のhidden="true"との違い
ブラウザのページ内検索やテキストフラグメントでヒットしたときに、
hiddenが解除されてスクロールされるようになる
表·話·編·歴
表·話·編·歴
W3C標準
マークアップ言語
典拠管理データベース
[表示]
[表示]
[表示]
カテゴリ: マークアップ言語 HTML World Wide Web W3C勧告 オープンフォーマット
ティム・バーナーズ＝リー
最終更新 2026年7月22日 (水) 02:59 （日時は個人設定で未設定ならばUTC）。 ページはParsoidによってレンダリングされました。
テキストはクリエイティブ・コモンズ 表示-継承ライセンスのもとで利用できます 追加の条件が適用される場合があります 詳細については利用
hidden="until-found"を使ってアクセシブルな折りたたみを実装する
04


# Page. 5

![Page Image](https://bcdn.docswell.com/page/GE8DZKK9ED.jpg)

Wikipediaの関連項目セクションにおける実装例
折りたたまれている状態
ページ内検索でヒットして開いた状態
hidden="until-found"を使ってアクセシブルな折りたたみを実装する
05


# Page. 6

![Page Image](https://bcdn.docswell.com/page/LELMDZZM7R.jpg)

details/summaryでも同様の効果が得られる
アコーディオンUIではこちらを使用する
detailsタグ要素の自動展開についてはSafariでは26.2で実装
ただしマッチ箇所へスクロールしないバグが未修正のため、
Baselineでは現在Limited Available
hidden="until-found"を使ってアクセシブルな折りたたみを実装する
06


# Page. 7

![Page Image](https://bcdn.docswell.com/page/4JMYPVV6JW.jpg)

非対応ブラウザで使っても問題ない
hidden="until-found"がhidden="true"へ
フォールバックされるだけ
hidden="until-found"を使ってアクセシブルな折りたたみを実装する
07


# Page. 8

![Page Image](https://bcdn.docswell.com/page/PJR9122N79.jpg)

まとめ
hidden="until-found"はHTMLのグローバル属性
折りたたみUI内のテキストがページ内検索で見つかるようになる
未対応環境でもフォールバックされるのですぐに導入可能
hidden="until-found"を使ってアクセシブルな折りたたみを実装する
08


# Page. 9

![Page Image](https://bcdn.docswell.com/page/PEXQYDD8JX.jpg)

参考リンク
MDN: hidden グローバル属性
Chrome for Developers: 折りたたまれたコンテンツを
hidden=until-found でアクセスできるようにする
TAKLOG: タブやアコーディオンの非表示コンテンツには
hidden="until-found"を使うべし
WHATWG HTML Standard: The hidden attribute
Web Platform Status: hidden-until-found
hidden="until-found"を使ってアクセシブルな折りたたみを実装する
09