インタラクティブ要素インテリジェントガイドテスト

インタラクティブ要素IGTは、IGTを再実行せずに複数の状態をテストすることをサポートします。インタラクティブ要素とは、ボタン、リンク、入力、メニューなど、ユーザーがウェブページ上で操作するすべてのものです。

仕組み

最初に行うことは、テストしたい状態にページを設定することです。その後、いくつかの簡単な質問が、ページ上の各インタラクティブ要素に必要なアクセシビリティテストを案内します。

テストを実行する準備ができたら「START」をクリックしてください。

ステップ1: 欠落

まず、IGTはページ（またはコンポーネント）をスキャンして、すべてのインタラクティブ要素を見つけます。機械学習が有効になっている場合（設定ページを参照）、インタラクティブ属性（役割、タブインデックスなど）でマークされていないが実際にはインタラクティブである要素を検出します。

この最初の質問では、見逃されたインタラクティブ要素を選択するよう求められます。何も欠落していなければ、単に「NEXT」をクリックしてください。

次に、テストしたい要素を選択できます。デフォルトでは、これらの要素は類似した要素をグループ化する当社のアルゴリズムを使用して「知的に」グループ化されています。ただし、「Group by」コントロールを使用して、役割ごとにグループ化したり、まったくグループ化せずに表示することも可能です。

ステップ2: 精度

テストする要素については、要素のアクセシブルネーム、役割、状態を確認するよう求められます。アクセシブルネームは、フォームフィールドのラベルのように、インタラクティブ要素の目的を伝えるために使用されます。役割は、ユーザーがどの制御とインタラクトしているかを示します（ボタン、タブ、リンクなど）。状態は、ユーザーが支援技術を使用してどの制御が現在どのような状態にあるかを知らせます（選択済み/未選択、チェック済み/未チェックなど）。

アクセシブルネーム

アクセシブルネームがインタラクティブ要素の目的を正確に説明していることを確認するよう求められます。

役割

次に、IGTが役割を検出できる場合、それが事前に選択されます。ドロップダウンから利用可能な役割を選択して、検出された役割とは異なる場合にその選択を上書きすることができます。

状態

同様に、IGTは事前選択された状態を表示します。状態が関連しない要素の場合、「適用不可」と状態を保持してください。アクセシブルネーム、役割、状態が正しく伝達されていることを確認した後、同じ要素の他の状態をテストできます。インタラクティブ要素をテストしたい追加の状態に置いてください（例えば、チェックボックスをチェックする、タブを選択するなど）。準備ができたら「CHECK ELEMENT'S STATE」をクリックしてください。IGTは新しい状態を検出し、その状態が正しく伝えられているかを確認できます。これは、テストのために選択されたすべての要素に対して繰り返されます。すべての選択された要素とその状態のテストが終わったら、「NEXT」を選択してください。

自動モードでの実行

自動IGTモード が有効になっている場合、AIが分析を開始する前に要素選択ステップが含まれます。これにより、テストの範囲を直接制御できます。

ステップ1: テストする要素を選択

AIの分析が始まる前に、ページ上のすべてのインタラクティブ要素が表示されます——自動的に検出された要素と、標準的なインタラクティブ属性（役割、タブインデックスなど）でマークされていないがAIがインタラクティブと見なす追加の要素の両方が含まれます。

テストに含めたい要素を選択し、次にクリックしてください Next して進んでください。

ステップ2: AIが選択した要素を分析

AIは選択した各要素のアクセシブルネーム、役割、状態を自動的に評価します。分析が完了すると、AIの結果を確認し、修正を加え、テストを完了するレビュー画面に移動します。詳細は 自動IGT を参照して、結果の確認、修正、およびテストの完了をご覧ください。

テスト内容

インタラクティブ要素IGTは次の項目をテストします：

• 有効なアクセシブルネーム
• 有効な役割
• 有効な状態

よくある質問

利用可能な「要素の状態」の各意味とは？

以下は、インタラクティブ要素IGTでテストできる状態の内訳です。

無効化

要素が編集不可または操作不可であることを示します。無効化されると、要素は編集もフォーカスもできません。ネイティブのHTML disabled プロパティ（推奨）または aria-disabled="true"により要素を無効化できます。

無効にされた例

無効な送信ボタン：

<button type="submit" disabled>Submit</button>

無効な入力フィールド：

<form>
  <label for="email">Email</label>
  <input type="text" id="email" disabled />
</form>

押下

トグルボタンが現在「押された」状態であることを示します。要素の押下状態は aria-pressed 属性を通じて管理されます。この属性には3つのサポートされている値があります： aria-pressed：

• "true"：トグルボタンが現在押されていることを示す
• "false"：トグルボタンが現在押されていないことを示す
• "mixed"：トグルボタンによって制御されている複数のアイテムの値がすべて同じではないことを示す（トライステート）

押下の例

現在押されていない一時停止ボタン：

<button aria-pressed="false">Pause</button>

現在押されているミュートボタン：

<button aria-pressed="true">Mute</button>

展開

要素またはそれが制御する他のグループ要素が現在展開されていることを示します。要素の展開状態は aria-expanded 属性を通じて管理されます。 aria-expanded 要素（またはそれが制御するグループ要素）が展開されているときに "true" 属性の値が設定されるべきです。 "false"。

展開の例

展開されたボタン：

<button aria-expanded="true">options</button>

選択

要素が現在「選択」状態にあることを示します。要素の選択状態は aria-selected 属性を通じて管理されます。 aria-selected 属性の値は、要素が選択されているときに "true" に設定されるべきです。選択されていないときは "false" に、トライステートチェックボックスが混合された状態のときは "mixed" に設定されるべきです。

選択の例

シンプルなタブパネル管理 aria-selected における role="tab" 要素：

<div role="tablist" aria-label="Simple Tabs">
  <div
    role="tab"
    aria-selected="true"
    aria-controls="panel-1"
    id="tab-1"
    tabindex="0"
  >
    Tab 1
  </div>
  <div
    role="tab"
    aria-selected="false"
    aria-controls="panel-2"
    id="tab-2"
    tabindex="-1"
  >
    Tab 2
  </div>
</div>
<div id="panel-1" role="tabpanel" tabindex="0" aria-labelledby="tab-1">
  <p>Panel 1 content...</p>
</div>
<div id="panel-2" role="tabpanel" tabindex="0" aria-labelledby="tab-2" hidden>
  <p>Panel 2 content...</p>
</div>

チェック済み

要素が現在「チェック済み」状態であることを示します。通常はチェックボックス、ラジオボタン、その他のウィジェットに使用されます。要素のチェック状態はHTMLの checked 属性（ネイティブチェックボックスと一緒に使用される）または aria-checked 属性を使用して管理できます。 aria-checkedを使用する場合、属性の値は、要素がチェックされているときに "true" に、チェックされていないときは "false" に設定されるべきです。

チェック済みの例

チェックされたネイティブチェックボックス：

<input id="terms" type="checkbox" checked />
<label for="terms">I agree to the terms and conditions</label>

チェックされていないARIAチェックボックス：

<span
  role="checkbox"
  id="checkbox"
  aria-checked="false"
  tabindex="0"
  aria-labelledby="checkbox-label"
></span>
<label id="checkbox-label">Subscribe to newsletter</label>

読み取り専用

要素が編集不可能であるが、操作可能でフォーカス可能なことを示します。要素の読み取り専用状態はHTMLの readonly 属性または aria-readonly 属性を使用します。 aria-readonlyを使用する場合、属性の値は "true" に設定する必要があります。要素が読み取り専用の状態のとき、 "false" 読み取り専用でない場合は異なります。

読み取り専用の例

読み取り専用の入力:

<label for="first-name">First Name:</label>
<input name="first-name" type="text" value="Gene" readonly />