J'ai des boutons qui sont des éléments div et je veux les faire pour qu'il soit possible pour l'utilisateur d'appuyer sur la touche de tabulation de son clavier et de se déplacer entre eux. J'ai essayé d'encapsuler leur texte dans des balises d'ancrage, mais cela ne semble pas fonctionner.

Quelqu'un a-t-il une solution?

Ajoutez des tabindexattributs à votrediv éléments.

Exemple:

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

Selon le commentaire de steveax, si vous ne voulez pas que l'ordre de tabulation diffère de l'endroit où se trouve l'élément dans la page, définissez le tabindexsur 0:

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

pour ceux qui sont intéressés, en plus de la réponse acceptée, vous pouvez ajouter la jquery suivante pour faire le changement de style div lorsque vous y accédez, et également gérer Entrée et Espace pour déclencher un clic (alors votre gestionnaire de clics fera le reste)

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

Je suis sûr que quelqu'un en a fait un plugin jq $ (). MakeTabStop

Ajoutez l' tabindex="0"attribut à chaque div que vous voulez tabbable. Utilisez ensuite les pseudo-classes CSS: hover et: focus, par exemple pour signifier à l'utilisateur de l'application que le div est au point et cliquable, par exemple. Utilisez JavaScript pour gérer le clic.

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>

Rendre les éléments tabables et cliquables avec une pression de touche à l'aide de jquery

Hypothèses

• Tous les éléments qui sont d'un type non tabbable, non cliquable et doivent être cliquables ont un attribut onclick (cela peut être changé en une classe ou un autre attribut)
• Tous les éléments sont du même type; J'utiliserai des divs.
• Vous utilisez jquery

Exemple html:

...

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

...

Code Jquery: C'est le code qui s'exécutera lorsque la page sera chargée. Il doit s'exécuter sur votre page 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
            }
        });
});

Vous pouvez trouver un exemple fonctionnel ici .