web-dev-qa-db-fra.com

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 1000, le premier bouton est 1001 et le deuxième bouton est 1002. La deuxième zone de texte a un tabindex de 1003.

Lorsque j'appuie sur tab, l'onglet tabindex fonctionne correctement dans tous les navigateurs, à l'exception de Safari, où il passe immédiatement de la première zone de texte à la seconde, bien que l'option tabindex soit correctement définie. Des idées sur la façon d'éviter ce problème?

safariaccessibility
45
Dhana

Par défaut, l'accès par tabulation est désactivé dans safari (!). Pour l'activer, cochez l'option "Préférences> Avancées>. Appuyez sur pour sélectionner chaque élément d'une page".

124
graphicdivine

Rendre Safari et un Mac accessibles:

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

Pour que la tabulation fonctionne avec Safari: Préférences -> Avancé -> Appuyez sur la touche de tabulation pour mettre en surbrillance chaque élément sur une page (cochez cette case)

8
user3862605

Si vous écrivez votre propre page Web, je corrigerais écrire quelque chose avec un peu de jquery/javascript. C'est ce que j'ai utilisé sur le mien.

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

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

function fixTabulation () {
    /* This can be used to auto-assign tab-indexes, or
    #  commented out if it manual tab-indexes have
    #  already been assigned.
    */
    $('input, select, textarea').each(function(){
        $(this).attr('tabindex', Tab.i);
        Tab.i++;
        Tab.items++;
    });

    Tab.i = 0;

    /* We need to listen for any forward or backward Tab
    #  key event tell the page where to focus next.
    */
    $(document).on({
        'keydown' : function(e) {
            if (navigator.appVersion.match("Safari")) {
                if (e.keyCode == 9 && !e.shiftKey) { //Tab key pressed
                    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) { //Tab key pressed
                    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();
                }
            }
        }
    });

    /* We need to update Tab.i if someone clicks into
    #  a different part of the form.  This allows us
    #  to keep tabbing from the newly clicked input
    */
    $('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 Préférences Système, lol.

5
John Hadwin

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

Lorsque "mettre en surbrillance chaque élément sur une page" (voir la réponse par division graphique) est désactivé, vous pouvez utiliser cette fonction en appuyant sur Option (alt) + tab. 

Si vous ne le faites pas (et que l'option est désactivée), Safari utilisera par défaut tous les champs de formulaire (tels que l'entrée, la zone de texte, la sélection ...). Pour ces champs, il acceptera/considérera également un tabindex. Il va d'abord parcourir tous les éléments de formulaire avec un tabindex (dans l'ordre des index donnés), puis dans le reste des éléments de formulaire, dans l'ordre de leur définition en HTML.

Donc, si vous définissez tabindex = "1" (ou 1001) et "3" (ou 1003) pour deux éléments d’entrée, Safari mettra d’abord en évidence ce champ, puis les autres.

5
Zaphoid

La solution pour iOS contiendra les touches Option + Tab.

0
lesyk

Rencontré le même problème et a dû implémenter la navigation par onglet par programme. Heureusement, j'ai trouvé ce plugin jquery tabbable https://github.com/marklagendijk/jQuery.tabbable et vous en avez fait bon usage 

require('../../node_modules/jquery.tabbable/jquery.tabbable');
$(document).ready(() => {
  $(document).keydown((event) => {
    if (event.keyCode === 9) {
      window.$.tabNext();
      event.preventDefault();
    }
  });
});
0
Dan Ochiana