HTMLページでWAI-ARIAによる冗長性を回避します

ARIAの役割をHTMLに組み込むため、Web開発は大幅に容易になりました。 ARIAは、補助技術（ATS）に追加のセマンティック情報を提供することにより、障害のある人のWebアプリケーションの使いやすさを高めます。 ただし、重要な質問は続きます。ARIAの役割属性は、HTML要素がすでに固有のセマンティクスを持っている場合に必要ですか？ この記事では、この問題を調査し、暗黙のセマンティクスを持つ新しいHTML5構造要素がARIAの役割とどのように相互作用するかに焦点を当てています。

キーポイント：

HTML要素が必要なセマンティクスを既に提供している場合、 ariaの役割の使用を避けてください。 不要なARIA属性は、冗長コードを作成します

HTML5要素には、デフォルトの暗黙的なARIAセマンティクスがあります。したがって、一致するAriaの役割または

属性を追加することは、通常、冗長で落胆します。
• これらの暗黙のセマンティクスにもかかわらず、互換性の理由でARIAの役割を追加することは、たとえそれが冗長性をもたらしたとしても考慮されるかもしれません。
• aria-*Aria Fundamentals and Common誤解：
WAI-ARIA（アクセス可能なリッチインターネットアプリケーション）は、HTML要素の強化属性を含む。 これらの属性は、ブラウザアクセシビリティAPIを介して役割、プロパティ、および状態情報をATSに伝えます。 ARIAの新人にとって、ステファンの「ワイアリアの紹介」は推奨されるリソースです。

HTMLコミュニティでの一般的な見解は、「HTMLがすでに処理している場合、ARIAを使用しないでください。」 より正確には、実装されたHTML要素にアクセシビリティサポートがない場合にのみARIAを使用します。

ariaの役割とほとんどの要素：

Ariaの役割、プロパティ、および状態は、HTML要素のセマンティクスを公開できます。 これは、要素の

デフォルトの暗黙的なariaセマンティクス

。

として知られています。 ARIA属性を追加する前に、セマンティックで正しいHTML（ネイティブセマンティクスを活用）に優先順位を付けます。 ARIAの役割は、一般に、ほとんどのHTML要素のデフォルトのセマンティクスを強化しません。 シンプルに保ちます：HTML要素が本質的にセマンティクスを提供する場合、ARIAを使用しないでください。そうすることで、冗長コードが作成されます

ariaの役割とhtml4：

アクセシビリティの専門家であるSteve Faulknerが説明するように、HTML4（および以前の）要素は、すでにマッピングされているため、デフォルトのセマンティクスを公開するために追加のARIA役割を必要としません。 このコンテキストでARIAの役割を追加することは無意味で、コードレビューに不必要な複雑さを追加します。

html5拡張機能：

HTML5仕様には次のように述べています。「ほとんどの場合、デフォルトの暗黙的なARIAセマンティクスと一致するARIAロールおよび/または属性を設定することは不要であり、推奨されません。」

HTML5要素にはデフォルトの暗黙的なARIAセマンティクスがありますが、すべての要素が検証なしでマッピングされることは保証されていません。 したがって、ARIAの役割を予防措置として追加することを考慮して、冗長性を受け入れることができます。 ARIAの冗長性

冗長性：

インタラクティブなHTML5要素にデフォルトの暗黙のARIA役割を追加する（フォーム要素や

など）は効果がありません。 有害ではありませんが、それは不要であり、開発時間を無駄にします。 インタラクティブな要素には、アクセス可能な名前が必要です（アクセシビリティAPIのアクセス可能な名前プロパティに値を提供します）。 たとえば、<button></button>

効率が低い：

<code class="language-html"><label>Title</label><input type="text"></code>

より効率的：

2番目の例では、ラベルを入力と明確に関連付けて、

<code class="language-html"><label for="title">Title</label><input type="text" id="title"></code>

および

属性を使用します。 forid冗長性の例（回避するため）：

インタラクティブな要素に関する冗長な役割：

は不要です。

<code class="language-html"><button role="button">Submit</button></code>

role="button"

ネイティブHTMLの対応物と並んでAriaの役割：

html

属性は

<code class="language-html"><div hidden aria-hidden="true"></div></code>

冗長になります。

hidden 確立された構造要素に関するaria-hidden

aria：

と

<code class="language-html"><h1 role="heading" aria-level="1">I am a Heading</h1></code>

の両方が不要です。

HTML5構造要素を備えたrolearia-levelaria：

HTML5は、デフォルトの暗黙的なARIAセマンティクスマッピングを備えた構造要素（例えば、、

、

）を導入しました。 ただし、一部のマッピングは条件付きです。たとえば、<aside></aside>は<article></article>または<main></main>内にない場合にのみ<footer></footer>にマップします。 ブラウザは本質的にこれらのデフォルトのセマンティクスを公開します role=contentinfo<article></article>ブラウザのサポート：<section></section>

ほとんどの最新のブラウザは、HTML5構造要素とセクション要素のデフォルトの暗黙的セマンティクスをサポートしています。 （Internet Explorerの実装は異なる場合があります。）

結論：

HTML5仕様が機能を既に定義している場合、ARIAの役割、プロパティ、および状態を避けてください。 多くのHTML5要素には、デフォルトの暗黙的なARIAセマンティクスがあります

Ariaサポートは一般に最新のブラウザ全体で優れています（例外を除く）。

• html要素にaria属性を追加することの意味を考えて、コメントであなたの考えを共有してください。
• よくある質問（FAQ）：

（元の入力のFAQセクションは、トピックに直接関係しており、擬似オリジナリ性の変更を必要としないため、ここで保持されます。）

HTMLページのWAI-ARIAの目的は何ですか？

Wai-Ariaは、Webアクセシビリティイニシアチブ - アクセス可能なリッチインターネットアプリケーションの略で、World Wide Webが公開する技術仕様ですコンソーシアム（W3C）。特に障害のある人向けに、Webコンテンツとアプリケーションのアクセシビリティと相互運用性を向上させるためのフレームワークを提供します。これは、障害のある人がWebコンテンツをよりアクセスしやすくする方法を定義することでこれを行います。たとえば、スクリーンリーダーのような支援技術がWebコンテンツの構造と機能を理解するのに役立つように、追加のセマンティクスを提供するなどします。 WAI-ARIAおよびHTMLページ？

WAI-ARIAおよびHTMLページでの冗長性は、同じ情報または機能が複数回提供されている場合に発生する可能性があります。たとえば、HTML要素が既にHTML仕様によって定義されている暗黙の役割を持っている場合、開発者が暗黙の役割に一致するARIAの役割を追加する場合、これは冗長性を生み出します。これにより、支援技術とそれらに依存するユーザーを混乱させることができます。

Webアクセシビリティにおける支援技術の役割は何ですか？障害を持つ人々がWebコンテンツにアクセスしてやり取りするのを助けます。支援技術の例には、視覚障害のある人のためのWebコンテンツを読み取るスクリーンリーダー、およびモビリティ障害のある人が自分の声でコンピューターを制御できるようにする音声認識ソフトウェアを読み取るスクリーンリーダーが含まれます。支援技術の機能は？

wai-ariaは、これらの技術が構造を理解するのに役立つ追加のセマンティクスを提供することにより、支援技術の機能を改善します。およびWebコンテンツの機能。これにより、支援技術はユーザーにWebコンテンツのより正確で有用な表現を提供できます。

以上がHTMLページでWAI-ARIAによる冗長性を回避しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。