フォームのキーボード サポートを分析する

この記事では、 Inspect ツールと [イベント リスナー ] タブを使用して、要素を使用するボタンがあるデモ ページでのキーボード サポートの欠如を <div> 分析します。

アクセシビリティ テストのデモ Web ページの [寄付] フォームでは、金額ボタンと [寄付] ボタンにキーボードでアクセスできません。 これをテストするには:

1. アクセシビリティ テストのデモ Web ページ を新しいウィンドウまたはタブで開きます。

2. [ 寄付に関するヘルプ ] セクションで、[ その他 ] テキスト ボックスをクリックして、それに焦点を当てます。

3. Tab キーまたは Shift キーを押しながら Tab キーを押して、[寄付] ボタン、50 ボタン、100 ボタン、または 200 ボタンにフォーカスを移動します。 ボタンにはキーボードでアクセスできません。

寄付フォームをデバッグするには、フォーカスのスタイル設定の欠如が Issue ツールなどの自動テスト ツールの問題としてフラグが設定されていない理由を理解する必要があります。 この例では、ボタンは HTML 要素を使用して <div> 実装されます。これらのツールではフォーム コントロールとして認識されません。

検査ツールを使用してキーボードサポートの欠如を分析する

Inspect ツールを使用して、デモ ページでキーボードサポートの欠如を分析するには:

1. アクセシビリティ テストのデモ Web ページ を新しいウィンドウまたはタブで開きます。

2. Web ページ内の任意の場所を右クリックし、[ 検査] を選択します。

3. DevTools の左上隅にある [ 検査 ] () ボタンをクリックして、ボタンが強調表示 (青) になるようにします。

4. 50、100、200 の寄付ボタンにカーソルを合わせます。 検査ツールがオーバーレイとして Web ページに表示されます。 Inspect オーバーレイの キーボードフォーカス可能な 行は、灰色のクロスアウト円で示されているように、寄付金額ボタンにキーボードでアクセスできないことを示しています。

   

   ボタンには名前がなく、 の役割 generic があります。これは、ボタンが <div> 支援技術にアクセスできないことを意味します。

5. 検査ツールがアクティブな場合、Web ページで、[寄付] ボタンの上にある [その他の入力] テキスト ボックスを選択します。 [要素] ツールが開き、Web ページの DOM ツリーが表示されます。 要素 <input id="freedonation" class="smallinput"> が選択されています。

   <div class="donationrow">
       <div class="donationbutton">50</div>
       <div class="donationbutton">100</div>
       <div class="donationbutton">200</div>
   </div>
   <div class="donationrow">
       <label for="freedonation">Other</label>
       <input id="freedonation" class="smallinput">
   </div>
   <div class="donationrow">
       <div class="submitbutton">Donate</div>
   </div>
   

   [その他] <label> テキスト ボックスの and <input> 要素の使用は有効です。つまり、[その他] ラベルが入力テキスト ボックスと正しくリンクされていることを意味します。 <input>テキスト ボックスにもキーボードでアクセスできます。 フォームのマークアップの残りの部分では、CSS でスタイルを設定するのは簡単ですが、支援技術には意味がなく、キーボードでアクセスできない要素が使用 <div> されています。

[イベント リスナー] タブを使用してキーボードサポートの欠如を分析する

フォームの機能は JavaScript を使用して作成され、次のように [ イベント リスナー ] タブを確認してテストできます。

1. アクセシビリティ テストのデモ Web ページ を新しいウィンドウまたはタブで開きます。

2. Web ページの [ その他 ] テキスト ボックスを右クリックし、[ 検査] を選択します。 [要素] ツールが開き<input id="freedonation" class="smallinput">、要素が選択されます。

3. DOM ツリーで要素<input id="freedonation" class="smallinput">がまだ選択されている状態で、[スタイル] タブの右側にある [イベント リスナー] タブを選択し、イベント リスナーをclick展開します。

   

4. リンクをクリックします buttons.js:18 。 [ソース] ツールが開き、適用された JavaScript が表示されます。

   

   適用された JavaScript のコード 一覧を次に示します。

   donations.addEventListener('click', e => {
     let t = e.target;
     if (t.classList.contains('donationbutton')) {
       if (currentbutton) { currentbutton.classList.remove('current'); }
       t.classList.add('current');
       currentbutton = t;
       e.preventDefault();
     }
     if (t.classList.contains('submitbutton')) {
       alert('Thanks for your donation!')
     }
   })
   

ボタンを click 使用するときにイベント リスナーを使用してコードを実行することをお勧めします。これは、マウス ポインターとキーボード操作の両方でイベントが発生するため click です。 ただし、[ 寄付 ] ボタンは HTML 要素を <div> 使用して実装されます。これはキーボードではフォーカスできません。 イベントは click 、マウスまたは一部のキーボードで使用できる特別なボタンなど、イベントの click 別のソースを使用する場合にのみ実行されます。

これは、要素がネイティブに提供する機能を再作成するために JavaScript が追加された従来の <button> 例です。 要素を使用してボタンの機能を <div> シミュレートすると、アクセスできないエクスペリエンスが生成されました。