ユーザインタフェース コンポーネントの状態 (state) を明示するために、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');
    }
  }
                            

事例 2: スライダー

slider ロールをもつウィジェットは、利用者に指定した範囲内から値を選択させる。スライダーは、スライダーの大きさやつまみの位置によって、現在の値、及びとり得る値の範囲を表す。これらのスライダーのプロパティは、属性 aria-valuemin、aria-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 の動作例の一部として提供されている。