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

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

動作の仕組み

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

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

ステップ 1: 漏れ

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

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

次に、テストしたい要素を選択できます。デフォルトでは、当社のアルゴリズムを用いて類似の要素を「インテリジェントに」グループ化しています。ただし、ロールでグループ化するか、まったくグループ化されていない状態で表示するかを「Group by」コントロールを使用して選択できます。

ステップ 2: 正確性

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

アクセシブルネーム

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

ロール

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

状態

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

自動モードでの実行

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

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

AIの分析が始まる前に、自動的に検出されたものと、標準のインタラクティブ属性（ロール、タブインデックスなど）が付けられていないがインタラクティブである可能性がある追加の要素の両方を含む、ページ上で見つかったすべてのインタラクティブ要素が表示されます。

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

ステップ 2: AIが選択された要素を分析する

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

何をテストするか

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

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

FAQ

利用可能な「要素の状態」はそれぞれ何を意味していますか？

インタラクティブ要素IGTでテストできる各状態の詳細は以下の通りです。

無効

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

無効の例

無効な送信ボタン：

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

無効な入力フィールド：

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

押下

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

• "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"に設定します。

選択済みの例

role="tab"要素にaria-selectedを管理するシンプルなタブパネル:

<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 />