Prevenire la scheda per scorrere attraverso la barra degli indirizzi

Question

Mi rendo conto che questo è probabilmente un problema di accessibilità che potrebbe essere lasciato in pace, ma mi piacerebbe capire se è possibile impedire alla scheda di visitare la barra degli indirizzi nel ciclo di tabulazione.

La mia applicazione ha un altro metodo per passare in rassegna le aree di input, ma molti nuovi utenti cercano istintivamente di utilizzare la scheda e non funziona come previsto.

Answer 1

È possibile controllare l'ordine di tabulazione (e quali elementi dovrebbero essere in grado di mettere a fuoco) con il globale tabindex attribute.

Tuttavia, non è possibile impedire agli utenti di collegarsi a un altro contesto non sotto il controllo della pagina (ad esempio la barra degli indirizzi del browser) con questo attributo. (Potrebbe essere possibile in combinazione con JavaScript, però.)

Per un caso di utilizzo del genere (diabolico!), È necessario esaminare i trap della tastiera .

WCAG 2.0 ha la linea guida: 2.1.2 No Keyboard Trap. In Understanding SC 2.1.2 si possono trovare "Tecniche e fallimenti" per questa linea guida:

• F10: Failure of Success Criterion 2.1.2 and Conformance Requirement 5 due to combining multiple content formats in a way that traps users inside one format type
• FLASH17: Providing keyboard access to a Flash object and avoiding a keyboard trap
• G21: Ensuring that users are not trapped in content

Così forse si ottiene alcune idee che come una tale trappola sarebbe possibile .

Answer 2

È possibile utilizzare Javascript e acquisire l'evento "keydown" sull'elemento con il "tabindex" più alto. Se l'utente preme il tasto "TAB" (event.keyCode == 9) senza il tasto "Maiusc" (event.shiftKey == false), quindi imposta semplicemente lo stato attivo sull'elemento con il tabindex più basso.

Dovreste anche fare la stessa cosa in senso inverso per l'elemento con il tabindex più basso. Cattura l'evento "keydown" per questo elemento. Se l'utente preme il tasto "TAB" (event.keyCode == 9) CON il tasto "Maiusc" (event.shiftKey == true), quindi imposta lo stato attivo sull'elemento con il tabindex più alto.

Ciò impedirebbe effettivamente che la barra degli indirizzi venga mai messa a fuoco utilizzando il tasto TAB. Sto usando questa tecnica nel mio attuale progetto.

Non dimenticare di annullare l'evento keydown se si preme la combinazione di tasti corretta! Con JQuery è "event.preventDefault()". In Javascript standard, credo che semplicemente "restituisci falso".

Ecco un frammento JQuery carichi sto usando ...

$('#dos-area [tabindex=' + maxTabIndex + ']').on('keydown', function (e) { 
     if (e.keyCode == 9 && e.shiftKey == false) { 
      e.preventDefault(); 
      $('#dos-area [tabindex=1]').focus(); 
     } 
    }); 
    $('#dos-area [tabindex=1]').on('keydown', function (e) { 
     if (e.keyCode == 9 && e.shiftKey == true) { 
      e.preventDefault(); 
      $('#dos-area [tabindex=' + maxTabIndex + ']').focus(); 
     } 
    }); 

Anche tenere a mente che l'impostazione tabindex = 0 ha risultati indesiderati sul l'ordine in cui si concentrano le cose. Ricordo sempre (per i miei scopi) che tabindex è un indice basato su 1.

Answer 3

Ho usato due piccoli elementi invisibili sul tabindex 1 e sull'ultimo tabindex. Aggiungi un onFocus per questi due: L'elemento con tabindex 1 dovrebbe focalizzare l'ultimo elemento reale, quello con il tabindex massimo dovrebbe focalizzare il primo elemento reale. Assicurati di mettere a fuoco il primo elemento reale su Dom: caricato.

Answer 4

Ho utilizzato la soluzione m-albert e funziona.Ma nel mio caso non controllo le proprietà tabindex. La mia intenzione è focalizzata su una barra degli strumenti nella parte superiore della pagina (primo controllo) quando l'utente lascia l'ultimo controllo sulla pagina.

$(':input:visible').last().on('keydown', function (e) { 
    if (e.keyCode == 9 && e.shiftKey == false) { 
     e.preventDefault(); 
     $('html, body').animate({ 
      scrollTop: 0 
     }, 500); 
     $(':input:visible', context).first().focus(); 
    } 
}); 

Dove contesto può essere qualsiasi Jquery oggetto, selettore, o anche documento, oppure è possibile ometterlo.

L'animazione a scorrimento, ovviamente, è facoltativa.

Answer 5

Ecco una implementazione di jquery generica in cui non è necessario trovare l'indice di tabulazione max. Nota che questo codice funzionerà anche se aggiungi o rimuovi elementi nel tuo DOM.

$('body').on('keydown', function (e) { 
    var jqTarget = $(e.target); 
    if (e.keyCode == 9) { 

     var jqVisibleInputs = $(':input:visible'); 
     var jqFirst = jqVisibleInputs.first(); 
     var jqLast = jqVisibleInputs.last(); 

     if (!e.shiftKey && jqTarget.is(jqLast)) { 
      e.preventDefault(); 
      jqFirst.focus(); 
     } else if (e.shiftKey && jqTarget.is(jqFirst)) { 
      e.preventDefault(); 
      jqLast.focus(); 
     } 
    } 
}); 

Tuttavia, si dovrebbe notare che il codice sopra funzionerà solo con ingressi visibili. Alcuni elementi possono diventare l'activeElement del documento anche se non sono inseriti, quindi se è il tuo caso, dovresti considerare di aggiungerli al selettore $(':input:visible').

non ho aggiunto il codice per scorrere fino alla messa a fuoco come elemento questo potrebbe non essere il comportamento desiderato per tutti ... se ne avete bisogno, basta aggiungere un commento dopo la chiamata a focus()