ユーザインタフェース コンポーネントの状態 (state) を明示するために、WAI-ARIA ステート及びプロパティ属性を使用する

達成方法に関する重要な情報

この達成方法 (参考) の使用法と、この達成方法が WCAG 2.1 達成基準 (規定) とどのように関係するのかに関する重要な情報については、WCAG 達成基準の達成方法を理解するを参照のこと。適用 (対象) のセクションは、その達成方法の範囲について説明しており、特定の技術に関する達成方法の存在は、その技術があらゆる状況で WCAG 2.1 を満たすコンテンツを作成するために使用できることを意味するものではない。

適用 (対象)

Accessible Rich Internet Applications (WAI-ARIA) をサポートするウェブコンテンツ技術。

これは、達成基準 4.1.2 (名前 (name)・役割 (role)・値 (value) )(G10: アクセシブルな変化の通知をサポートするウェブコンテンツ技術を用いて、コンポーネントを作成するを満たす方法として十分)に関連する達成方法である。

解説

この達成方法の目的は、ユーザインタフェースコンポーネントのステート、プロパティ及び値を公開するために WAI-ARIA ステート及びプロパティを使用することであり、その結果それらが支援技術によって読み込まれて設定できるようになり、また、支援技術はそれらの値の変更を通知される。WAI-ARIA 仕様は、各属性の規範的記述、及びユーザインタフェース要素がサポートするロールを提供する。リッチインターネットアプリケーションが新しいユーザインタフェースウィジェットを定義する際、ステート及びプロパティ属性を公開することで、利用者がウィジェットを理解でき、そしてウィジェットと対話できるようになる。

事例

事例 1: トグルボタン

button ロールを持つウィジェットが aria-pressed 属性を実装する場合、トグルボタンとして動作する。aria-pressed が true である場合、ボタンは「押されている」状態になる。aria-pressed が false である場合、押されていないことになる。この属性が存在しない場合、ボタンは単純なコマンドボタンとなる。

以下のスニペットは Open Ajax Accessibility Examples の例 38 からの引用であり、太字のテキストを選択するトグルボタンに対する WAI-ARIA マークアップを示している:

  <li id="bold1"
    class="toggleButton"
    role="button"
    tabindex="0"
    aria-pressed="false"
    aria-labelledby="bold_label"
    aria-controls="text1">
    <img src="http://www.oaa-accessibility.org/media/examples/images/button-bold.png" alt="bold text" align="middle">
</li>

この li 要素は、"button" ロールと "aria-pressed" 属性を持つ。以下は、この例において "aria-pressed" 属性の値を更新する Javascript の抜粋である:

                             /**
   * togglePressed() toggles the aria-pressed atribute between true or false
   *
   * @param ( id object) button to be operated on
   *
   * @return N/A
   */
  function togglePressed(id) {

    // reverse the aria-pressed state
    if ($(id).attr('aria-pressed') == 'true') {
      $(id).attr('aria-pressed', 'false');
    }
    else {
      $(id).attr('aria-pressed', 'true');
    }
  }
                            
このボタンは、OpenAjax アライアンスのサイトで、working example of Example 38 - Toolbar using inline images for visual state の動作例の一部として提供されている。

事例 2: スライダー

slider ロールをもつウィジェットは、利用者に指定した範囲内から値を選択させる。スライダーは、スライダーの大きさやつまみの位置によって、現在の値、及びとり得る値の範囲を表す。これらのスライダーのプロパティは、属性 aria-valueminaria-valuemax、及び aria-valuenow で表される。

以下のスニペットは Open Ajax Accessibility Examples の例 32 からの引用であり、JavaScript で作成されたスライダーに対する WAI-ARIA マークアップを示している。Javascript が属性 aria-valuemin、aria-valuemax、及び aria-valuenow を設定することに注意:

   var handle = '<img id="' + id + '" class="' + (this.vert == true ? 'v':'h') +'sliderHandle" ' +
    'src="http://www.oaa-accessibility.org/media/examples/images/slider_' + (this.vert == true ? 'v':'h') + '.png" ' + 'role="slider" ' +
    'aria-valuemin="' + this.min +
    '" aria-valuemax="' + this.max +
    '" aria-valuenow="' + (val == undefined ? this.min : val) +
           '" aria-labelledby="' + label +
           '" aria-controls="' + controls + '" tabindex="0"></img>';

以下はこの例のための Javascript の抜粋であり、スライダーのつまみの値が変更された場合に "aria-valuenow" 属性値を更新する:

 slider.prototype.positionHandle = function($handle, val) {
    ...
   // Set the aria-valuenow position of the handle
  $handle.attr('aria-valuenow', val);
   ...
  }

このスライダーは、OpenAjax アライアンスのサイトで、working example of Example 32 - Slider の動作例の一部として提供されている。

参考リソース

この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。

検証

手順

The WAI-ARIA specification, Section 5.3, Categorization of Roles は、各ロールに対し、必須であったり、継承されたりするステート及びプロパティを定義している。

WAI-ARIA role 属性を使用するユーザインタフェースコンポーネントの場合:

  1. ロールに対して必須とされるステート及びプロパティが存在することを確認する。
  2. 必須でなく、サポートもされず、継承もされない WAI-ARIA ステート又はプロパティが存在しないことを確認する。
  3. ユーザインタフェースコンポーネントが状態を変更するときに、ステート及びプロパティの値が現在の状態を反映するように更新されていることを確認する。

期待される結果

  • 1.、2. 及び 3. の結果が真である。