Ramos da Informática

HTML – Como e onde funciona o tabindex e inert?

HTML - Como e onde funciona o tabindex e inert?

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

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.

Você vai gostar:

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

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.

Evento gratuito de tecnologia: inscreva-se na 3ª edição do Dev Summit:

  1. Vem ai a 3ª edição do maior evento hands-on de desenvolvimento de software do Brasil. Vamos apresentar tecnologias, ferramentas e práticas em mais de 20 horas em sessões ao vivo com profissionais de referência em Full Stack, Flutter, Angular, React e muito mais.
  2.  



    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?

    Leia:

    À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.

    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.

     

    (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

Sair da versão mobile