HTML5 ARIAとは何ですか？

HTML5 ARIAとは何ですか？実装方法がわかりません。

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>

role外側の<ul>要素の属性に注意してください。この属性は、ブラウザによる画面上でのマークアップのレンダリング方法には影響しません。ただし、ARIAをサポートするブラウザは、OS固有のアクセシビリティ情報をレンダリングされたUI要素に追加するため、スクリーンリーダーはそれをメニューとして解釈し、エンドユーザーが理解できる十分なコンテキスト（たとえば、明示的な「メニュー」音声ヒント）、それと対話することができます（たとえば、音声ナビゲーション）。

ARIAはAccessible Rich Internet Applicationsの略です。

WAI-ARIAは、開発者が支援技術で理解できる方法で、視覚的に豊富なユーザーインターフェイスの目的、状態、その他の機能を簡単に説明できる、非常に強力なテクノロジーです。WAI-ARIAは、ついにHTML 5仕様の現在のワーキングドラフトに統合されました。

そして、WAI-ARIAとは何か疑問に思っているのであれば、同じことです。

WAI-ARIAとARIAは同じものを指していることに注意してください。ただし、WAIの起源をWAI-ARIAを使用して確認する方が適切です。

WAI = Web Accessibility Initiative

その見た目から、ARIAは支援技術と主に画面読み上げに使用されます。

この記事を読めば、ほとんどの疑問は解消されます

http://www.w3.org/TR/aria-in-html/

それは何ですか？

WAI-ARIAは「Web Accessibility Initiative – Accessible Rich Internet Applications」の略です。これは、WebサイトまたはWebアプリケーションのセマンティクスを強化して、視覚障害者向けのスクリーンリーダーなどの支援技術がHTMLに固有ではない特定のことを理解するのに役立つ一連の属性です。公開される情報は、リンクまたはボタンをアクティブにしただけでアイテムが表示または非表示になったことをスクリーンリーダーに伝えるような単純なものから、メニューシステム全体や階層ツリービューのような複雑なウィジェットまでさまざまです。

これは、レイアウトやブラウザの機能に影響を与えないHTML 4.01以降のマークアップにロールと状態属性を適用することによって実現されますが、支援技術の追加情報を提供します。

WAI-ARIAの1つの重要な要素は役割属性です。ブラウザーに、使用されているHTML要素は実際には要素名が示すものではなく、別の要素であることを支援技術に伝えるように指示します。元々はdiv要素にすぎませんが、このdiv要素はオートコンプリートアイテムのリストのコンテナになる場合があります。その場合は、「listbox」の役割が適切です。同様に、そのコンテナーdivの子であり、単一のオプション項目を含む別のdivは、「オプション」の役割を取得する必要があります。2つのdivが、役割を介して、まったく異なる意味。ロールは、一般的に使用されるデスクトップアプリケーションに対応するものをモデルにしています。

これの例外は、問題の要素の実際の意味を変更せずに、ドキュメント内のこの特定の場所に関する情報を提供するドキュメントランドマークロールです。

2番目のコーナーストーンは、WAI-ARIAの状態とプロパティです。それらは、何かが折りたたまれたり、展開されたり、フォーム要素が必要になったり、ポップアップメニューが添付されたりするなど、特定のネイティブまたはWAI-ARIA要素の状態を定義します。これらは多くの場合動的で、Webアプリケーションのライフサイクル全体で値を変更し、通常はJavaScriptを介して操作されます。

それは何ですか？

WAI-ARIAは、ブラウザの動作に影響を与えることを意図していません。たとえば、実際のボタン要素とは異なり、「ボタン」の役割を注いだdivは、キーボードのフォーカス機能、スペースまたはEnterが押されたときの自動クリックハンドラー、およびその他の固有のプロパティを提供しませんボタン。ブラウザ自体は、「ボタン」の役割を持つdivがボタンであることを認識せず、アクセシビリティAPI部分のみが認識します。

結果として、これは、キーボードナビゲーション、フォーカス機能、およびデスクトップアプリケーションから既知の他の動作パターンを自分で実装する必要があることを意味します。いくつかの高度なARIAテクニックがここにあります。

いつ使用しないのですか？

はい、そうです、このセクションが最初に来ます！WAI-ARIAを使用する最初のルールは次のとおりです。絶対に必要な場合を除いて、使用しないでください。WAI-ARIAが少ないほど、ネイティブHTMLウィジェットの使用を信頼できるほど、より優れています！従うべきルールがいくつかあります。ここで確認できます。

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ユーザーには単なる画像です。

ソリューションは、開発者がHTMLをUIセマンティクスで拡張できるようにする一連の属性を作成することでした。カスタム機能を持ち、ARIA属性を使用してこれらの関数をアクセシビリティAPIにマッピングするHTML要素のグループのARIA用語は、「ウィジェット」です。ARIAは、作成者がコンテンツ自体の役割を文書化する手段も提供します。これにより、ATはコンテンツの代替ナビゲーションメカニズムを構築でき、全文を読んだり、リンクのリストを反復するよりもはるかに使いやすくなります。

単純なケースでは、ARIAを使用するよりも、ネイティブHTMLコントロールを使用してスタイルを設定する方がはるかに好ましいことを覚えておくことが重要です。必要がない場合は、ホイールやチェックボックスを再発明しないでください。

さいわい、ARIAマークアップは、メインストリームユーザーの動作を変更せずに既存のサイトに追加できます。これにより、Webサイトまたはアプリケーションの変更とテストのコストが大幅に削減されます。

ARIAに関する他の質問をしました。しかし、この質問の内容はより有望に見えます。それらを共有したい

ARIAとは何ですか？

さまざまな閲覧習慣や身体障害を持つユーザーがWebサイトにアクセスできるようにすることに力を注ぐと、役割とaria- *属性に気付くでしょう。WAI-ARIA（Accessible Rich Internet Applications）は、動的なWebコンテンツおよびアプリケーションを定義して、障害を持つ人々がそれを識別して正常に対話できるようにする方法を提供する方法です。これは、ドキュメントまたはアプリケーションの構造を定義するロールを通じて、またはウィジェットのロール、関係、状態、またはプロパティを定義するaria- *属性を通じて行われます。

HTML5アプリケーションをよりアクセシブルにするために、仕様ではARIAの使用をお勧めします。セマンティックHTML5要素を使用する場合、対応する役割を設定する必要があります。

そして、これはARIAライブのチューブビデオです。