web-dev-qa-db-ja.com

HTMLの 'hidden'属性と 'aria-hidden'属性の違いは何ですか？

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

html5wai-aria
204
Daniel Kobe

ARIA（Accessible Rich Internet Applications）は、WebコンテンツやWebアプリケーションを障害のある人々にとってよりアクセスしやすくするための方法を定義しています。

hidden属性はHTML5の新機能で、 browsers に要素を表示しないように指示します。 aria-hiddenプロパティは screen-reader に要素を無視すべきかどうかを伝えます。詳細については、w3のドキュメントをご覧ください。

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

これらの標準を使用すると、障害者がWebを簡単に使用できるようになります。

306
Leo Farmer

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

例：

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

アリアに隠された属性は、要素とその子孫のすべてがまだブラウザに表示されているが、スクリーンリーダーなどのアクセシビリティツールには表示されないことを示します。

例：

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

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

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

出典： パシエログループ

28
UnknownOctopus

意味の違い

HTML 5.2 によると：

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

例には、一部のパネルが公開されていないタブリスト、またはユーザーがログインした後に消えるログイン画面が含まれます。これらのことを「一時的に関連」と呼びます。つまり、タイミングに基づいて関連します。

一方、 ARIA 1.1 はこう言います：

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

言い換えると、aria-hidden="true"の要素は accessibility tree から削除されます。 aria-hidden="false"を持つ要素は間違いなくツリーに公開されます。 aria-hidden属性を持たない要素は「未定義（デフォルト）」状態にあります。つまり、ユーザーエージェントはそのレンダリングに基づいてツリーに公開する必要があります。例えば。ユーザーエージェントは、テキストの色が背景色と一致する場合、それを削除することを決定できます。

実効差

semanticsには、ブラウザ/ユーザーエージェントで予測可能なeffectsがあります。私が区別する理由は、ユーザーエージェントの動作がrecommendedであるが、仕様ではrequiredではないためです。

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

また、ユーザーの支援技術がARIA仕様を尊重していると仮定すると、aria-hidden="true"の要素をユーザーに公開しません。これは、「視覚的才能」に役立ちます。ユーザーが消費するのに不可欠ではないアイコン、画像など。

構文の違い

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

hiddenはboolean属性です。つまり、属性が存在する場合は、それがどのような値であってもtrueであり、属性が存在しない場合はfalseです。真の場合のベストプラクティスは、値をまったく使用しない（<div hidden>...</div>）、または空の文字列値（<div hidden="">...</div>）を使用することです。 nothidden="true"をお勧めします。コードを読んだり更新したりすると、hidden="false"が逆の効果をもたらすと推測される可能性があるためです。

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

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

6
chharvey

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();
0
Moiz