HTML5アリアとは何ですか？

StackOverflow https://stackoverflow.com/questions/3474099

  •  28-09-2019
  •  | 
  •  

質問

HTML5アリアとは何ですか？私はそれを実装する方法を理解していません。

役に立ちましたか？

解決

ワイアリア アクセス可能なWebアプリのサポートを定義する仕様です。マークアップ拡張機能（主にHTML5要素の属性として）を定義します。これは、Webアプリ開発者が使用して、さまざまな要素のセマンティクスに関する追加情報をスクリーンリーダーなどの支援テクノロジーに提供できます。もちろん、ARIAが動作するためには、マークアップを解釈するHTTPユーザーエージェントがARIAをサポートする必要がありますが、Specは、ダウンレベルのユーザーエージェントが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をサポートするブラウザは、レンダリングされたUI要素にOS固有のアクセシビリティ情報を追加するため、スクリーンリーダーはメニューとして解釈し、エンドユーザーが理解するのに十分なコンテキストで声を出して読み取ることができます（たとえば、明示的です。 「メニュー」オーディオヒント）と対話することができます（たとえば、音声ナビゲーション）。

他のヒント

ARIAは、アクセス可能なリッチインターネットアプリケーションの略です。

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

そして、もしあなたがワイ・アリアが何なのか疑問に思っているなら、それは同じことです。

Wai-AriaとAriaという用語は、同じことを参照してください。ただし、Wai-Ariaを使用してWaiの起源を認める方が正しいです。

WAI = Webアクセシビリティイニシアチブ

その見た目から、Ariaは支援技術と主にスクリーンリーディングに使用されます。

この記事を読むと、あなたの疑問のほとんどがクリアされます

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

それは何ですか？

Wai-Ariaは略です 「Webアクセシビリティイニシアチブ - アクセス可能なリッチインターネットアプリケーション」. 。これは、WebサイトまたはWebアプリケーションのセマンティクスを強化して、視覚障害者のスクリーンリーダーなどの支援技術を支援するための属性のセットであり、HTMLのネイティブではない特定のものを理解するのに役立ちます。公開されている情報は、リンクまたはボタンをアクティブにすると、より多くのアイテムを表示または隠しただけで、メニューシステム全体や階層ツリービューのように複雑なウィジェットまで、スクリーンリーダーに伝えるのと同じくらい簡単なものからです。

これは、レイアウトやブラウザの機能に関係のないが、支援技術の追加情報を提供するHTML 4.01以降のマークアップに役割と状態属性を適用することによって達成されます。

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

これの例外はドキュメントの画期的な役割です。これは、問題の要素の実際の意味を変更しないが、この特定の場所に関する情報をドキュメント内の情報を提供します。

2番目のコーナーストーンは、ワイアリアの状態と特性です。それらは、何かが崩壊または拡張されているか、フォーム要素が必要であるかなど、特定のネイティブまたはWAI-ARIA要素の状態を定義します。多くの場合、これらは動的であり、Webアプリケーションのライフサイクル全体で値を変更し、通常はJavaScriptを介して操作されます。

そうではありませんか？

WAI-ARIAは、ブラウザの動作に影響を与えることを意図していません。たとえば、実際のボタン要素とは異なり、「ボタン」の役割を注ぐDIVは、キーボードのフォーカビリティ、スペースまたは入力が押されているときの自動クリックハンドラー、およびボタン。ブラウザ自体は、「ボタン」の役割を持つDIVがボタンであることを知らず、そのアクセシビリティAPI部分のみが行われます。

結果として、これは、自分でデスクトップアプリケーションから知られているキーボードナビゲーション、フォーカシビリティ、およびその他の行動パターンを絶対に実装する必要があることを意味します。いくつかの高度なARIA技術を見つけることができます ここ.

いつ使うべきか？

はい、それは正しいです、このセクションが最初に来ます！ Wai-Ariaを使用する最初のルールは次のとおりです。 絶対にする必要がない限り、それを使用しないでください！ wai-ariaが少なくなり、ネイティブのHTMLウィジェットを使用することを期待できるほど、より良いです！従うべきルールがいくつかあります、あなたはそれらをチェックすることができます ここ.

アリアとは何ですか？

Ariaは、ユーザーインターフェイス（UI）を構築するためにドキュメントであるHTMLを対象としたマークアップ言語を使用するアクセシビリティの問題に対処する方法として浮上しました。 HTMLには、ドキュメント（P、H3、UL、テーブル）を扱う非常に多くの機能が含まれていますが、A、入力、ボタンなどの基本的なUI要素のみが含まれています。 Windowsやその他のオペレーティングシステムは、UIコントロールの機能にアクセスできるように（支援技術）を可能にするAPIをサポートしています。 Internet Explorerおよびその他のブラウザは、ネイティブHTML要素をアクセシビリティAPIにマッピングしますが、HTMLコントロールはデスクトップオペレーティングシステムで一般的なコントロールほどリッチではなく、最新のWebアプリケーションには十分ではありません。カスタムコントロールはHTML要素を拡張してリッチを提供できます最新のWebアプリケーションに必要なUI。 Ariaの前に、ブラウザはこの余分な豊かさをアクセシビリティAPIまたはATにさらす方法がありませんでした。この問題の典型的な例は、画像にクリックハンドラーを追加することです。マウスユーザーにとってクリック可能なボタンのように見えるものを作成しますが、それでもキーボードやユーザーの画像です。

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

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

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

Ariaに関する他の質問をいくつか実行しました。しかし、この質問に対してコンテンツはより有望に見えます。それらを共有したい

アリアとは何ですか？

さまざまな閲覧習慣や身体障害を持つユーザーがWebサイトにアクセスできるようにするために努力した場合、役割とARIA-*属性を認識する可能性があります。 WAI-ARIA（アクセス可能なリッチインターネットアプリケーション）は、障害を持つ人々がそれを特定して正常に対話できるように、動的なWebコンテンツとアプリケーションを定義する方法を提供する方法です。これは、ドキュメントまたはアプリケーションの構造を定義する役割、またはWidget-Role、関係、状態、またはプロパティを定義するAria-*属性を通じて行われます。

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

そして、これを見てください あなたのチューブビデオ アリアライブのために。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top