【注意】この文書にはより新しいバージョンが存在します: WCAG 2.1 達成方法集

WCAG 2.0 達成方法集

Skip to Content (Press Enter)

-

ARIA4: ユーザインターフェース コンポーネントの役割 (role) を明示するために、WAI-ARIA ロールを使用する

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

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

適用 (対象)

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

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

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

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

解説

この達成方法の目的は、WAI-ARIA Definition of Roles で定義されたいずれかの非抽象の値を持つ role 属性を用いて要素のロールを定義することである。WAI-ARIA 仕様は、各ロールについて、他のロールとどのように関係するか、どのようなステート及びプロパティがあるかといった、参考となる説明を提供している。リッチインターネットアプリケーションが新しいユーザインタフェースウィジェットを定義する際、ロールを公開することで、利用者がウィジェット及びウィジェットと対話する方法を理解できるようになる。

事例

事例 1: 単純なツールバー

WAI-ARIA Authoring Practices には、三つのボタンを含むツールバーのデモがある。div 要素は "toolbar" のロールを持ち、img 要素は "button" のロールを持つ:


    <div role="toolbar"
      tabindex="0" 
      id="customToolbar" 
      onkeydown="return optionKeyEvent(event);"
      onkeypress="return optionKeyEvent(event);"
      onclick="return optionClickEvent(event);"
      onblur="hideFocus()"
      onfocus="showFocus()"
      > 
      <img src="img/btn1.gif" 
           role="button" 
           tabindex="-1" 
           alt="Home" 
           id="b1" 
           title="Home">
      <img src="img/btn2.gif" 
           role="button" 
           tabindex="-1" 
           alt="Refresh" 
           id="b2" 
           title="Refresh">
     <img src="img/btn3.gif" 
           role="button" 
           tabindex="-1" 
           alt="Help" 
           id="b3" 
           title="Help"> 
 </div>  
                        

Authoring Practices のツールバーパターンは、ツールバーの実装例を提供している。

事例 2: ツリーウィジェット

WAI-ARIA Authoring Practices には、ツリーウィジェットのデモがある。ツリーとその構造を識別するためのロール "tree"、"treeitem"、"group" に注意。コードを単純化して抜粋したものは以下のとおり:


<ul role="tree" tabindex="0">
  <li role="treeitem">Birds</li>
  <li role="treeitem">Cats
    <ul role="group">
      <li role="treeitem">Siamese</li>
      <li role="treeitem">Tabby</li>
    </ul>
  </li>
  <li role="treeitem">Dogs
    <ul role="group">
      <li role="treeitem">Small Breeds
        <ul role="group">
          <li role="treeitem">Chihuahua</li>
          <li role="treeitem">Italian Greyhound</li>
          <li role="treeitem">Japanese Chin</li>
        </ul>
      </li>
      <li role="treeitem">Medium Breeds
        <ul role="group">
          <li role="treeitem">Beagle</li>
          <li role="treeitem">Cocker Spaniel</li>
          <li role="treeitem">Pit Bull</li>
        </ul>
      </li>
      <li role="treeitem">Large Breeds
        <ul role="group">
          <li role="treeitem">Afghan</li>
          <li role="treeitem">Great Dane</li>
          <li role="treeitem">Mastiff</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

Authoring Practices のツリービューパターンは、ツリーの実装例を提供している。

参考リソース

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

訳注: 「WAI-ARIA 1.1 Authoring Practices」は、正しくは「WAI-ARIA Authoring Practices 1.1」となる。

(今のところ、なし。)

検証

手順

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

  1. role 属性の値が、WAI-ARIA 仕様で定義された値に由来する非抽象ロールのいずれかであることを確認する。

  2. ユーザインタフェースコンポーネントの特性がロールで記述されていることを確認する。

期待される結果

この達成方法が「十分な達成方法」の一つである場合、この手順や期待される結果を満たしていなければ、それはこの達成方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の達成方法によってその達成基準が満たされていることもありうる。