Angular Materialで作業している間、私はaria属性を見てきました。誰かが私に説明できますか、aria接頭辞は何を意味しますか？しかし、最も重要なことは、私が理解しようとしているのは、属性aria-hiddenとhidden属性の違いです。

ARIA（Accessible Rich Internet Applications）は、障害を持つ人々がWebコンテンツおよびWebアプリケーションにアクセスしやすくする方法を定義しています。

このhidden属性はHTML5の新機能であり、要素を表示しないようブラウザに指示します。このaria-hiddenプロパティは、要素を無視する必要があるかどうかをスクリーンリーダーに伝えます。詳細については、w3のドキュメントをご覧ください。

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

これらの標準を使用すると、障害者がWebを使用しやすくなります。

非表示属性はブール属性（True / False）です。この属性を要素で使用すると、その要素との関連性がすべて削除されます。ユーザーがhtmlページを表示するとき、hidden属性を持つ要素は表示されるべきではありません。

例：

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

aria-hidden属性は、要素とその子孫のすべてが引き続きブラウザーに表示されるが、スクリーンリーダーなどのユーザー補助ツールには表示されないことを示します。

例：

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

これを見てください。それはあなたのすべての質問に答えるべきです。

注： ARIAはAccessible Rich Internet Applicationsの略です

出典： Paciello Group

意味の違い

HTML 5.2によると：

要素で指定されている場合、[ hidden属性]は、要素がまだページの現在の状態に直接関連していないか、もはや関連していないこと、またはコンテンツがページの他の部分で再利用されることを宣言するために使用されていることを示します。ユーザーが直接アクセスするのではありません。

例としては、一部のパネルが表示されていないタブリストや、ユーザーがログインすると表示されなくなるログイン画面などがあります。これらは「時間的に関連性がある」、つまりタイミングに基づいて関連性があるといいます。

一方、ARIA 1.1では次のように述べています。

[ aria-hidden状態]は、要素がアクセシビリティAPIに公開されているかどうかを示します。

言い換えると、を持つ要素aria-hidden="true"はアクセシビリティツリーから削除されます。これは、ほとんどの支援技術でaria-hidden="false"認められており、を持つ要素は確実にツリーに公開されます。aria-hidden属性のない要素は「未定義（デフォルト）」状態にあります。つまり、ユーザーエージェントはレンダリングに基づいて要素をツリーに公開する必要があります。たとえば、ユーザーエージェントは、テキストの色が背景色と一致している場合に削除することを決定できます。

次に、セマンティクスを比較してみましょう。それの使用に適したhidden、しかし、ではない aria-hidden、まだ「時間的関連」ではありませんが、それは（あなたが削除する動的なスクリプトを使用した場合には、将来的に関連してくる可能性がある要素について、hidden属性）。逆に、常に関連しているがアクセシビリティAPIを乱雑にしたくない要素では、aria-hiddenではなくを使用するのが適切hiddenです。そのような要素には、ユーザーが消費するのに必須ではないアイコンや画像などの「視覚的才能」が含まれる場合があります。

効果的な違い

セマンティクスは、予測可能な持っている効果のブラウザ/ユーザーエージェントでは。私が区別する理由は、ユーザーエージェントの動作が推奨されているが、仕様では要求されていないためです。

このhidden属性は、プリンターやスクリーンリーダーを含むすべてのプレゼンテーションから要素を非表示にする必要があります（これらのデバイスがHTML仕様に準拠している場合）。アクセシビリティツリーとビジュアルメディアから要素を削除する場合hiddenは、トリックを実行します。ただし、この効果が欲しいhidden という理由だけで使用しないでください。hidden最初に意味的に正しいかどうかを自問してください（上記を参照）。hiddenが意味的に正しくなくても、要素を視覚的に非表示にしたい場合は、CSSなどの他の手法を使用できます。

の要素aria-hidden="true"はアクセシビリティツリーに公開されないため、たとえば、スクリーンリーダーはそれらをアナウンスしません。この手法は、ユーザーごとに異なるエクスペリエンスを提供するため、慎重に使用する必要があります。アクセス可能なユーザーエージェントは、それらをアナウンス/レンダリングしませんが、ビジュアルエージェント上でレンダリングされます。これは正しく行われると良いことですが、悪用される可能性があります。

構文の違い

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

hiddenはブール属性です。つまり、属性が存在する場合は、属性の値に関係なくtrueになり、存在しない場合はfalseになります。実際のケースでは、値をまったく使用しないか（<div hidden>...</div>）、または空の文字列値（<div hidden="">...</div>）を使用することをお勧めします。私は考えていないお勧めしますhidden="true"あなたのコードを更新し、誰かの読み取りが/それは推測する可能性があるためhidden="false"、単に間違っている逆の効果を持っています。

aria-hidden対照的に、は列挙属性であり、値の有限リストの1つを許可します。aria-hidden属性が存在する場合、その値はまたはのいずれ"true"かである必要があります"false"。「未定義（デフォルト）」の状態が必要な場合は、属性を完全に削除します。

さらに読む：https : //github.com/chharvey/chharvey.github.io/wiki/Hidden-Content

aria-hiddenをfalseに設定し、それをelement.show（）で切り替えるとうまくいきました。

例えば

<span aria-hidden="true">aria text</span>

$(span).attr('aria-hidden', 'false');
$(span).show();

そして隠れたとき

$(span).attr('aria-hidden', 'true');
$(span).hide();