We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

hidden グローバル属性 は、要素はまだ、あるいはもはや関連性がないことを示す論理型属性です。例えば、ログインのプロセスが完了するまで使えない要素を隠すために使用できます。ブラウザーは、 hidden 属性を設定している要素を表示しません。

hidden 属性は、別の表現方法で表示することが正当であるはずのコンテンツを隠すために使用してはいけません。例えば、タブ付きダイアログでパネルを隠すために hidden 属性を使用するのは不適切です。これはタブ付きインターフェイスが、単に内容がはみ出ていることを示す表現の一種であり、スクロールバーを使用してひとつの大きなページにすべてのフォームコントロールを表示するのと同等であるためです。同様に、ある表現方法からコンテンツを隠すためにこの属性を使用するのも不適切です。何かを隠した場合は、例えばスクリーンリーダーを含むすべての表現方法から隠されます。

隠された要素は、隠されていない要素からリンクしないようにしてください。また、隠された要素の子孫要素は依然アクティブです。これは script 要素が実行可能、またフォーム要素が送信可能であるということです。

例えば、 href 属性を使用して hidden 属性が設定された部分にリンクを張るのは不適切です。コンテンツが利用できないか無関係ならば、リンクする理由がないからです。

しかし、 ARIA の aria-describedby 属性を使って隠された要素の記述を参照することは良いことです。記述を隠すことは、それ自身では役に立たないことを意味しますが、記述された要素から参照される特定の文脈に限っては有用であるように記述することができます。

同様に、 canvas 要素に hidden 属性をつけたものはオフスクリーンバッファーとしてグラフィックエンジンを記述することができますし、フォーム制御では hidden のフォーム要素をフォーム属性を使用して参照することができます。

メモ: hidden 属性を持つ要素について、 CSS の display プロパティの値を変更すると、挙動を上書きします。例えば display: flex を設定した要素は、 hidden 属性が存在しても表示されます。

仕様策定状況

仕様書 策定状況 コメント
HTML Living Standard
hidden の定義
現行の標準 最新のスナップショットである HTML 5.1 から変更なし。
HTML Living Standard
Hidden elements の定義
現行の標準 CSS による hidden 属性のデフォルトレンダリング方法の案を定義
HTML 5.1
hidden の定義
勧告 HTML Living Standard のスナップショットであり、この属性を初めて定義しました。

ブラウザーの対応

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応 あり あり あり11 あり あり
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応4 あり あり あり あり あり あり

関連情報

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, yyss
最終更新者: mfuji09,