ARIA（Accessible Rich Internet Applications）は、WebコンテンツやWebアプリケーションを障害者がより利用しやすくするための方法を定義しています。

hidden属性は、HTML5で新しく追加されたもので、**ブラウザ**に要素を表示しないように指示します。また、aria-hidden` プロパティは、screen-readers に、その要素を無視するかどうかを指示します。詳しくはw3ドキュメントを参照してください。

https://www.w3.org/WAI/PF/aria/states_and_properties#aria-hidden

これらの規格を使用することで、障害者の方がウェブを利用しやすくなります。

hidden属性とは、ブーリアン属性（True/False）のことです。この属性が要素に使用されると、その要素に対するすべての関連性が取り除かれます。ユーザーがhtmlページを見るとき、hidden属性を持つ要素は表示されてはいけません。

例

    <p hidden>You can't see this</p>

Aria-hidden属性は、要素とその子孫のすべてがブラウザでは表示されているが、スクリーン・リーダーなどのアクセシビリティ・ツールでは見えなくなることを示します。

例

    <p aria-hidden="true">You can't see this</p>

これ](http://www.paciellogroup.com/blog/2012/05/html5-accessibility-chops-hidden-and-aria-hidden/)を見てみてください。あなたの疑問に答えてくれるはずです。

**ARIAとはAccessible Rich Internet Applicationsの略です。

ソース： Paciello Group

意味の違い

HTML 5.2](https://www.w3.org/TR/html52/editing.html#the-hidden-attribute)によると、以下のようになっています。

例えば、一部のパネルが露出していないタブリストや、ユーザーがログインした後に消えてしまうログイン画面などです。私はこのようなものを「Temporally related」と呼んでいますが、これはタイミングに基づいて関連性があるということです。

一方、ARIA 1.1にはこうあります。

また、[ARIA 1.1]()には次のようにあります。

言い換えれば、aria-hidden="true"を持つ要素は、ほとんどの支援技術が尊重するアクセシビリティ・ツリーから取り除かれ、aria-hidden="false"を持つ要素は、間違いなくツリーに公開されます。aria-hidden`属性のない要素は、"undefined (default)"の状態にあり、ユーザーエージェントはそのレンダリングに基づいてツリーに公開すべきであることを意味しています。例えば、ユーザーエージェントは、テキストの色が背景の色と一致する場合、それを削除することを決定することができます。

では、セマンティクスを比較してみましょう。まだ「一時的な関連性」はないが、将来的に関連性を持つようになるかもしれない要素に対して、hiddenを使用することは適切ですが、aria-hiddenを使用することは ありません 。逆に、常に関連性があるが、アクセシビリティ API を乱雑にしたくない要素に対しては、hiddenではなく、aria-hiddenを使用するのが適切です。そのような要素には、ユーザーが消費するのに必須ではないアイコンやイメージのような「視覚的な演出」が含まれるかもしれません。

効果的な違い

この 意味 は、ブラウザ/ユーザーエージェントにおいて、予測可能な 効果 をもたらします。私が区別している理由は、ユーザーエージェントの動作は推奨されていますが、仕様書では要求されていないからです。

hidden属性は、プリンターやスクリーンリーダーを含む*すべての*プレゼンテーションから要素を隠すべきです（これらのデバイスがHTMLの仕様に従うと仮定して）。もしあなたが要素をアクセシビリティツリーから *同様に* ビジュアルメディアからも削除したいのであれば、hiddenが効果的です。しかし、この効果を得たいからといってhiddenを使用してはいけません。まず、hiddenが意味的に正しいかどうかを自問してください (上記参照)。もしhidden` が意味的に正しくないが、それでも要素を視覚的に隠したい場合には、CSS などの他のテクニックを使うことができます。

aria-hidden="true" が指定された要素はアクセシビリティツリーに公開されませんので、例えばスクリーンリーダーがそれを告知することはありません。アクセシブルなユーザーエージェントではアナウンス/レンダリングされませんが、ビジュアルエージェントではレンダリングされるという、ユーザーによって異なる体験を提供することになるため、このテクニックは慎重に使用する必要があります。これは正しく行われれば良いことですが、悪用される可能性もあります。

構文上の違い

最後に、2つの属性には構文上の違いがあります。

hiddenは**boolean属性**であり、属性が存在する場合は、その値に関わらずtrueとなり、属性がない場合はfalseとなります。trueの場合は、値を全く使用しないか（

これとは対照的に、aria-hidden は 列挙型属性 であり、有限のリストの値の一つを許可します。aria-hidden 属性が存在する場合、その値は "true" または "false" のいずれかでなければなりません。もしも "undefined (default)" の状態にしたい場合には、この属性を完全に削除してください。

さらに読み進めると https://github.com/chharvey/chharvey.github.io/wiki/Hidden-Content