Safari ignorando tabindex

Question

Tengo 2 botones al lado de un cuadro de texto y otro cuadro de texto después de los 2 botones. El tabindex para el primer cuadro de texto es 1000, el primer botón es 1001 y el segundo es 1002. El segundo cuadro de texto tiene un tabindex de 1003.

Cuando presiono tab, el tabindex funciona bien en todos los navegadores excepto en Safari, donde se mueve inmediatamente desde el primer cuadro de texto al segundo cuadro de texto, aunque el tabindex se ha configurado correctamente. ¿Alguna idea sobre cómo prevenir este problema?

Answer 1

Por defecto, el acceso a pestañas está deshabilitado en safari (!). Para habilitarlo, seleccione "Preferencias> Avanzado> Presione la pestaña para resaltar cada elemento en una página".

Answer 2

Intenté lo siguiente con Safari 5.1.5. No sé cómo funciona con versiones anteriores:

Cuando "resaltar cada elemento en una página" (ver respuesta por graphicdivine) está deshabilitado, puede usar esa función presionando Opción (alt) + tabulación.

Si no lo hace (y la opción está deshabilitada), Safari tabulará por defecto todos los campos de formulario (como input, textarea, select ...). Para este campo, también aceptará/considerará un tabindex. Primero, tabulará todos los elementos del formulario con un tabindex (en el orden de los índices dados) y luego a través del resto de los elementos del formulario en el orden de su definición en HTML.

Así que si define un tabindex = "1" (o 1001) y "3" (o 1003) para dos elementos de entrada, Safari primero enfocará estos campos y luego los demás.

Answer 3

Haciendo Safari y un accesible Mac:

Prueba en un Mac: Preferencias del sistema -> Teclado -> Funciones rápidas (TAB) -> Teclado completo de acceso -> Todos los controles

Para el tabulador para trabajar en Safari: Preferencias -> Avanzado -> Presione la pestaña para resaltar cada elemento en una página (marque esto)

Answer 4

Si está escribiendo su propia página web, arreglaría escribir algo con un poco de jquery/javascript. Esto es lo que he usado en el mío.

El inconveniente es que evita el comportamiento predeterminado de la tecla de tabulación en la página, lo que puede ser un problema mayor para la accesibilidad en algunas situaciones. Pero lo dudo.

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

esto no es una solución perfecta, pero es bastante mejor que decir a todos sus usuarios a ir a cambiar sus ajustes de Safari en las preferencias del sistema, lol.

Answer 5

Encontré el mismo problema y tuve que implementar la navegación por tabulación programáticamente. por suerte encontramos este jQuery tabbable complemento https://github.com/marklagendijk/jQuery.tabbable y poner a buen uso, aquí está

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