hidden 属性

7.1 hidden 属性

すべての HTML 要素には、hidden コンテント属性をセットすることができます。hidden 属性は論理属性です。要素に指定されると、その要素はページの現在の状態には直接的に、まだ関連性がない、または、もう関連性がないことを意味します。または、ユーザーによって直接アクセスされているのではなく、そのページの他の部分によって再利用されるコンテンツだと宣言するために使われている、ということを意味します。ユーザーエージェントは、hidden 属性が指定された要素をレンダリングするべきではありません。この要件は、スタイルレイヤーを通して間接的に実装することができます。たとえば、HTML + CSS ユザーエージェントなら、レンダリングのセクションで提案されているルールを使って、これらの要件を実装することができるでしょう。

通常、この属性は CSS を使って実装されるため、CSS を使ってそれを無効にすることができてしまいます。たとえば、すべての要素に display: block' を適用するルールがあれば、 hidden 属性の効果を取り消してしまうでしょう。ゆえに、ウェブ制作者は、スタイルシートを書く際には、この属性が確実に期待通りにスタイリングされているか気をつけなければいけません。

次の例では、ユーザーがログインするまで、ウェブゲームのメイン画面を隠すために使われています:

  <h1>The Example Game</h1>
  <section id="login">
   <h2>ログイン</h2>
   <form>
    ...
    <!-- ユーザーの認証情報がチェックされたら login() を呼び出す -->
   </form>
   <script>
    function login() {
      // スクリーンを切り替える
      document.getElementById('login').hidden = true;
      document.getElementById('game').hidden = false;
    }
   </script>
  </section>
  <section id="game" hidden>
   ...
  </section>

別のプレゼンテーションで正当に表示されうるコンテンツを隠すために、hidden 属性を使ってはいけません。たとえば、タブ付きダイアログのパネルを隠すために hidden を使うのは正しくありません。なぜなら、タブ付きインタフェースというのは、一種のオーバーフロー表現にすぎないからです。 つまり、一つの大きなページの中でスクロールバーを使ってすべてのフォームコントロールを表示するのと同じようなものです。同様に、ひとつのプレゼンテーションのときだけコンテンツを隠すために、この属性を使うのも正しくありません。つまり、もし何かに hidden がマークアップされたら、それはすべてのプレゼンテーションから隠されることになります。たとえば、プリンターも例外ではありません。

hidden でない要素は、hidden な要素にハイパーリンクしてはいけません。同様に、hidden でない labeloutput 要素の for 属性は、hidden な要素を参照してはいけません。いずれの場合でも、そのような参照があると、ユーザーに混乱を招いてしまいます。

しかし、要素とスクリプトは、別の状況において hidden となる要素を参照することができます。

たとえば、hidden 属性がマークアップされたセクションにリンクするために href 属性を使うのは間違いです。そのコンテンツが適切でないか関連がないなら、それにリンクする理由はありません。

しかし、ARIA の aria-describedby 属性を使って hidden な記述を参照するなら良いでしょう。記述を隠すというのは、それ単独では使えないということを言っているわけですが、それらが説明しているイメージから参照される特定の状況では役に立つように書くことができます。

同様に、hidden 属性を持つ canvas 要素も、スクリプトされたグラフィックエンジンによって、オフスクリーンバッファとして使うことがあるでしょうし、フォームコントロールも、form 属性を使って非表示の form 要素を参照することもあるでしょう。

アクセシビリティの API は、構造化されたコンテンツがデフォルトのビューでは非表示としてマークアップされていても、それにアクセスできる手段を提供することが推奨されます。そのようなコンテンツは、支援技術 (AT) を使おうが、主流のユーザーエージェントを使おうが、あらゆるモダリティにおいて、通常のドキュメントフローの中ではユーザーに認識できるようにするべきではありません。

このような機能が利用可能な場合、ユーザーエージェントは、hidden な要素が ID 参照妥当なハッシュ名参照によって間接的に参照されるなら、適切な場合に、AT がそのようなコンテンツのすべてのセマンティクスにアクセスできるようにするために、それらの機能を使うことができます。これによって、通常のドキュメントフローのどのプレゼンテーションでもコンテンツを非表示にしながらも、ユーザーの要求に応じて、AT はこれら hidden な要素の構造にアクセスできるようになります。ウェブ制作者は、ユーザーの要求があっても hidden な要素を見せたくないなら、このようなメカニズムを持つ要素を参照するべきではありません。

ユーザーエージェントによっては、AT にこのようなコンテンツにアクセスできるようにする際に、非表示のコンテンツをつぶしてしまうものがあります。そのため、ウェブ制作者は、つぶされてしまった時に必要不可欠な意味を失ってしまう hidden なコンテンツを参照するべきではありません。

たとえば、hidden 属性がマークアップされたセクションにリンクするために href 属性を使うのは間違いです。そのコンテンツが適切でないか関連がないなら、それにリンクする理由はありません。

しかし、ARIA の aria-describedby 属性を使って hidden な記述を参照するなら良いでしょう。記述を隠すというのは、それ単独では使えないということを言っているわけですが、それらが説明しているイメージから参照される特定の状況では役に立つように書くことができます。

同様に、hidden 属性を持つ canvas 要素も、スクリプトされたグラフィックエンジンによって、オフスクリーンバッファとして使うことがあるでしょうし、フォームコントロールも、form 属性を使って非表示の form 要素を参照することもあるでしょう。

hidden 属性によって非表示なったセクションの中の要素は、アクティブなままです。たとえば、そのようなセクションの中にあるスクリプトやフォームコントロールは、それぞれ、実行可能であり、サブミット可能です。ユーザーへの見せ方だけが変わるのです。

hidden IDL 属性は、同じ名前のコンテント属性を反映しなければいけません。


※ 原文:http://www.w3.org/TR/2014/REC-html5-20141028/editing.html#the-hidden-attribute