hidden="until-found"を使ってアクセシブルな折りたたみを実装する

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

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

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

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

• https://ja.wikipedia.org/wiki/特別:個人設定#mw-prefsection-rendering
• https://ja.wikipedia.org/wiki/協定世界時
• https://www.mediawiki.org/wiki/Special:MyLanguage/Parsoid
• https://ja.wikipedia.org/wiki/Template:W3C標準
• https://ja.wikipedia.org/wiki/Template‐ノート:W3C標準?action=edit&redlink=1
• https://ja.wikipedia.org/w/index.php?title=Template:W3C標準&action=edit
• https://ja.wikipedia.org/w/index.php?title=Template:W3C標準&action=history
• https://ja.wikipedia.org/wiki/Template:マークアップ言語一覧
• https://ja.wikipedia.org/wiki/Template‐ノート:マークアップ言語一覧
• https://ja.wikipedia.org/w/index.php?title=Template:マークアップ言語一覧&action=edit
• https://ja.wikipedia.org/w/index.php?title=Template:マークアップ言語一覧&action=history
• https://ja.wikipedia.org/wiki/マークアップ言語
• https://ja.wikipedia.org/wiki/Help:典拠管理
• https://ja.wikipedia.org/wiki/特別:カテゴリ
• https://ja.wikipedia.org/wiki/Category:マークアップ言語
• https://ja.wikipedia.org/wiki/Category:オープンフォーマット
• https://ja.wikipedia.org/wiki/Category:ティム・バーナーズ＝リー

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

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

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

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

参考リンク 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

• https://developer.mozilla.org/ja/docs/Web/HTML/Reference/Global_attributes/hidden
• https://developer.chrome.com/docs/css-ui/hidden-until-found?hl=ja
• https://www.tak-dcxi.com/article/use-until-found-for-hiding-tabs-and-accordions/
• https://html.spec.whatwg.org/multipage/interaction.html#the-hidden-attribute
• https://webstatus.dev/features/hidden-until-found