ARIA と非ネイティブ HTML セマンティクスの概要
これまで Google は、ネイティブ HTML 要素の使用を推奨してきました。フォーカス、キーボードのサポート、組み込みのセマンティクスを利用できるからです。しかしここからは、シンプルなレイアウトとネイティブ HTML では実行できないジョブが登場します。たとえば、現在のところ、使用頻度が非常に高い UI 構造のポップアップ メニュー向けに標準化された HTML 要素はありません。また、「ユーザーはこの情報を速やかに知る必要がある」といった、セマンティックな特性を提供する HTML 要素もありません。
このレッスンでは次に、HTML 自体で表現できないセマンティクスを表現する方法について説明します。
Web Accessibility Initiative の Accessible Rich Internet Applications 仕様（WAI-ARIA または ARIA）は、ネイティブ HTML では管理できないユーザー補助に関する問題を解決するのに適しています。この仕様を活用することによって、ユーザー補助ツリーの中で要素が扱われる方法を変更するための属性を指定できます。例を見てみましょう。
次のスニペットで、カスタム チェックボックスとしてリストアイテムを使用します。CSS の「checkbox」クラスは、要素に必要な視覚特性を提供します。
<li tabindex="0" class="checkbox" checked>
Receive promotional offers
</li>
これは、視覚に障がいのないユーザーにはうまく動作しますが、スクリーン リーダーでは要素がチェックボックスであることを伝えられないため、低視力のユーザーは要素にまったく気づかない可能性があります。
しかし ARIA 属性を使用すれば、スクリーン リーダーが適切に解釈できるように、要素に不足している情報を提供できます。ここでは、role 属性と aria-checked 属性を追加し、要素を明示的にチェックボックスとして示し、デフォルトでチェックがオンになるよう指定しています。これで、リスト アイテムがアクセシビリティ ツリーに追加され、スクリーン リーダーで正しくチェックボックスとして報告されます。
<li tabindex="0" class="checkbox" role="checkbox" checked aria-checked="true">
Receive promotional offers
</li>
ARIA は、標準の DOM アクセシビリティ ツリーを変更および拡張することで機能します。
ARIA を使用すれば、ページのどの要素のアクセシビリティ ツリーでも微妙な（または大幅な）変更ができますが、ARIA が変更するのはアクセシビリティ ツリーのみです。ARIA は、要素の継承の動作を拡張しません。要素をフォーカス可能にしたり、キーボード イベントリスナにフォーカスを渡したりすることはありません。これは依然として、開発側のタスクです。
デフォルトのセマンティクスを再定義する必要はありません。この点を理解しておくことが重要です。用途にかかわらず、標準の HTML <input type="checkbox"> 要素は、追加の role="checkbox" ARIA 属性がなくても正しくアナウンスされます。
また注意が必要なのは、特定の HTML 要素では、ARIA の役割や属性が要素で実行する動作に対して制限があるということです。たとえば、標準の <input
type="text"> 要素は、追加した役割や属性が適用されない場合があります。
詳しくは、HTML における ARIA の仕様をご覧ください。
ARIA が提供するその他の機能を見てみましょう。
ARIA の機能
チェックボックスの例でご覧になったとおり、ARIA は既存の要素のセマンティクスを変更したり、ネイティブのセマンティクスが存在しない要素にセマンティクスを追加したりできます。また、HTML にまったく存在しない、メニューやタブ パネルといったセマンティクス パターンも表現できます。多くの場合、ARIA を使用すると、プレーン HTML では作成できないウィジェットタイプの要素を作成できます。
- たとえば ARIA は、支援技術 API だけに提供される追加のラベルや説明テキストを追加できます。
<button aria-label="screen reader only label"></button>
- ARIA は、特定の領域を制御するカスタム スクロールバーなど、標準の親/子接続を拡張する要素の間で、セマンティクスの関係を表現できます。
<div role="scrollbar" aria-controls="main"></div>
<div id="main">
. . .
</div>
- ARIA はページの一部を "live" に指定し、その領域が変更されたら即座に支援技術に知らせることができます。
<div aria-live="polite">
<span>GOOG: $400</span>
</div>
ARIA システムの主要な側面の 1 つは、ロールのコレクションです。ユーザー補助機能の観点で、role は特定の UI パターンを簡潔に表す指標になります。ARIA には、任意の HTML 要素で role 属性を使用して表現できるさまざまなパターンの定義があります。
前の例で role="checkbox" を適用したとき、その要素が「checkbox」パターンに従う必要があることを支援技術に伝えています。つまり、チェックの状態（オンまたはオフ）が存在し、標準 HTML の checkbox 要素のように、その状態をマウスやスペースバーで切り替えられることを保証しています。
実際、スクリーン リーダーの使用においてキーボード操作が非常に重要であるため、カスタム ウィジェットを作成するときに、role 属性が常に tabindex 属性と同じ場所に適用されるようにすることが非常に重要です。これにより、キーボード イベントが正しい場所に送信され、要素にフォーカスが当たるとその役割が正確に伝わります。
ARIA 仕様には、role 属性に使用できる分類と、そのロールと組み合わせて使用できる関連 ARIA 属性について記載されています。これは、ARIA の役割と属性がどう連動するのか、また、ブラウザや支援技術でサポートされる使用方法について確実な情報を得るための最良の情報ソースです。
ただし、この仕様は非常に細かいため、使用を開始するにあたっては ARIA Authoring Practices ドキュメントのほうが読みやすいでしょう。これは、使用可能な ARIA の役割とプロパティを使用する際のベスト プラクティスについて説明しています。
ARIA では、HTML5 で使用できるオプションを拡張するランドマークの役割も提供しています。詳細については、ランドマークの役割のデザイン パターンの仕様をご覧ください。