[解決済み] hidden属性（HTML5）とdisplay:noneルール（CSS）の違いは何ですか？

質問

HTML5には新しいグローバル属性があります。 hidden が追加され、コンテンツを隠すために使用することができます。

<article hidden>
   <h2>Article #1</h2>
   <p>Lorem ipsum ...</p>
</article>

CSSには display:none ルールがあり、これもコンテンツを隠すために使うことができます。

article { display:none; }

視覚的には同じです。 意味的にはどう違うのでしょうか？ 計算機的に？

どちらを使うべきか、どのようなガイドラインを考慮すべきでしょうか？

TIA

EDIT : newtronさんの回答（以下）をもとに、さらに検索してみました。 その hidden 属性は昨年激しく議論され、（どうやら）かろうじて HTML5 の仕様に取り込まれたようです。 一部の人は、これは冗長であり、何の目的もないと主張しました。 私の知る限りでは、最終的な評価はこうです。 ウェブブラウザだけをターゲットにするのであれば、違いはない。 (あるページでは、ウェブブラウザは display:none を使用して hidden 属性を実装していると断言しているページもありました)。 しかし、アクセシビリティを考慮する場合（例えば、スクリーン リーダーの読者にコンテンツを読んでもらうことを想定している場合）には、違いがあります。 CSSルールの display:none はウェブブラウザから私のコンテンツを隠すかもしれませんが、対応するariaルール（例えば。 aria-hidden="false" ) はそれを読もうとするかもしれません。 したがって、私は今、@newtronの答えが正しいことに同意しますが、おそらく（議論の余地なく）私が望むほど明確ではありません。 ありがとう、@newtron さん。

どのように解決するのですか？

重要な違いは、どうやら hidden 要素が、プレゼンテーションに関係なく常に非表示であることです。

hidden属性は、他のプレゼンテーションで正当に表示できる内容を隠すために使ってはいけません。例えば、タブ付きダイアログのパネルを隠すのにhiddenを使うのは不正確です。タブ付きインターフェースは単にオーバーフロー表示の一種であり、スクロールバーのある一つの大きなページで全てのフォーム制御を表示することも同様に可能だからです。もし何かが hidden とマークされたなら、それは例えばスクリーン・リーダーを含む全ての表示から隠されます。

http://dev.w3.org/html5/spec/Overview.html#the-hidden-attribute

CSSは異なるメディア/プレゼンテーションタイプをターゲットにすることができるので display: none は与えられたプレゼンテーションに依存します。例えば、ある要素には display: none を持つが、モバイルブラウザでは持たない。または、視覚的に隠されていても、スクリーン リーダーの場合は利用可能であることがあります。