Como ignorar o elemento HTML do tabindex?

362

Existe alguma maneira no HTML de dizer ao navegador para não permitir a indexação de guias em elementos específicos?

Na minha página, embora exista uma exibição lateral que é renderizada com jQuery, quando você guia por isso, você recebe muitas pressionamentos de tabulação antes que o controle de tabulação se mova para o próximo link visível na página, pois todas as coisas que estão sendo guiadas estão ocultas o usuário visualmente.

html tabindex Tom Gullen
fonte

Respostas:

592

Você pode usar tabindex="-1".

A especificação W3C HTML5 suporta tabindexvalores negativos :

Se o valor for um número inteiro negativo
O agente do usuário deve definir o sinalizador de foco de índice de tabulação do elemento, mas não deve permitir que o elemento seja alcançado usando a navegação de foco sequencial.

Cuidado, porém, que esse é um recurso HTML5 e pode não funcionar com navegadores antigos.
Para estar em conformidade com o padrão W3C HTML 4.01 (desde 1999) , o tabindex precisaria ser positivo.

Exemplo de uso abaixo em HTML puro.

<input />
<input tabindex="-1" placeholder="NoTabIndex" />
<input />
Expandir snippet

Martin Hennings
fonte
12
Parece que o Google Chrome não suporta o -1, o que faz sentido, já que tecnicamente tabIndex suporta apenas 0 a 32767, de acordo com o linkW3 . Então, quando eu fiz isso; Eu usei 500. Hackish; mas funcionou.
Flea
38
@Flea A partir da versão 23, o Google Chrome suporta -1 no tabindex. Não sei há quanto tempo isso aconteceu, talvez antes de 23. Testei o "-1" no Chrome 23, Firefox 18, IE8, IE9 e Opera 12.11 e funcionou de maneira geral.
Jkupczak
5
Editei a resposta para vincular à especificação HTML5 atualizada. tabindexagora permite ter valores negativos.
precisa
11
@JamesDonnelly Obrigado por sua edição. Adicionei novamente a referência à especificação W3C HTML4 para compatibilidade do navegador.
precisa
2
Suportado desde o IE 5.01 msdn.microsoft.com/en-us/library/ie/ms534654(v=vs.85).aspx
Skurpi
121

Não esqueça que, apesar de tabindextodas as letras minúsculas nas especificações e no HTML, em Javascript / DOM essa propriedade é chamada tabIndex.

Não perca a cabeça tentando descobrir por que a chamada de índices de guias alterados programaticamente element.tabindex = -1não está funcionando. Use element.tabIndex = -1.

Eric L.
fonte
34
Parece que deve ser um comentário, não uma resposta.
amigos estão dizendo sobre drcord
47
Fiquei feliz em lê-lo, e provavelmente teria perdido se fosse enterrado como um comentário.
MalcolmOcean
10

Se estes são elementos naturalmente na ordem de tabulação, como botões e âncoras, removê-los da ordem de tabulação com tabindex = -1 é uma espécie de cheiro de acessibilidade. Se eles estão fornecendo funcionalidade duplicada, removê-los da ordem das guias está ok e considere adicionar aria-hidden = true a esses elementos para que as tecnologias assistivas os ignorem.

Matt
fonte
8

Se você estiver trabalhando em um navegador que não oferece suporte tabindex="-1", poderá dar apenas as coisas que precisam ser ignoradas com um índice de guias realmente alto . Por exemplo, tabindex="500"basicamente move a ordem das guias do objeto para o final da página.

Fiz isso para um longo formulário de entrada de dados com um botão pressionado no meio. Não é um botão no qual as pessoas clicam com frequência, então eu não quero que elas o abram acidentalmente e pressione enter. disablednão funcionaria porque é um botão.

Jemmeh
fonte
5

Esse tipo de hack como "tabIndex = -1" não funciona para mim com o Chrome v53.

É o que funciona para o Chrome e a maioria dos navegadores:

function removeTabIndex(element) {
    element.removeAttribute('tabindex');
}
<input tabIndex="1" />
<input tabIndex="2" id="notabindex" />
<input tabIndex="3" />
<button tabIndex="4" onclick="removeTabIndex(document.getElementById('notabindex'))">Remove tabindex</button>
Expandir snippet

Val
fonte
Isso simplesmente não atribui um índice de tabulação padrão ao elemento, em vez de desativar a tabulação?
Lawyerson
@ Lawyerson não, ele realmente desabilita a tabulação, pois explicava 'removeAttribute'. você já tentou, mas com resultado diferente?
Val
2
Eu tentei sem efeito. Os navegadores, por padrão, permitem que você navegue pelas entradas na ordem em que aparecem na página, mesmo que nenhum índice de tabulação esteja definido nelas, portanto, faz sentido para mim que simplesmente remover o atributo não desative completamente as guias. Além disso, a entrada que eu quero usar esta não possui um atributo "tabindex" para começar.
Lawyerson
Executando o snippet, posso tabular para a notabindexcaixa como se estivesse tabIndex=5depois de pressionar o botão. Não é uma questão de prefeito, mas ainda não a torna totalmente "não tabulável".
Mikael Dúi Bolinder 15/02/19
Provavelmente não está funcionando porque você está usando estojo de camelo. Tudo deve estar em minúsculastabindex
dman
3

A maneira de fazer isso é adicionando tabindex="-1". Ao adicionar isso a um elemento específico, ele se torna inacessível pela navegação do teclado. Há um ótimo artigo aqui que o ajudará a entender melhor o tabindex .

Nesha Zoric
fonte
2

Basta adicionar o atributo disabledao elemento (ou use o jQuery para fazer isso por você). Desativado impede que a entrada seja focada ou selecionada.

Yaakov Ainspan
fonte
Qual versão do Chrome?
Yaakov Ainspan
Chrome 49.0.2623.75 (64 bits).
Felix Eve
Minha versão é 51.0.2704.103. Confira este violino . Você pode ter o código errado, você nunca sabe.
Yaakov Ainspan
@AtulChaudhary, como não funciona? Você ainda pode focar?
Yaakov Ainspan
uma vez que os campos são desativados permanecem desativados e é um problema em IOS9 mas parece estar funcionando em IOS10
Atul Chaudhary