Teclas de atalho do Player Youtube

O HTML dispõe de um atributo que disponibiliza teclas de atalho para serem executadas pelo browser. É o atributo accesskey:

<a href="/" accesskey="i" title="ir a página inicial do sítio Web">
   início
</a>

Ao usarmos o atributo `accesskey´, a tecla de atalho é automaticamente reconhecida pelo browser. Mas, cada browser tem a sua própria forma de executar uma tecla de atalho. Para além disso, o mesmo browser tem formas diferentes de executar teclas de atalho em diferentes sistemas operativos.

How to execute an accesskey in a Browser?

	Windows	Linux	Mac
Firefox	Alt + Shift + key		Control + Option + key or Control + Alt + key
MS Edge	Alt + key	Control + Option + key or Control + Option + Shift + key	Control + Option + key
Google Chrome
Safari	n/a		Control + Option + key
Opera	Alt + key		Control + Alt + key

Geralmente a diversidade com que os diferentes Browsers executam uma tecla de atalho, leva os developers a tentarem simplificar a execução do atalho para uma função a, rigorosamente, uma tecla.

É o que leva o Youtube a criar as suas próprias teclas de atalho desalinhadas com a linguagem HTML.

Assim, as teclas de atalho disponíveis no Youtube são:

• Reproduzir (k)
• Seguinte (SHIFT+n)
• Desativar som (m)
• Legendas (c)
• Minileitor (i)
• Modo de cinema (t)
• Ecrã inteiro (f)

Ao desalinhar a tecla de atalho com o HTML, faz com que o programador tenha de se preocupar com a atribuição:

• da semântica do elemento (i.e. dizer às tecnologias de apoio de que o elemento tem uma tecla de atalho e de qual é a tecla de atalho;
• colocar o Browser à escuta do pressionar dessa tecla;
• definir a ação que deve ser executada assim que a tecla seja pressionada;
• definir exceções à execução da ação. Por exemplo, quando a tecla é invodada de dentro de um campo de edição, a escuta deve ser ignorada.

Exemplo do Botão Reproduzir (k)

<button 
  class="ytp-play-button ytp-button"
  aria-keyshortcuts="k"
  data-title-no-tooltip="Reproduzir"
  aria-label="Reproduzir atalho de teclado k"
  title="Reproduzir (k)">
    <svg height="100%" version="1.1" viewBox="0 0 36 36" width="100%">
      <use class="ytp-svg-shadow" xlink:href="#ytp-id-140"></use>
      <path class="ytp-svg-fill" d="M 12,26 18.5,22 18.5,14 12,10 z M 18.5,22 25,18 25,18 18.5,14 z" id="ytp-id-140"></path>
    </svg>
</button>

O nome acessível do botão vai buscá-lo ao aria-label:

Para dar conhecimento à tecnologia de apoio de quais são as teclas de atalho que estão disponíveis:

O comportamento estará definido na linguagem de programação (p.e. Javascript)