Implementando a acessibilidade de teclado (HTML)

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 do usuário: entrada por toque e muito mais.

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

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>

<!—Including static text in the tab order is confusing. -->
<p tabIndex="0">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

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.

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.

Tópicos relacionados

Cumprindo os requisitos de acessibilidade básica

 

 

Mostrar:
© 2014 Microsoft. Todos os direitos reservados.