要約

支援技術のユーザーにカスタムコントロールをアクセシブルにするには、ARIAのrole（役割）、state（状態）、property（プロパティ）を使用する必要があります。

テクニック

• role（役割）、state（状態）、property（プロパティ）を使用してインタラクションを行えるようにします。[[WCAG-4.1.2]]

• ARIAのrole（役割）、state（状態）、property（プロパティ）が指定された要素に対して有効であることを確認します。[[WCAG-4.1.1]]

• すべての親/子の役割の要件が満たされていることを確認します。[[WCAG-4.1.1]]

• コントロールがフォーカスされただけではイベントを起動しないでください。[[WCAG-3.2.1]]

• 予期しないイベント起動は、ユーザーが値を入力したり設定を変更した際に行います。[[WCAG-3.2.1]]

例

<img src="controls/start.png"
    id="start"
    role="button"
    tabindex="0"
    alt="Start"/>

<img src="controls/play.png"
    id="start"
    alt="Start"
    role="button"
    aria-disabled="false"
    tabindex="0"
    onclick="controlPlayback('start')"/>

<img src="controls/stop.png"
    id="stop"
    alt="Stop"
    role="button"
    aria-disabled="true"
    tabindex="0"/>

<script>
<![CDATA[
function controlPlayback(action) {

  var isStart = (action == 'start') ? true : false;
  
  var start_image = isStart ? 
           'controls/play-disabled.png' : 
           'controls/play.png';
  
  var stop_image = isStart ? 
           'controls/stop.png' : 
           'controls/stop-disabled.png';
  
  var start = document.getElementById('start');
    start.setAttribute('aria-disabled', 
              !start.getAttribute('aria-disabled'));
    start.setAttribute('disabled', 
              !start.getAttribute('disabled'));
    start.onclick = isStart ? 
            null : 
            function () { controlPlayback('start'); };
    start.setAttribute('src', start_image);
  
  var stop = document.getElementById('stop');
    stop.setAttribute('aria-disabled', 
              !stop.getAttribute('aria-disabled'));
    stop.setAttribute('disabled', 
              !stop.getAttribute('disabled'));
    stop.onclick = isStart ? 
            function () { controlPlayback('stop'); } : 
            null;
    stop.setAttribute('src', stop_image);
   
   if (isStart) {
    start.removeAttribute('onkeypress');
    stop.setAttribute('onkeypress', "if (event.keyCode==32||event.keyCode==13) { controlPlayback('stop'); }");
   }
   
   else {
    stop.removeAttribute('onkeypress');
    start.setAttribute('onkeypress', "if (event.keyCode==32||event.keyCode==13) { controlPlayback('start'); }");
   }
  
  alert(isStart ? 'Playback started!' : 'Playback stopped!');
}
]]>
</script>

次のボタンは、このコードの動作を示しています。

解説

HTMLには数多くのネイティブコントロール（例：input 、 button 、 progress）が用意されていますが、開発者は、多くの場合に、スタイル制限の回避や特殊な機能の導入のために、同等のコントロールを独自に作成しなければなりません。

カスタムコントロールを作成すると、機能を動作させるためのJavaScriptがデフォルトでは支援技術に反映されないために、深刻なアクセシビリティの問題が発生しかねません。たとえば、テキストや画像の範囲などの非インタラクティブ要素が動的に作成されると、支援技術を通じると、それらをアクティブ化できることを認識できません。また、アクションが発生しても、コンテンツの変更はアクセシビリティツリーに反映されません（つまり、新しいコンテンツは利用できません）。

こうしたスクリプトにおけるアクセシビリティの問題は、Webの開発初期に問題となっていましたが、ARIAのrole（役割）、state（状態）、property（プロパティ）の導入により、多くの問題が軽減されました。カスタムコントロールにこれらの属性を追加すると、支援技術を通じてその存在が認識され、コントロールの現在の状態に関する情報がユーザーに伝わるようになります。

次のリストでは、各属性タイプの目的について説明します。

役割（Role）

ARIA role属性は、カスタムコントロールの機能を説明するために使用されます（たとえば、画像がボタンのように機能することを示すなど）。

カスタムコントロールには、その目的を支援技術に通知するためのrole（役割）が必要です。これにより、支援技術は、予想される使用方法に応じて要素をユーザーに提示できます。

現在サポートされているroleのリストについては、ARIA仕様をご覧ください。

状態（State）

state属性は、コントロールの現在の状態（現在チェックされているかどうか、非表示になっているかどうかなど）を識別します。

ユーザーがコントロールやコンテンツと対話するときに、State属性がスクリプトによって維持されなければなりません。そうしないと、ユーザーが機能を使用できなくなる可能性があります（たとえば、音量を下げることができない、重要なコンテンツを表示できないなど）。

現在サポートされているstateのリストについては、ARIA仕様をご覧ください。

プロパティ（Property）

プロパティ属性は、コントロールが許可する最小値や最大値、グループ内での位置など、コントロールに関するメタ情報を識別します。

stateとは異なり、プロパティは通常、コンテンツが読み込まれるときに一回だけ設定されます。

現在サポートされているプロパティのリストについては、ARIA仕様をご覧ください。

もちろん、カスタムコントロールをアクセシブルにするには、正しい役割（role）、状態（state）、プロパティ（property）が適用されているのを確認するだけでは不十分です。コンテンツ製作者は、コントロールがフォーカスや入力を受け取ったときなどに、コンテキスト内で予期しない変更がトリガーされないようにする必要があります。

関連リンク

• WAI-ARIA —Roleモデル
• WAI-ARIA —サポートされているstateとproperty
• WAI-ARIA の概要
• WAI-ARIA オーサリング プラクティス — WAI-ARIA を使用してアクセシブルなウィジェットを構築するための一般的な手順