非表示属性（HTML5）とdisplay：noneルール（CSS）の違いは何ですか？

HTML5には、hiddenコンテンツを非表示にするために使用できる新しいグローバル属性があります。

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

CSSにはdisplay:noneルールがあり、コンテンツを非表示にするためにも使用できます。

article { display:none; }

見た目は同じです。意味的に違いは何ですか？計算的に？

どちらを使用するかについて、どのようなガイドラインを検討する必要がありますか？

TIA。

編集：@newtronの応答（下記）に基づいて、さらに検索を行いました。このhidden属性は昨年激しく争われ、（どうやら）HTML5仕様にはほとんど入っていませんでした。一部は冗長であり、目的がないと主張した。私が言えることから、最終的な評価は次のとおりです。私がWebブラウザーのみを対象にしている場合、違いはありません。（1つのページでは、Webブラウザーdisplay:noneが非表示属性を実装するために使用されたとさえ主張していました。）しかし、アクセシビリティを検討している場合（たとえば、コンテンツがスクリーンリーダーで読み取られることを期待している場合）、違いがあります。CSSルールdisplay:noneは私のコンテンツをWebブラウザーから隠すかもしれませんが、対応するariaルール（例えば、aria-hidden="false"）それを読もうとするかもしれません。したがって、私は今、@ newtronの答えが正しいことに同意します。あなたの助けをありがとう@newtron。

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

hidden属性を使用して、別のプレゼンテーションで正当に表示できるコンテンツを非表示にすることはできません。たとえば、タブ付きインターフェイスは単なるオーバーフロープレゼンテーションの一種であるため、タブ付きダイアログでパネルを非表示にするために非表示を使用することは正しくありません。スクロールバーを備えた1つの大きなページにすべてのフォームコントロールを表示することもできます。この属性を使用して1つのプレゼンテーションからのみコンテンツを非表示にすることも同様に正しくありません。何かが非表示としてマークされている場合、スクリーンリーダーなどのすべてのプレゼンテーションから非表示になります。

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

CSSはさまざまなメディア/プレゼンテーションタイプをターゲットにできるためdisplay: none、特定のプレゼンテーションに依存します。たとえばdisplay: none、モバイルブラウザではなく、デスクトップブラウザで表示したときに一部の要素が含まれる場合があります。または、視覚的に非表示にしてもスクリーンリーダーで使用できます。