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 では作成できないウィジェットタイプの要素を作成できます。
- たとえば、支援技術 API にのみ公開されるラベルや説明テキストを ARIA で追加できます。
<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 のチェックボックス要素と同様に、チェックボックスがオンの状態（オンかオフかは問わない）になり、マウスまたはスペースバーを使用して状態を切り替えることができます。
実際、スクリーン リーダーの使用においてキーボード操作が非常に重要であるため、カスタム ウィジェットを作成するときに、role 属性が常に tabindex 属性と同じ場所に適用されるようにすることが非常に重要です。これにより、キーボード イベントが正しい場所に送信され、要素にフォーカスが当たるとその役割が正確に伝わります。
ARIA 仕様には、role 属性に使用できる分類と、そのロールと組み合わせて使用できる関連 ARIA 属性について記載されています。これは、ARIA の役割と属性がどう連動するのか、また、ブラウザや支援技術でサポートされる使用方法について確実な情報を得るための最良の情報ソースです。
ただし、仕様は非常に詳細です。ARIA オーサリング プラクティスのドキュメントには、使用可能な ARIA のロールとプロパティを使用する際のベスト プラクティスが記載されています。
ARIA では、HTML5 で使用できるオプションを拡張するランドマークの役割も提供しています。詳細については、ランドマークの役割のデザイン パターンの仕様をご覧ください。