Div öğeleri olan düğmelerim var ve bunları kullanıcının klavyesindeki sekme tuşuna basıp bunlar arasında hareket etmesini sağlayacak şekilde yapmak istiyorum. Metinlerini bağlantı etiketlerine sarmayı denedim ama işe yaramıyor.

Çözümü olan var mı?

Öğelerinize tabindexnitelikler ekleyin div.

Misal:

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

Eğer eleman sayfasında olduğu sapmasına sekme sırasını istemiyorsanız steveax en Başına yorum, set tabindexiçin 0:

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

İlgilenenler için, kabul edilen cevaba ek olarak, sekmeye geçtiğinizde div stilini değiştirmek için aşağıdaki jquery'yi ekleyebilir ve ayrıca bir tıklamayı tetiklemek için Enter ve Space tuşlarını kullanabilirsiniz (daha sonra tıklama işleyiciniz gerisini halleder)

$(document).on('focus', '.button',function(){
    $(this).css('border','1px dotted black')
});
$(document).on('keyup', '.button',function(e){
    if(e.which==13 || e.which==32)
        $(this).click()
});

Eminim birisi bunu bir jq eklentisine $ () dönüştürmüştür. MakeTabStop

Ekle tabindex="0"Eğer tabbable istediğiniz her div niteliği. Ardından CSS sözde sınıflarını kullanın: hover ve: focus, örneğin uygulama kullanıcısına div'in odakta ve tıklanabilir olduğunu belirtmek için. Tıklamayı işlemek için JavaScript kullanın.

var doc = document;
var providers = doc.getElementsByClassName("provider");

for (var i = 0; i < providers.length; i++) {
    providers[i].onclick = function() {
      console.log(this.innerHTML);
    };
}

.provider {
    flex: 0 1 auto;
    align-self: auto;
    width: 256px;
    height: 48px;
    margin-top: 12px;
    margin-right: 12px;
    text-align: center;
    line-height: 48px;
    
    text-transform: uppercase;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 10%;
    background-color: gray;
}

.provider:hover{
  cursor: pointer;
}

.provider:focus{
    -webkit-box-shadow: 0px 2px 8px 2px rgba(0,0,0,0.4);
    -moz-box-shadow: 0px 2px 8px 2px rgba(0,0,0,0.4);
    box-shadow: 0px 2px 8px 2px rgba(0,0,0,0.4);
}

<h4>Click in this area first then press tab</h4>
<div id="email" class="provider" tabindex="0">email</div>
<div id="facebook" class="provider" tabindex="0">facebook</div>
<div id="github" class="provider" tabindex="0">github</div>
<div id="google" class="provider" tabindex="0">google</div>
<div id="twitter" class="provider" tabindex="0">twitter</div>

Jquery kullanarak tuşa basarak öğeleri sekilebilir ve tıklanabilir hale getirin

Varsayımlar

• Sekilebilir olmayan, tıklanamayan türde olan ve tıklanabilir olması gereken tüm öğelerin bir onclick özniteliği vardır (bu, bir sınıfa veya başka bir özniteliğe değiştirilebilir)
• Tüm öğeler aynı türdendir; Div'leri kullanacağım.
• Jquery kullanıyorsun

Örnek html:

...

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

...

Jquery kodu: Bu, sayfa yüklendiğinde çalışacak olan koddur. HTML sayfanızda çalışması gerekiyor.

$(()=>{
    // 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
            }
        });
});

Burada çalışan bir örnek bulabilirsiniz .