Formação Oracle DBA Completa


HTML – Como e onde funciona o tabindex e inert?

HTML – Como e onde funciona o tabindex e inert?

30 de julho de 2019 0 Por Ramos de Souza Janones
Powered by Rock Convert

Entenda como e onde usar e seu funcionamento das propriedades HTML tabindex e inert, com exemplos práticos para melhor compreensão.

A propriedade tabindex define como um elemento deve se comportar quando feita a navegação através do teclado, servindo, principalmente, para a construção de acessibilidade de uma aplicação, visto que muitas pessoas com algum tipo de restrição utilizam o teclado – ou qualquer outro meio que simule o teclado – como forma de navegação. Resumidamente, a propriedade define quais elementos podem receber foco através da navegação pelo teclado e a ordem que isto ocorre.

O valor da propriedade deve ser um valor inteiro, quando definido.

  • Pode ser um valor negativo, retirando o elemento da lista de ordenação de elementos focáveis. Isto é, não será possível acessá-lo através da tecla tab.
  • Pode ser zero, indicando que o elemento pode ser focalizado e que a ordem deve seguir a ordem definida pelo DOM. Ou seja, elementos que são definidos anteriormente no DOM são focalizados primeiro.
  • Pode ser um valor positivo, indicando que o elemento deve ser focalizado e a ordem será definida pelo seu respectivo valor de forma crescente. Se múltiplos elementos possuírem o mesmo valor, a precedência é definida pela ordem no DOM.

Alguns elementos já possuem um comportamento pré-definido, tais como a, com a propriedade href definida, link, com a propriedade href definida, buttoninput, cujo type seja diferente de hiddenselecttextarea e possivelmente outros.

Estes possuem a propriedade tabindex igual a zero e, portanto, estão na lista de elementos focalizáveis seguindo a ordem definida pelo DOM. Qualquer outro elemento diferente destes possui, por padrão, tabindex igual a -1 e, assim, não são elementos focalizáveis.

Para que um elemento seja considerado focalizável deve satisfazer todas as condições:

  1. Possuir a propriedade tabindex definida (ou, por padrão, ter valor 0).
  2. Estar renderizado na página.
  3. Não ser um elemento inerte.
  4. Não estar desabilitado (propriedade disabled).

Qualquer elemento considerado focalizável, ao receber o foco, dispara o evento focus e, ao perder o foco, o evento blur.

Exemplo

Em CSS:

div:focus { background: red; }

Em HTML:

<div tabindex='0'>Sou uma div focalizável</div>

Você pode definir qualquer elemento da página como focalizável, como no exemplo acima e até mesmo estilizá-lo com CSS através do seletor :focus, mas sempre considere a usuabilidade e acessibilidade de sua aplicação. Uma pergunta deve ser feita e respondida antes de definir a propriedade tabindex: este elemento faz parte da navegação da minha aplicação e deve estar na lista de elementos focalizáveis?

Às perguntas, então:

Por que alguns programadores utilizam tabindex com o valor -1? Qual é a utilidade disso?

Para remover aquele elemento da lista de elementos focalizáveis através da navegação pelo teclado. Quanto a utilidade (e necessidade), dependerá da aplicação.

E quais elementos são permitidos usar o atributo tabindex?

Basicamente qualquer elemento pode ter a propriedade tabindex definida, visto que é uma propriedade global do HTML, porém, não são todos que possuem a necessidade da mesma. Uma divutilizada para a definição do grid da aplicação, por exemplo, não precisa ser acessada através da navegação pelo teclado. Já links e campos de um formulário sim.

Curso completo de Games, inclusive Realidade Aumentada.Powered by Rock Convert

Qual é o evento acionado ao o elemento ser focado pelo uso do tab? Seria o focus, mesmo não se tratando de inputs?

Sim, é o evento focus, como visto no exemplo anterior. Pode ler mais sobre aqui, no item 7.4.2, especialmente onde diz focusing steps e unfocusing steps.

Dito isso, pode parecer que a propriedade quase nunca será realmente necessária, visto que os elementos que deveriam (realmente) ser focalizáveis já o são por padrão. Porém, uma utilização bem comum que justifica a existência e uso da propriedade tabindex são os menus de navegação que são ocultáveis na página. Por exemplo, se tiver um menu que fique posicionado fora da área visível da página, porém ainda renderizado (ou seja, com a propriedade display diferente de none), os links do mesmo estarão na lista de elementos focalizáveis e isso gera um comportamento estranho na aplicação, pois espera-se que ao navegar pelo teclado, a mesma seja feita apenas em elementos visíveis. Então os links deste menu deveriam possuir a propriedade tabindex igual a -1 enquanto fora da área visível e igual a 0 quando dentro da mesma.

O exemplo supracitado pode ser visto em ação neste vídeo sobre acessibilidade.

 

LEIA TAMBÉM:  Onionshare: envie arquivos de forma segura e anônima

(Ative as legendas em português)

O mesmo faz ligação com a propriedade inert

A propriedade inert

É uma feature que está em desenvolvimento, mas de momento ainda não está acriva em browsers existentes.

The inert attribute is a draft feature of HTML. As of Feb 2017, no browser >has a native implementation of inert. However, there is active development >inside Chrome, and other browsers have shown some renewed interest.

From the HTML spec

A node (in particular elements and text nodes) can be marked as inert. >When a node is inert, then the user agent must act as if the node was >absent for the purposes of targeting user interaction events, may ignore >the node for the purposes of text search user interfaces (commonly known >as “find in page”), and may prevent the user from selecting text in that >node.

É uma feature que permite desabilitar componentes, quer para focus/ativação/seleção mas também impossibilitar pesquisa.

É um atributo que deverá ser opcional para todas as suas possíveis utilizações num futuro próximo caso entre em fase de produção.

Já existe quem esteja a preparar componentes e scripts para a inclusão do Inert, tentando ultrapassar a limitação atual dos browsers não reconhecerem o atributo injetando via script.

Referências:

W3C Html 5.1 Inertness – https://www.w3.org/TR/html51/editing.html#inertness

Polyfill for the HTML inert attribute GitHub – https://github.com/GoogleChrome/inert-polyfill

VOCÊ ESTÁ NAS SEÇÕES:  Web » HTML5 e CSS3

Siga os bons!

Ramos de Souza Janones

Janones, é um empreendedor brasileiro apaixonado por empreendedorismo e tecnologia. Ao longo dos anos trabalhando com o desenvolvimento de softwares desktop desde a linguagem Clipper, passando pelo Delphi e atualmente com Java.

Optou pela formação de Publicidade e Marketing por sua segunda empresa de tecnologia ter participado do "boom" da internet nos anos 90 e na procura de melhorar seus conhecimentos em negócios.

Em razão da principal formação e profundos conhecimentos em programação e banco de dados, é capaz de realizar o desenvolvimento de aplicativos web, desktop e mobile com maior criatividade e inovação que profissionais de desenvolvimento com uma formação única e mais especifica, dedicada somente ao desenvolvimento de softwares.

Com toda sua experiência com empresas de software, sua formação e paixão por negócios escreveu o livro "Marketing para Empresas e Profissionais de Software", publicado pela editora carioca Ciência Moderna em 2012. Além de outros livros sobre programação.

Últimos posts por Ramos de Souza Janones (exibir todos)




Frontend Do Zero Ao Profissional