WAI-ARIA は、アクセス可能なWebアプリのサポートを定義する仕様です。多数のマークアップ拡張機能（主にHTML5要素の属性として）を定義します。これは、Webアプリ開発者がスクリーンリーダーなどの支援技術にさまざまな要素のセマンティクスに関する追加情報を提供するために使用できます。もちろん、ARIAが機能するには、マークアップを解釈するHTTPユーザーエージェントがARIAをサポートする必要がありますが、仕様は、下位レベルのユーザーエージェントがARIA固有のマークアップを安全に無視できるように作成されます。 Webアプリの機能。
ARIA仕様の例を次に示します。
<ul role="menubar">
<!-- Rule 2A: "File" label via aria-labelledby -->
<li role="menuitem" aria-haspopup="true" aria-labelledby="fileLabel"><span id="fileLabel">File</span>
<ul role="menu">
<!-- Rule 2C: "New" label via Namefrom:contents -->
<li role="menuitem" aria-haspopup="false">New</li>
<li role="menuitem" aria-haspopup="false">Open…</li>
...
</ul>
</li>
...
</ul>
外側の<ul>要素のrole属性に注意してください。この属性は、ブラウザによるマークアップの画面上でのレンダリング方法には一切影響しません。ただし、ARIAをサポートするブラウザーは、レンダリングされたUI要素にOS固有のアクセシビリティ情報を追加するため、スクリーンリーダーはそれをメニューとして解釈し、エンドユーザーが理解するのに十分なコンテキストで読み上げることができます（たとえば、明示的な「メニュー」オーディオヒント）と対話できます（たとえば、音声ナビゲーション）。
ARIAは、Accessible Rich Internet Applicationsの略です。
WAI-ARIAは非常に強力なテクノロジーであり、開発者は視覚的に豊かなユーザーインターフェースの目的、状態、およびその他の機能を、支援技術が理解できる方法で簡単に記述することができます。 WAI-ARIAはついに、HTML 5仕様の現在の作業ドラフトに統合されました。
そして、WAI-ARIAが何であるか疑問に思っているなら、それは同じことです。
用語WAI-ARIAとARIAは同じものを指すことに注意してください。ただし、WAI-ARIAを使用してWAIの起源を確認する方がより正確です。
WAI = Web Accessibility Initiative
その見た目から、ARIAは支援技術に使用され、主に画面読み上げに使用されます。
この記事を読めば、あなたの疑問の大部分は解消されます。
それは何ですか？
WAI-ARIAは「Web Accessibility Initiative – Accessible Rich Internet Applications」の略です。これは、視覚障害者向けのスクリーンリーダーなどの支援技術がHTML固有ではない特定の意味を理解できるように、WebサイトまたはWebアプリケーションのセマンティクスを強化するのに役立つ属性のセットです。表示される情報は、リンクまたはボタンをアクティブ化するだけでより多くのアイテムを表示または非表示にすることをスクリーンリーダーに伝えるような単純なものから、メニューシステム全体または階層ツリービューのような複雑なウィジェットまでさまざまです。
これは、ロールや状態属性をHTML 4.01以降のマークアップに適用することで実現されます。これは、レイアウトやブラウザーの機能には影響しませんが、支援技術に追加情報を提供します。
WAI-ARIAのコーナーストーンの1つがロール属性です。これは、使用されているHTML要素が実際には要素名が示唆するものではなく、何か他のものであることを支援技術に伝えるようブラウザに指示します。元々はdiv要素のみですが、このdiv要素はオートコンプリートアイテムのリストのコンテナである場合があります。この場合、「リストボックス」の役割を使用するのが適切です。同様に、そのコンテナdivの子であり、単一のオプションアイテムを含む別のdivは、「オプション」のロールを取得する必要があります。 2つのdivですが、役割を通じて、まったく異なる意味があります。ロールは、一般的に使用されるデスクトップアプリケーションの対応物をモデルにしています。
これの例外はドキュメントランドマークロールです。これは、問題の要素の実際の意味を変更しませんが、ドキュメント内のこの特定の場所に関する情報を提供します。
2番目のコーナーストーンは、WAI-ARIAの状態とプロパティです。これらは、何かが折りたたまれたり展開されたり、フォーム要素が必要な場合、ポップアップメニューがアタッチされている場合など、特定のネイティブまたはWAI-ARIA要素の状態を定義します。これらは多くの場合動的であり、Webアプリケーションのライフサイクルを通じて値を変更し、通常はJavaScriptを介して操作されます。
それは何ですか？
WAI-ARIAは、ブラウザの動作に影響を与えることを意図していません。たとえば、実際のボタン要素とは異なり、「ボタン」の役割を注ぐdivは、キーボードのフォーカス性、スペースまたはEnterが押されたときの自動クリックハンドラー、およびボタン。ブラウザ自体は、「ボタン」の役割を持つdivがボタンであることを認識せず、そのアクセシビリティAPI部分のみが認識します。
結果として、これは、キーボードナビゲーション、フォーカス機能、およびデスクトップアプリケーションから既知の他の動作パターンを絶対に実装する必要があることを意味します。いくつかの高度なARIAテクニックを見つけることができます こちら 。
いつ使用すべきではありませんか？
はい、それは正しいです、このセクションが最初に来ます！ WAI-ARIAを使用する最初のルールは次のとおりです：絶対に必要な場合以外は使用しないでください！少ないWAI-ARIAネイティブHTMLウィジェットを使用することでより多くのことが期待できます。従うべきいくつかのルールがあります。それらを確認できます here 。
ARIAとは？
ARIAは、ドキュメント用のマークアップ言語であるHTMLを使用してユーザーインターフェイス（UI）を構築するアクセシビリティ問題に対処する方法として登場しました。 HTMLには、ドキュメント（P、h3、UL、TABLE）を扱うための非常に多くの機能が含まれていますが、A、INPUT、BUTTONなどの基本的なUI要素のみが含まれています。 Windowsおよびその他のオペレーティングシステムは、（支援技術）ATがUIコントロールの機能にアクセスできるようにするAPIをサポートしています。 Internet Explorerやその他のブラウザーはネイティブHTML要素をアクセシビリティAPIにマップしますが、htmlコントロールはデスクトップオペレーティングシステムで一般的なコントロールほどリッチではなく、現代のWebアプリケーションには十分ではありません。カスタムコントロールはhtml要素を拡張してリッチを提供できます最新のWebアプリケーションに必要なUI。 ARIAが登場する前は、ブラウザはこの余分な機能をアクセシビリティAPIまたはATに公開する方法がありませんでした。この問題の典型的な例は、クリックハンドラーを画像に追加することです。マウスユーザーにはクリック可能なボタンのように見えるものが作成されますが、それでもキーボードまたはATユーザーには単なる画像です。
解決策は、開発者がUIセマンティクスを使用してHTMLを拡張できる一連の属性を作成することでした。カスタム機能を持ち、ARIA属性を使用してこれらの機能をアクセシビリティAPIにマッピングするHTML要素のグループを表すARIA用語は、「ウィジェット」です。また、ARIAは、作成者がコンテンツ自体の役割を文書化する手段を提供します。これにより、ATがコンテンツの代替ナビゲーションメカニズムを構築し、全文を読んだり繰り返したりするよりもはるかに使いやすくなりますリンクのリスト。
単純なケースでは、ARIAを使用するのではなく、ネイティブHTMLコントロールを使用してスタイルを設定することをお勧めします。車輪やチェックボックスを再発明する必要はありません。
幸いなことに、ARIAマークアップは、メインストリームユーザーの動作を変更することなく、既存のサイトに追加できます。これにより、Webサイトまたはアプリケーションの変更とテストのコストが大幅に削減されます。
ARIAに関して他の質問をしました。しかし、この質問には内容がより有望に見えます。それらを共有したい
ARIAとは何ですか？
さまざまな閲覧習慣や身体障害を持つユーザーがWebサイトにアクセスできるようにすることに努力すれば、ロールとaria- *属性を認識できるでしょう。 WAI-ARIA（Accessible Rich Internet Application）は、障害のある人が識別し、正常に対話できるように、動的なWebコンテンツとアプリケーションを定義する方法を提供する方法です。これは、ドキュメントまたはアプリケーションの構造を定義するロールを介して、またはウィジェットのロール、関係、状態、またはプロパティを定義するaria- *属性を介して行われます。
HTML5アプリケーションのアクセシビリティを高めるために、仕様ではARIAの使用をお勧めします。セマンティックHTML5要素を使用する場合、対応するロールを設定する必要があります。
そしてこれをご覧ください you tube video ARIA live.