Safari ignoriert Tabindex

Ich habe 2 Schaltflächen neben einem Textfeld und ein weiteres Textfeld nach den 2 Schaltflächen. Der Tabindex für das erste Textfeld ist 1000, der erste Button ist 1001 und der zweite Button ist 1002. Das zweite Textfeld hat einen Tabindex von 1003.

Wenn ich die Tabulatortaste drücke, funktioniert der Tabindex in allen Browsern einwandfrei, mit Ausnahme von Safari, wo er sofort vom ersten zum zweiten Textfeld wechselt, obwohl der Tabindex richtig eingestellt wurde. Irgendwelche Ideen, wie dieses Problem verhindert werden kann?

Standardmäßig ist der Tab-Zugriff in Safari (!) Deaktiviert. Aktivieren Sie zum Aktivieren "Einstellungen> Erweitert> Drücken Sie die Tabulatortaste, um jedes Element auf einer Seite hervorzuheben".

Safari und einen Mac zugänglich machen:

Testen auf einem Mac: Systemeinstellungen -> Tastatur -> Verknüpfungen (Registerkarte) -> Vollständiger Tastaturzugriff -> Alle Steuerelemente

Damit Tabbing in Safari funktioniert: Einstellungen -> Erweitert -> Drücken Sie die Tabulatortaste, um jedes Element auf einer Seite hervorzuheben (überprüfen Sie dies).

Die Lösung für iOS hält die Wahltaste + die Tabulatortaste gedrückt.

Ich habe Folgendes mit Safari 5.1.5 versucht. Ich weiß nicht, wie es mit älteren Versionen funktioniert:

Wenn "Markieren jedes Elements auf einer Seite" (siehe Antwort von graphicdivine) deaktiviert ist, können Sie diese Funktion verwenden, indem Sie Option (Alt) + Tab drücken.

Wenn Sie dies nicht tun (und die Option deaktiviert ist), wird Safari standardmäßig durch alle Formularfelder (wie Eingabe, Textbereich, Auswahl ...) geführt. Für diese Felder wird auch ein Tabindex akzeptiert / berücksichtigt. Zuerst werden alle Formularelemente mit einem Tabindex (in der Reihenfolge der angegebenen Indizes) und dann die restlichen Formularelemente in der Reihenfolge ihrer Definition in HTML durchlaufen.

Wenn Sie also einen tabindex = "1" (oder 1001) und "3" (oder 1003) für zwei Eingabeelemente definieren, fokussiert Safari zuerst diese Felder und dann die anderen.

Wenn Sie Ihre eigene Webseite schreiben, würde ich etwas mit ein bisschen JQuery / Javascript schreiben. Das habe ich bei mir verwendet.

Der Nachteil besteht darin, dass Sie das Standardverhalten der Tabulatortaste auf der Seite verhindern, was in einigen Situationen ein größeres Problem für die Barrierefreiheit darstellen kann. Aber ich bezweifle es.

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

Dies ist keine perfekte Lösung, aber es ist viel besser, als allen Benutzern zu sagen, dass sie ihre Safari-Einstellungen in den Systemeinstellungen ändern sollen, lol.

Stieß auf das gleiche Problem und musste die Tab-Navigation programmgesteuert implementieren. Glücklicherweise hat dieses jquery tabbable-Plugin https://github.com/marklagendijk/jQuery.tabbable gefunden und hier verwendet

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

Für diejenigen wie mich, die auch nach Möglichkeiten suchen, dies im Browser zu aktivieren: Klicken Sie einfach auf das Wort "Safari" oben links auf dem Bildschirm und wählen Sie dann "Einstellungen"> "Erweitert"> "Registerkarte drücken" (wie unter https://stackoverflow.com angegeben) / a / 1914496/11339541 )