WCAG 2.0 達成方法集

Skip to Content (Press Enter)

-

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

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

これらの達成方法(参考)の使用法及び、それらがWCAG 2.0 達成基準(規定)とどのように関係するかに関する重要な情報については、WCAG 達成基準の達成方法を理解するを参照のこと。適用(対象)セクションは、その達成方法の範囲について説明しており、特定の技術に関する達成方法があるからといって、WCAG 2.0 を満たすコンテンツを作成する際に、常にその技術が使用可能であるわけではない。

適用(対象)

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

これは、次の達成基準に関連する達成方法である:

ユーザエージェント及び支援技術によるサポート

ARIA5 に関するユーザエージェントサポートノート (英語)を参照のこと。WAI-ARIA技術ノートも参照。

解説

この達成方法の目的は、ユーザインタフェースコンポーネントのステート、プロパティ及び値を公開するために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. ユーザインタフェースコンポーネントが状態を変更する際に、ステート及びプロパティの値が現在の状態を反映するように更新されている。

判定基準

この達成方法が「十分な達成方法」の一つである場合、このチェックポイントや判定基準を満たしていなければ、それはこの達成方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の達成方法によってその達成基準が満たされていることもありうる。