W3docs
pt
Entrar

Atributo HTML accesskey

O atributo accesskey é global e define um atalho de teclado para ativar um elemento específico. Saiba em quais elementos ele pode ser utilizado.

O atributo HTML accesskey é um atributo global que define um atalho de teclado para ativar ou focar um elemento específico. Quando o usuário pressiona a(s) tecla(s) modificadora(s) do navegador junto com o caractere atribuído, esse elemento recebe o foco (e, no caso de links e botões, é ativado). O valor do atributo deve consistir em um ou mais caracteres imprimíveis separados por espaços — o navegador utiliza o primeiro que conseguir suportar.

No HTML 4.01, accesskey só podia ser usado com um pequeno conjunto de elementos: <a>, <area>, <button>, <input>, <label>, <legend> e <textarea>.

No HTML5, accesskey é um atributo global, portanto pode ser definido em qualquer elemento. Note que colocá-lo em um elemento não interativo (como um <div> ou <p>) apenas move o foco do teclado para esse elemento — sem executar um clique — portanto seu uso é mais significativo em controles interativos.

Sintaxe

<tag accesskey="single_character">...</tag>

Por exemplo, <button accesskey="s">Save</button> atribui a tecla s.

Como o atalho é acionado

Não existe uma combinação de teclas única e padronizada para accesskeys — ela depende do navegador e do sistema operacional. O usuário mantém pressionadas as teclas modificadoras abaixo e pressiona o caractere atribuído:

NavegadorWindows / LinuxmacOS
ChromeAlt + teclaControl + Option + tecla
EdgeAlt + teclaControl + Option + tecla
FirefoxAlt + Shift + teclaControl + Option + tecla
Safari—Control + Option + tecla

Quando mais de um elemento compartilha o mesmo accesskey, os navegadores modernos geralmente alternam o foco entre esses elementos a cada pressionamento, em vez de ativar apenas um.

Quando accesskey é (e não é) uma boa opção

accesskey é mais adequado para ambientes controlados e de propósito único, nos quais você conhece o navegador e o público, e onde um atalho documentado agrega valor real:

  • Ferramentas internas / de intranet em que usuários avançados repetem as mesmas ações o dia todo (por exemplo, "Alt+S para salvar um registro").
  • Quiosques e aplicativos embarcados rodando em um navegador conhecido, onde você controla todo o ambiente de teclado.
  • Utilitários de página única com um pequeno número de atalhos bem divulgados.

Evite accesskey em sites e aplicações web públicos e de múltiplos propósitos, pelos seguintes motivos:

  • Conflitos. Uma tecla escolhida pode colidir com um atalho nativo do navegador ou do sistema operacional, ou com um comando de tecnologia assistiva.
  • Descoberta. Não há indicação visual de que um atalho existe, por isso os usuários raramente os encontram.
  • Variação de teclado. Um caractere pode não estar disponível em alguns layouts de teclado, o que representa um problema real de internacionalização.
  • Carga cognitiva. Accesskeys numéricas (1, 2, 3) não carregam significado e podem confundir usuários com deficiências cognitivas.
  • Gerenciamento de foco. Atalhos sobrepostos podem interferir no comportamento natural de tabindex e na ordem de tabulação da página.
Perigo

Por esses motivos, em geral recomenda-se não usar accesskey em sites públicos de uso geral. Prefira utilizá-lo apenas em ambientes controlados e sempre documente os atalhos que você fornece.

Considerações de acessibilidade

Atalhos de caractere único são regidos pelo Critério de Sucesso 2.1.4 das WCAG 2.1 — Atalhos de Tecla de Caractere. A preocupação é que um atalho vinculado a um único caractere pode ser acionado acidentalmente — especialmente por usuários de leitores de tela e de entrada por voz, cujas ferramentas geram pressionamentos de tecla durante a navegação. Uma ativação inesperada de accesskey pode mover o foco, enviar um formulário ou disparar uma ação que o usuário jamais pretendeu.

Para satisfazer o SC 2.1.4, você deve permitir que os usuários desativem o atalho, o remapeiem ou que ele fique ativo somente quando o componente relevante estiver em foco.

Como accesskey não possui indicação visual, exponha o atalho à tecnologia assistiva com o atributo aria-keyshortcuts. Ele documenta o pressionamento de tecla para leitores de tela sem alterar o comportamento:

<button accesskey="s" aria-keyshortcuts="Alt+S">Save</button>

Exemplo com um botão e um input

accesskey é mais justificável em controles de formulário interativos, onde focar o elemento é exatamente o que o usuário deseja:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <form>
      <label for="search" accesskey="f">Search (Alt+F):</label>
      <input id="search" type="text" accesskey="f" />
      <br />
      <button type="submit" accesskey="s" aria-keyshortcuts="Alt+S">
        Save
      </button>
    </form>
    <p>Press the modifier keys for your browser plus the letter, e.g. <strong>Alt + F</strong> to focus the search field or <strong>Alt + S</strong> to reach Save.</p>
  </body>
</html>

O mesmo atributo pode atribuir atalhos a links de navegação:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <a href="https://www.w3docs.com/learn-html.html" accesskey="h">HTML online tutorial</a>
    <br />
    <a href="https://www.w3docs.com/learn-css.html" accesskey="c">CSS online tutorial</a>
    <br />
    <a href="https://www.w3docs.com/learn-git.html" accesskey="g">GIT online tutorial</a>
  </body>
</html>
Experimente Você Mesmo »

Atributos relacionados

Prática

Prática
O que é verdadeiro sobre o atributo HTML accesskey?
O que é verdadeiro sobre o atributo HTML accesskey?
Was this page helpful?