ARIA の概要

ARIA と非ネイティブ HTML セマンティクスの概要

Alice Boxhall
Alice Boxhall
Dave Gash
Dave Gash
Meggin Kearney
Meggin Kearney

これまでのところ、フォーカス、キーボード サポート、組み込みセマンティクスを提供するため、ネイティブ HTML 要素の使用を推奨してきましたが、単純なレイアウトやネイティブ HTML では機能しない場合もあります。たとえば、現在のところ、一般的な UI 構造であるポップアップ メニュー向けに標準化された HTML 要素はありません。また、「ユーザーがこのことをできるだけ早く知る必要がある」といったセマンティックな特性を提供する HTML 要素もありません。

このレッスンでは、HTML だけでは表現できないセマンティクスを表現する方法について説明します。

Web Accessibility Initiative による Accessible Rich Internet Apps 仕様(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 アクセシビリティ ツリーを変更、拡張することで機能します。

標準の DOM アクセシビリティ ツリー。
ARIA 拡張アクセシビリティ ツリー。

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 はページの一部を「ライブ」にして、変更があったときに直ちに支援技術に通知できます。
    <div aria-live="polite">
      <span>GOOG: $400</span>
    </div>

ARIA システムの核となる機能の一つは、ロールの集合です。ユーザー補助の観点では、ロールは特定の UI パターンの簡略的なインジケーターです。ARIA は、HTML 要素の role 属性を介して使用できるパターンの語彙を提供します。

前の例で role="checkbox" を適用したとき、要素が「チェックボックス」パターンに従うように支援技術に伝えました。つまり、標準の HTML チェックボックス要素と同様に、オン状態(オン状態またはオフ状態)となり、マウスやスペースバーを使用して状態を切り替えることができます。

実際、キーボード操作はスクリーン リーダーの使用において顕著に表れるため、カスタム ウィジェットを作成する際には、常に tabindex 属性と同じ場所に role 属性を適用することが非常に重要です。これにより、キーボード イベントを適切な場所に移動し、フォーカスが要素にフォーカスしたときにその役割が正確に伝えることができます。

ARIA 仕様には、role 属性と、それらのロールと組み合わせて使用できる関連 ARIA 属性に使用できる値の分類が記述されています。これは、ARIA ロールと属性がどのように連携し、ブラウザや支援技術でサポートされる方法で使用できるかに関する、信頼できる情報源として最適です。

使用可能なすべての ARIA ロールのリスト。

ただし、この仕様は非常に複雑であるため、まずは ARIA オーサリング プラクティスのドキュメントから始めることをおすすめします。このドキュメントでは、使用可能な ARIA ロールとプロパティを使用するためのベスト プラクティスについて説明しています。

ARIA には、HTML5 で利用できるオプションを拡張するランドマーク ロールも用意されています。詳しくは、ランドマーク ロールの設計パターンの仕様をご覧ください。