[解決済み】HTML5 ARIAとは何ですか？

質問

HTML5 ARIAとは何ですか？実装の仕方がよくわかりません。

どのように解決するのですか？

WAI-ARIA は、アクセシブルなウェブアプリのサポートを定義する仕様です。マークアップの拡張機能（主に HTML5 要素の属性）を定義しており、ウェブアプリの開発者は、スクリーンリーダーなどの支援技術にさまざまな要素のセマンティクスに関する追加情報を提供するために、この拡張機能を使用することができます。もちろん、ARIA が機能するためには、マークアップを解釈する HTTP ユーザーエージェントが ARIA をサポートする必要がありますが、この仕様は、下位レベルのユーザーエージェントがウェブアプリケーションの機能に影響を与えることなく ARIA 固有のマークアップを安全に無視できるような方法で作成されています。

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固有のアクセシビリティ情報を追加し、スクリーンリーダーがメニューとして解釈でき、エンドユーザーが理解するのに十分な文脈（例えば、明示の "menu" 音声ヒント）で読み上げ、対話（例えば、音声ナビゲーション）できるようにします。