Foco

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.