Elementos interativos, incluindo controles de formulário, links e botões, são focalizável e padrão com tabulação. Os elementos que podem ser acessados fazem parte da ordem de navegação em foco sequencial do documento. Outros elementos são inertes, ou seja, não são interativos. Com atributos HTML, é possível deixar elementos interativos inertes e e tornar os elementos inertes interativos.
Por padrão, a ordem do foco da navegação é a mesma que a ordem visual, que é a ordem do código-fonte. Existem HTML atributos que podem alterar essa ordem e propriedades CSS que podem alterar a ordem visual do conteúdo. Como alterar as guias ordem com HTML ou ordem de renderização visual com CSS pode prejudicar a experiência do usuário.
Não altere a ordem de tabulação percebida e real com CSS e HTML. Como demonstrado nos dois exemplos a seguir, as ordens de tabulação que sejam diferentes da ordem visualmente esperada confundem os usuários e prejudicam a experiência deles.
Neste exemplo, o valor do atributo tabindex
tornou a ordem da tabulação caótica:
Neste exemplo, o CSS criou uma divergência entre a ordem de tabulação e a ordem visual do conteúdo:
A declaração flex-flow: row-reverse;
inverteu a ordem visual.
Além disso, a propriedade order do CSS foi aplicada à sexta palavra, "This", que moveu visualmente essa
uma palavra. A sequência de tabulação é a ordem do código, que não corresponde mais à ordem visual, criando uma desconexão
para usuários de teclado.
Como tornar os elementos inertes interativos
Os atributos contenteditable
e tabindex
, sendo globais, podem ser adicionados a qualquer elemento, o que os torna focalizáveis.
no processo. Elementos focalizáveis também podem ser focados com um mouse ou ponteiro, usando a autofocus
.
definido por atributos ou por script, como em element.focus()
.
O atributo tabindex
O atributo global tabindex
, introduzido no
atributos, permite que elementos que, de outra forma, não receberiam foco
foco, normalmente com a tecla Tab. Por isso, o nome é usado.
O valor do atributo tabindex
é um número inteiro. Um valor negativo torna um elemento focalizável, mas não tabular. Um
O valor tabindex
de 0
torna o elemento focalizável e tabulável, adicionando o elemento em que ele é aplicado à sequência
na ordem do código-fonte. Um valor de 1 ou mais torna o elemento focalizável e tabular,
mas a adiciona a uma sequência de tabulação priorizada e, como vimos acima, deve ser evitada.
Nesta página, o botão de compartilhamento, <share-action>
, é um elemento personalizado. O tabindex="0"
adiciona esse elemento
na ordem de tabulação padrão do teclado:
<share-action authors="@front-end.social/@estellevw" data-action="click" data-category="web.dev" data-icon="share" data-label="share, mastodon" role="button" tabindex="0">
<svg aria-label="share" role="img" xmlns="http://www.w3.org/2000/svg">
<use href="#shareIcon" />
</svg>
<span>Share</span>
</share-action>
Há outro elemento personalizado nesta página: a navegação local tem um
com um valor negativo de tabindex
:
<web-navigation-drawer type="standard" tabindex="-1">
Um atributo tabindex
com um valor negativo torna o elemento focalizável, mas não pode ser usado com a tecla Tab. O elemento é capaz de receber
foco, como via HTMLElement.focus()
, mas não faz parte
da ordem de navegação
por foco sequencial. A convenção para elementos focalizáveis não tabulares é usar tabindex="-1"
. Observe que
Se você adicionar tabindex="-1"
a um elemento interativo, ele não poderá mais ser acessado com a tecla Tab.
O método element.focus()
pode ser usado para definir o foco para
elementos focalizáveis. Os navegadores rolam os elementos em foco para a visualização. Por isso, evite usar
element.focus({preventScroll:true})
, já que o foco em um elemento não visível vai gerar uma experiência ruim para o usuário.
Se você quiser consultar o documento para descobrir qual elemento está em foco, use a propriedade somente leitura Document.activeElement
.
Os elementos com tabindex
de 1
ou mais são incluídos em uma sequência de guias separada. Como você notará no Codepen,
a tabulação começa em uma sequência separada, na ordem do valor mais baixo para o mais alto, antes de passar pelos valores na sequência regular.
(nenhum tabindex
definido ou tabindex="0"
) na ordem de origem:
tabindex
com um valor positivo coloca o elemento em uma sequência de foco priorizada, o que pode levar a um caos na ordem de foco.
Evite modificar a ordem do DOM com tabindex
. Pedidos de tabulação alterados podem criar usuários mal-intencionados
e experiências, eles são difíceis para os desenvolvedores gerenciar e manter.
O atributo contenteditable
O atributo contenteditable
foi discutido anteriormente. Definir contenteditable="true"
em qualquer elemento o torna editável.
focalizável e parte da ordem de tabulação. O comportamento do foco é semelhante à configuração de tabindex="0"
, mas não é o mesmo. Aninhado
Os elementos contenteditable
podem ser focados, mas não podem ser acessados com a tecla Tab. Para permitir que um elemento contenteditable
aninhado seja acessado com a tecla Tab, adicione tabindex="0"
.
que o adicionará à ordem
sequencial da navegação.
Foco em elementos interativos
O atributo autofocus
Já o booleano autofocus
é um atributo global
que pode ser definido em qualquer elemento, ele não torna um elemento inerte interativo. Quando a página é carregada, o primeiro elemento focalizável
com o atributo autofocus
definido recebe o foco, desde que esse elemento seja exibido e não esteja aninhado em uma <dialog>
.
Pode ser confuso definir o foco automaticamente no conteúdo. Definir autofocus
em um controle de formulário significa que o controle de formulário
será exibida no carregamento da página. Todos os seus usuários, incluindo usuários de leitores de tela e usuários com janelas de visualização pequenas, não podem
"ver" as instruções do formulário, possivelmente rolando além do rótulo normalmente visível do controle de formulário. O autofocus
não altera a ordem sequencial de navegação do foco do documento. Os elementos na sequência que vêm antes do
elementos de foco automático são simplesmente ignorados. Por esses motivos, não é recomendado incluir o atributo autofocus
.
A exceção para "não usar autofocus
" recomendação está incluindo o atributo autofocus
em elementos <dialog>
.
Quando uma caixa de diálogo é aberta, o navegador foca automaticamente no primeiro elemento interativo focalizável dentro da <dialog>
,
ou seja, autofocus
a um elemento não é necessário. Se você quiser garantir que um elemento interativo específico da caixa de diálogo receba
focar quando a caixa de diálogo for aberta, adicione o atributo autofocus
a esse elemento.
<dialog open>
<form method="dialog">
<button type="submit" autofocus>close</button>
</form>
</dialog>
O atributo autofocus
definido no <button>
de fechamento garante que ele receba foco quando a caixa de diálogo for aberta. Como o primeiro elemento
na caixa de diálogo, ele teria recebido o foco de qualquer forma. Por padrão, quando uma caixa de diálogo é aberta, o primeiro elemento focalizável dentro
a caixa de diálogo recebe o foco, a menos que outro elemento dela tenha o atributo autofocus
definido.
Como tornar os elementos interativos inertes
Há também atributos HTML que podem remover elementos interativos da sequência de tabulação. Incluir um tabindex
negativo
a elementos focalizáveis, adicionando o atributo disabled
para oferecer suporte a controles de formulário e adicionando o atributo inert
global
a um contêiner tornam os elementos não tabulares. Esses três atributos NÃO são intercambiáveis.
Valor tabindex
negativo
Como aprendemos acima, um atributo tabindex
com um valor negativo torna um elemento focalizável, mas não pode ser usado com a tecla Tab. Ao adicionar
tabindex="0"
em um elemento focalizável por padrão, incluindo links, botões, controles de formulários e elementos que são contenteditable
não é necessário. Incluir uma tabindex
com um valor negativo remove elementos normalmente que podem ser acessados com a tecla Tab do foco sequencial
ordem de navegação.
Um valor negativo de tabindex
impede que os usuários do teclado se concentrem em elementos interativos, mas não desativa o elemento. Pointer
os usuários ainda podem se concentrar no elemento. Para desativar um elemento, use o atributo disabled
.
Desativado
O atributo booleano desativado torna os controles do formulário em
que é aplicado e seus descendentes, se houver, não focalizáveis. Os controles de formulário desativados não podem ser focados, não recebem eventos de clique.
e não são enviados após o envio do formulário. Observe que disabled
não é um atributo global. Isso se aplica a <button>
, <input>
e
<optgroup>
, <option>
, <select>
, <textarea>
, elementos personalizados associados a formulários e <fieldset>
.
Quando definidos em <optgroup>
ou <fieldset>
, todos os controles de formulário filhos são desativados, exceto o conteúdo do primeiro <legend>
do <fieldset>
.
Os mesmos elementos que oferecem suporte a disabled
também podem ser segmentados com o :disabled
e pseudoclasses :enabled
. Os elementos que são desativados com o
O atributo disabled
geralmente é estilizado como cinza claro pela folha de estilo do user agent, mesmo que um accent-color
está definido.
Sendo um atributo booleano, a presença do atributo desativa o elemento ativado de outra forma. não é possível defini-lo como false
.
Para reativar um elemento desativado, o atributo precisa ser removido, geralmente usando Element.removeAttribute('disabled')
.
A propriedade HTMLInputElement.disabled
permite verificar
se uma entrada estiver desativada. Como disabled
não é um atributo global, ele não é herdado do HTMLElement, mas todos os elementos
do elemento de interface, como HTMLSelectElement
,
HTMLTextareaElement
tem a mesma propriedade somente leitura.
O atributo disabled
não se aplica a elementos normalmente inert
que são focalizáveis por meio de tabindex
ou contenteditable
.
Ela também não se aplica ao próprio elemento <form>
. Para desativá-los, o atributo global inert
pode ser usado.
O atributo inert
Quando o atributo booleano global inert
é adicionado a um elemento, esse elemento e todo o conteúdo aninhado são desativados
clicável nem com tabulação) e removida da árvore de acessibilidade. Embora a inert
possa ser aplicada a qualquer elemento, ela geralmente é
usados para seções de conteúdo, como conteúdo fora da tela ou oculto.
Ao aplicar disabled
aos controles de formulário, o navegador fornece o estilo padrão e pode ser estilizado usando a :disabled
.
pseudoclasse. O atributo inert
não fornece indicadores visuais e não tem uma pseudoclasse correspondente, embora o seletor de atributos [inert]
seja correspondente.
Usar inert
em conteúdo visível sem estilos que indicam a inércia pode gerar uma experiência ruim para o usuário. Como conteúdo inerte
não estiver disponível para usuários de leitores de tela, pode causar confusão quando usuários de leitores de tela com visão normal virem o conteúdo na tela
que não está disponível para as ferramentas de acessibilidade. Deixe a inércia muito aparente via CSS.
O foco nunca deve se mover para um conteúdo não visível. Tudo que não é renderizado fora da tela são exibidos quando o foco precisa ficar inerte. Se o conteúdo estiver oculto, mas aparece quando está em foco, como o link "Pular para o conteúdo" nesta página, não precisa ficar inerte.
Teste seu conhecimento
Teste seu conhecimento
Teste seu conhecimento sobre foco.
Se um elemento não puder ser focado, ele é descrito como?
O que será verdadeiro se o elemento tiver um atributo disabled
?