256

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

4

5 に答える 5

223

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…&lt;/li>
      ...
    </ul>
  </li>
  ...
</ul>

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

于 2010-08-13T06:08:50.263 に答える
64

ARIAはAccessibleRichInternetApplicationsの略です。

WAI-ARIAは非常に強力なテクノロジーであり、開発者は、支援技術で理解できる方法で、視覚的に豊富なユーザーインターフェイスの目的、状態、およびその他の機能を簡単に説明できます。WAI-ARIAは、HTML5仕様の現在の草案にようやく統合されました。

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

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

WAI = Web Accessibility Initiative

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

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

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

于 2010-08-13T05:56:10.670 に答える
24
于 2016-04-02T09:37:02.263 に答える
14

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サイトまたはアプリケーションの変更とテストのコストが大幅に削減されます。

于 2015-04-17T14:06:26.487 に答える
7

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

ARIAとは何ですか？

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

HTML5アプリケーションをよりアクセスしやすくするために、仕様ではARIAの使用が推奨されています。セマンティックHTML5要素を使用する場合は、対応する役割を設定する必要があります。

そして、ARIAライブのこのユーチューブビデオをご覧ください。

于 2013-01-30T12:01:37.377 に答える