Implementando a acessibilidade de teclado (HTML)

Applies to Windows and Windows Phone

Procurando a versão para C#/VB/C++/XAML deste tópico? Veja Implementando a acessibilidade do teclado (XAML).

Muitos usuários que são cegos ou têm problemas de mobilidade usam o teclado como o único meio de navegar no seu aplicativo de interface do usuário e acessar a sua funcionalidade. Se seu aplicativo não oferecer um bom acesso ao teclado, esses usuários terão dificuldade em usar o aplicativo, ou podem não conseguir usá-lo.

Este tópico descreve a marcação e o código que você tem que implementar para garantir que seu aplicativo da Windows Store em JavaScript seja acessível para usuários de teclado.

Veja este recurso em ação como parte da nossa série sobre recursos para aplicativos, do início ao fim:  Interação com o usuário: entrada por toque e muito mais.

Foco inicial do teclado

Quando o aplicativo é iniciado, defina o foco inicial do teclado no elemento com o qual os usuários intuitivamente (ou mais provavelmente) vão interagir primeiro. Normalmente, o local mais apropriado é o modo de exibição de conteúdo principal do aplicativo para que um usuário possa rolar imediatamente o conteúdo usando as teclas de seta. Para saber mais sobre como definir o foco para controles específicos, veja focus.

Navegação de teclado entre elementos de interface de usuário

Defina o atributo tabIndex com um valor que seja maior ou igual a 0 para todos os elementos de interface do usuário que não estejam na ordem de guias por padrão. É importante definir o atributo tabIndex porque os usuários leitores de tela navegam entre os elementos da interface do usuário interativa usando a tecla Tab.

O exemplo a seguir inclui o elemento superior da árvore na ordem de guias. As informações sobre o item da árvore atual são expostas com o atributo aria-activedescendant.


<!-- The top tree item must be added to the tab order. -->
<div id="folders" role="tree" aria-label="Folders" tabindex="0"
    aria-activedescendant="n-0" >
...
    <div id="n-0" class="selected" role="treeitem" aria-expanded="true" 
            onclick="...">
...
</div>

Observe que as marcas de HTML focáveis como a href="…", input e select ficam na ordem de guias por padrão.

As regras a seguir se aplicam ao atributo tabIndex.

  • Elementos da interface do usuário com tabIndex igual a 0 são adicionados à ordem de tabulação com base na ordem do documento.
  • Elementos da interface do usuário com tabIndex maior que 0 são adicionados à ordem de tabulação com base no valor de tabIndex.
  • Elementos da interface do usuário com tabIndex menor que 0 não são adicionados à ordem de tabulação, mas podem receber o foco do teclado.

Observação  Não fornecer elementos de texto (como marcações p) de tabIndex superior ou igual a 0. O texto normalmente não é interativo e não deve ter a conotação de que definir o foco nele iniciaria uma possível ação. Os elementos de texto ainda seriam detectados por tecnologia de assistência, e leitura em voz alta nos leitores de tela, mas isso conta com tecnologias além daqueles elementos na ordem de tabulação prática.

Navegação de teclado entre elementos de interface de usuário

Para os elementos compostos, é importante garantir uma navegação interior adequada entre os elementos contidos. É possível implementar a navegação interior para um elemento composto de várias maneiras.

Um elemento composto pode gerenciar seu filho ativo atual para reduzir a sobrecarga de ter todas os filhos focáveis. Este elemento composto é incluído na ordem de guias, e trata os eventos de navegação de teclado. O elemento composto expõe informações sobre o elemento filho que está ativo no momento usando o atributo aria-activedescendant.


<!-- Custom tree view element. -->
<div id="folders" class="tree" role="tree" aria-label="Folders" tabindex="0"
        aria-activedescendant="n-0" >
    <div id="n-0" class="selected" role="treeitem" aria-expanded="true" 
            onclick="...">
        Libraries</div>
    <div role="group" >
        <div id="n-0-1" role="treeitem" aria-expanded="false" onclick="…">Docs</div>
        <div id="n-0-2" role="treeitem" aria-expanded="false" onclick="…">Music</div>
        <div id="n-0-3" role="treeitem" aria-expanded="false" onclick="…">Pics</div>
    </div>
</div>

<script>
    var folders = document.getElementById('folders');
    // Ensure keyboard navigation/operation with arrow keys.
    folders.addEventListener('keydown', function(e) {
        var itm = e.srcElement;
        if (e.keyCode === Win.Utilities.Key.upArrow) {
            // Update aria-activedescendant with the previous node id.
            // Update the class attribute to mark the selected node.
        } else if (e.keyCode === Win.Utilities.Key.downArrow) {
            // Update aria-activedescendant with the next node id.
            // Update the class attribute to mark the selected node.
        }
    });
</script>

Uma abordagem alternativa é gerenciar dinamicamente o atributo tabIndex para o nó. Este método é conhecido por fornecer um "índice itinerante".


<!-- Custom tree view element. -->
<div id="folders" role="tree" aria-label="Folders" >
    <div id="n-0" role="treeitem" aria-expanded="true" tabindex="0">Libraries</div>
    <div role="group" >
        <!-- Child tree items: Documents, Music, Pictures ... -->
        <div id="n-0-1" role="treeitem" aria-expanded="false" tabindex="-1">Docs</div>
        <div id="n-0-2" role="treeitem" aria-expanded="false" tabindex="-1">Music</div>
        <div id="n-0-3" role="treeitem" aria-expanded="false" tabindex="-1">Pics</div>
    </div>
</div>

<script>
    var folders = document.getElementById('folders');
    // Ensure keyboard navigation/operation with arrow keys.
    folders.addEventListener('keydown', function(e) {
        var itm = e.srcElement;
        if (e.keyCode === Win.Utilities.Key.upArrow) {
            // Update tabindex attributes.
        } else if (e.keyCode === Win.Utilities.Key.downArrow) {
            // Update tabindex attributes.
        }
    });
</script>

Como mostrado nos dois exemplos anteriores, a recomendação é usar as teclas de setas como atalhos de teclado para navegar entre os elementos filho. Se os nós de exibição de árvore tiverem subelementos diferentes para lidar com expansão e –recolhimento e ativação de nós, use as teclas de seta para esquerda e direita para obter a funcionalidade de expansão e –recolhimento.

Ativação de teclado

Permita que os elementos de interface de usuário que podem ser clicados também possam ser invocados com o teclado.

Para os elementos de interface do usuário que podem ser invocados, implemente manipuladores de eventos de teclado para as teclas de barra de espaço e Enter. Isso torna o suporte de acessibilidade básica de teclado completo e permite que os usuários utilizem cenários básicos de aplicativos apenas com o teclado, ou seja, os usuários podem acessar todos os elementos interativos da interface do usuário e ativar a funcionalidade padrão.


<!-- Custom tree view element. -->
<div id="folders" role="tree" aria-label="Folders" aria-activedescendant="n-0" 
        tabindex="0" >
    <div id="n-0" role="treeitem" aria-expanded="true" onclick="..." >Libraries</div>

    <div role="group" >
        <!—Child tree items: Documents, Music, Pictures ... -->
        <div id="n-0-1" role="treeitem" aria-expanded="false" onclick="...">Docs</div>   
        <div id="n-0-2" role="treeitem" aria-expanded="false" onclick="...">Music</div>
        <div id="n-0-3" role="treeitem" aria-expanded="false" onclick="...">Pics</div>
    </div>
</div>

<script>
    // Ensure keyboard activation
    folders.addEventListener('keydown', function(e) {
        if (e.srcElement && (e.keyCode === Win.Utilities.Key.enter ||
                e.keycode === Win.Utilities.Key.space)) {
            e.srcElement.click(e);
        }
    });
</script>


Atalhos de teclado (opcional)

Além de implementar a navegação pelo teclado e ativação para o seu aplicativo, é recomendável implementar atalhos para a funcionalidade do seu aplicativo. Um atalho é uma combinação de teclas que aumenta a produtividade, fornecendo uma maneira eficiente de o usuário acessar a funcionalidade do aplicativo.

Uma tecla de acesso é um atalho para um elemento da interface do usuário no seu aplicativo. Teclas de acesso consistem na tecla Alt e em uma tecla de letra.

Uma tecla aceleradora é um atalho para um comando do aplicativo. Seu aplicativo pode ter uma interface do usuário que corresponde exatamente ao comando. Teclas aceleradoras consistem na tecla Ctrl e em uma tecla de letra.

É fundamental oferecer aos usuários que dependem de leitores de tela e outras tecnologias assistenciais uma maneira fácil de descobrir as teclas de atalho do seu aplicativo. Você deve declarar teclas de atalho na marcação HTML do seu aplicativo usando os atributos accesskey e x-ms-acceleratorkey e deve comunicar essas teclas de atalho usando dicas de ferramenta, nomes acessíveis, descrições acessíveis ou outras formas de comunicação na tela. No mínimo, as teclas de atalho devem ser bem documentadas no conteúdo de ajuda do seu aplicativo.


<!-- Alt+F sets focus to firstName and is exposed by the -->
<!-- AccessKey UIA property.                             -->
<label for="firstName">First Name</label>
<input id="firstName" type="text" accesskey="F" /> 

<!-- Alt+S invokes the Save button and is exposed by the -->
<!-- AccessKey UIA property.                             -->
<button accesskey="S">Save</button>

<!-- Ctrl+S invokes the Save button and is exposed by a tooltip. -->
<button id="sendButton" value="Send" title="Send (Ctrl+S)">Send</button>


A estrutura dá suporte à funcionalidade de teclas de atalho para definir o foco ou invocar elementos, mas você deve implementar as teclas de atalho em JavaScript usando manipuladores de eventos de teclado.


<script>
    var sendButton = document.getElementById('sendButton');
    sendButton.addEventListener('keyup', function(e) {
        var itm = e.srcElement;
        if (e.ctrlKey && e.keyCode === 83 ) {
            // Invoke send functionality.
        }
    });
</script>

Considere também as teclas de atalho durante o processo de localização. Localizar teclas de acesso é especialmente importante porque a seleção desse tipo de tecla normalmente depende do rótulo do elemento.


<script>
    var sendButton = document.getElementById('saveButton');
    sendButton.innerHTML = res.getString('saveButton');
    sendButton.setAttribute('accesskey',res.getString('saveButtonAccessKey');
</script>

<!-- resources.resw -->
    <data name="saveButton" xml:space="preserve"><value>Save</value></data> 
    <data name="saveButtonAccessKey" xml:space="preserve"><value>S</value></data>

Para saber mais sobre as diretrizes de implementação de teclas de atalho, veja Teclas de atalho nas Diretrizes de interação com a experiência do usuário do Windows.

Acessibilidade do teclado e Windows Phone

Um dispositivo do Windows Phone normalmente não tem um teclado de hardware dedicado. No entanto, um SIP (Painel de Entrada Virtual) pode oferecer suporte para diversos cenários de acessibilidade com teclado. Os leitores de tela podem ler entradas de texto no SIP Texto, incluindo exclusões de anúncio. Os usuários podem saber onde os seus dedos estão, pois o leitor de tela pode detectar se o usuário está usando as teclas e lê o nome da tecla pressionada em voz alta. Além disso, alguns dos conceitos de acessibilidade orientados pelo teclado podem ser mapeados com os comportamentos de tecnologia assistencial relacionados que não usam teclado. Por exemplo, mesmo que um SIP não inclua uma tecla Tab, o Narrador reconhece um gesto de toque que é o equivalente a pressionar a tecla Tab, de modo que ter uma ordem de tabulação útil pelos controles em uma interface do usuário ainda é um princípio importante de acessibilidade. As teclas de setas usadas para navegar pelas partes dentro de controles complexos também são suportadas pelos gestos de toque do Narrador. Quando o foco atinge um controle que não seja entrada de texto, o Narrador suporta um gesto que chama a ação desse controle.

Normalmente, os atalhos do teclado não são relevantes para aplicativos no Windows Phone, porque um SIP não incluirá as teclas Alt ou Control.

Tópicos relacionados

Cumprindo os requisitos de acessibilidade básica

 

 

Mostrar:
© 2014 Microsoft