ARIA と非ネイティブ HTML セマンティクスの概要
これまで、フォーカス、キーボードのサポート、組み込みセマンティクスを提供するため、ネイティブ 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 では不可能なウィジェット タイプの要素を作成できます。
- たとえば、支援技術 API にのみ公開されるラベルや説明テキストを追加できます。
<button aria-label="screen reader only label"></button>
- ARIA は、特定の領域を制御するカスタム スクロールバーなど、標準の親/子接続を拡張する要素間のセマンティック関係を表現できます。
<div role="scrollbar" aria-controls="main"></div>
<div id="main">
. . .
</div>
- ARIA はページの一部を「ライブ」にして、変更されたときに直ちに支援技術に通知できます。
<div aria-live="polite">
<span>GOOG: $400</span>
</div>
ARIA システムの核となる機能の一つに、ロールのコレクションがあります。ユーザー補助の用語におけるロールは、特定の UI パターンの簡略的なインジケーターに相当します。ARIA は、HTML 要素の role 属性を介して使用できるパターンの語彙を提供します。
前の例で role="checkbox" を適用したときは、要素が「チェックボックス」パターンに従うよう支援技術に指示していました。つまり、チェック状態（オン / オフ）が設定され、標準の HTML チェックボックス要素と同様に、マウスまたはスペースバーを使用して状態を切り替えることができます。
実際、スクリーン リーダーを使用する場面ではキーボード操作が目立つため、カスタム ウィジェットの作成時に role 属性を常に tabindex 属性と同じ場所に適用することは非常に重要です。そうすることで、キーボード イベントを適切な場所に移動し、要素にフォーカスが移ったときにその役割が正確に伝えられます。
ARIA 仕様には、role 属性に使用できる値の分類と、それらのロールと組み合わせて使用できる、関連する ARIA 属性が記載されています。これは、ARIA のロールと属性が連携する仕組みと、ブラウザや支援技術でサポートされる使用方法に関する信頼できる情報源として最適です。
ただし、この仕様は非常に複雑です。まずは、利用可能な ARIA のロールとプロパティを使用するためのベスト プラクティスについて説明している ARIA オーサリング プラクティス ドキュメントをご覧になることをおすすめします。
ARIA は、HTML5 で使用可能なオプションを拡張するランドマーク ロールも提供しています。詳しくは、ランドマーク ロールの設計パターンの仕様をご覧ください。