html - divを「タブ可能」にするにはどうすればよいですか?

Question

div 要素であるボタンがあり、ユーザーがキーボードのタブ キーを押してボタン間を移動できるようにしたいと考えています。テキストをアンカー タグでラップしようとしましたが、うまくいかないようです。

誰にも解決策がありますか？

Answer 1

要素にtabindex属性を追加します。div

例：

<div tabindex="1">First</div>
<div tabindex="2">Second</div>

steveax のコメントによると、タブ オーダーがページ内の要素の位置からずれないようにする場合は、次のように設定しtabindexます0。

<div tabindex="0">First</div>
<div tabindex="0">Second</div>

Answer 2

jqueryを使用して、キーを押すだけで要素をタブ可能およびクリック可能にする

仮定

• タブ不可、クリック不可のタイプで、クリック可能にする必要があるすべての要素にはonclick属性があります (これはクラスまたは他の属性に変更できます)。
• すべての要素は同じ型です。divを使用します。
• あなたはjqueryを使用しています

サンプル HTML:

...

<div onclick="clicked(this)">Button 1</div>
<div onclick="clicked(this)">Button 2</div>
<div onclick="clicked(this)">Button 3</div>

...

Jquery コード: これは、ページが読み込まれたときに実行されるコードです。HTML ページで実行する必要があります。

$(()=>{
    // make divs with an onclick attribute tabbable/clickable
    $('div[onclick]')
        .attr('tabindex', '0')                     // Add tab indexes
        .keypress((evt)=>{
            var key = evt.key;
            evt.preventDefault();                  // Ensure all default keypress
                                                   // actions are not used
            if (key === ' ' || key === 'Enter') {  // Only send click events for Space
                                                   // or Enter keys
                evt.currentTarget.click();         // Run the click event for element
            }
        });
});

ここで実際の例を見つけることができます。