109 votes

Safari ignore tabindex

J'ai 2 boutons à côté d'une zone de texte et une autre zone de texte après les 2 boutons. Le tabindex pour la première zone de texte est de 1000, le premier bouton est de 1001 et le deuxième bouton est de 1002. La deuxième zone de texte a un tabindex de 1003.

Lorsque j'appuie sur la touche tabulation, le tabindex fonctionne correctement dans tous les navigateurs sauf dans Safari, où il passe immédiatement de la première zone de texte à la deuxième zone de texte bien que le tabindex ait été correctement défini. Des idées sur la manière de résoudre ce problème?

267voto

graphicdivine Points 6414

Par défaut, l'accès par onglet est désactivé dans Safari(!). Pour l'activer, vérifiez "Préférences > Avancé > Appuyez sur la touche Tab pour mettre en surbrillance chaque élément d'une page".

32voto

lesyk Points 2197

La solution pour iOS consistera à maintenir la touche Option + Tabulation.

23voto

user3862605 Points 11

Rendre Safari et un Mac accessible :

Tester sur un Mac : Préférences Système -> Clavier -> Raccourcis (onglet) -> Accès complet au clavier -> Tous les contrôles

Pour que le tabulation fonctionne sur Safari : Préférences -> Avancé -> Appuyer sur Tab pour mettre en surbrillance chaque élément d'une page (cocher cette option)

6voto

John Hadwin Points 114

Si vous écrivez votre propre page web, je vous recommande d'ajouter un peu de jquery/javascript. C'est ce que j'ai utilisé sur la mienne.

L'inconvénient est que vous empêchez le comportement par défaut de la touche tabulation sur la page, ce qui peut poser un problème d'accessibilité dans certaines situations. Mais je doute que ce soit un gros problème.

var Tab = {};
Tab.i = 1,
Tab.items = 0;

function fixTabulation () {
    /* Cela peut être utilisé pour attribuer automatiquement des index de tabulation, ou
    #  mis en commentaire si des index de tabulation manuels ont déjà été attribués.
    */
    $('input, select, textarea').each(function(){
        $(this).attr('tabindex', Tab.i);
        Tab.i++;
        Tab.items++;
    });

    Tab.i = 0;

    /* Nous devons écouter tout événement de pression de la touche Tab vers l'avant ou l'arrière
    #  pour indiquer à la page où se concentrer ensuite.
    */
    $(document).on({
        'keydown' : function(e) {
            if (navigator.appVersion.match("Safari")) {
                if (e.keyCode == 9 && !e.shiftKey) { //Touche Tab pressée
                    e.preventDefault();
                    Tab.i != Tab.items ? Tab.i++ : Tab.i = 1;
                    $('input[tabindex="' + Tab.i + '"], select[tabindex="' + Tab.i + '"], textarea[tabindex="' + Tab.i + '"]').not('input[type="hidden"]').focus();
                }
                if (e.shiftKey && e.keyCode == 9) { //Touche Tab pressée
                    e.preventDefault();
                    Tab.i != 1 ? Tab.i-- : Tab.i = Tab.items;
                    $('input[tabindex="' + Tab.i + '"], select[tabindex="' + Tab.i + '"], textarea[tabindex="' + Tab.i + '"]').not('input[type="hidden"]').focus();
                }
            }
        }
    });

    /* Nous devons mettre à jour Tab.i si quelqu'un clique dans
    #  une partie différente du formulaire. Cela nous permet
    #  de continuer le tabulation depuis l'entrée nouvellement cliquée.
    */
    $('input[tabindex], select[tabindex], textarea[tabindex]').not('input[type="hidden"]').focus(function(e) {
        Tab.i = $(this).attr('tabindex');
        console.log(Tab.i);
    });
}

$(document).ready(function() {
    fixTabulation();
});

Ce n'est pas une solution parfaite, mais c'est bien mieux que de dire à tous vos utilisateurs de modifier leurs paramètres Safari dans les Préférences Système, lol.

5voto

Zaphoid Points 18

J'ai essayé le suivant avec Safari 5.1.5. Je ne sais pas comment cela fonctionne avec les anciennes versions:

Lorsque "surligner chaque élément sur une page" (voir la réponse de graphicdivine) est désactivé, vous pouvez utiliser cette fonction en appuyant sur Option (alt) + tabulation.

Si vous ne le faites pas (et que l'option est désactivée), Safari passera par défaut entre tous les champs de formulaire (comme input, textarea, select...). Pour ces champs, il acceptera/considérera également un tabindex. Il passera d'abord par tous les éléments de formulaire avec un tabindex (dans l'ordre des indices donnés) puis par le reste des éléments de formulaire dans l'ordre de leur définition dans HTML.

Donc, si vous définissez un tabindex="1" (ou 1001) et "3" (ou 1003) pour deux éléments d'entrée, Safari se concentrera d'abord sur ces champs, puis sur les autres.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X