Expondo informações básicas sobre elementos da interface do usuário (HTML)

Applies to Windows and Windows Phone

Procurando a versão C#/VB/C++/XAML deste tópico? Veja Expondo informações básicas sobre elementos da interface do usuário (XAML).

As tecnologias assistenciais, como leitores de tela, precisam de informações sobre os elementos de interface do usuário em um aplicativo. O sistema fornece as informações com base na marcação HTML do aplicativo. Iremos descrever o HTML que você precisa implementar para garantir que o aplicativo exponha as informações básicas requeridas pelas tecnologias assistenciais.

Nome acessível

Um nome acessível é uma cadeia de caracteres de texto curta e descritiva que o leitor de tela usa para anunciar um elemento de interface do usuário. Defina o nome acessível dos elementos de interface do usuário com um significado para entender o conteúdo ou a interação com a interface do usuário. Esses elementos costumam incluir imagens, campos de entrada, botões, controles, regiões e assim por diante.

A tabela a seguir descreve como definir um nome acessível para vários tipos de elementos HTML.

Tipo de elementoDescrição
Texto estáticoEm texto e outras marcas HTML, o nome acessível é baseado no texto visível (interno). Alguns exemplos são as marcas p e h1.
ImagensEm imagens, o atributo alt é usado como nome acessível. Isso se aplica a imagens especificadas com a marca img, botões de imagem especificados com <input type="image"> e marcas area usadas com mapas de imagens. Para saber mais sobre o assunto, veja a seção sobre mapas de imagens na especificação HTML5 do World Wide Web Consortium (W3C) .
Campos de formulário O nome acessível de um campo de formulário, como <input type="text| password| checkbox| radio|...">, ou de uma marca select ou textarea deve ser igual ao rótulo do campo mostrado. A melhor maneira de associar um rótulo a um campo de entrada é usar a marca label e definir o atributo for. Quando o usuário clica na marca label, o foco muda para o controle associado. Para saber mais sobre os rótulos de elementos de interface do usuário, veja a seção sobre rótulos e descrições nas Práticas de Criação da Web Accessibility Initiative - Accessible Rich Internet Applications (WAI-ARIA) 1.0.
Botões e links Por padrão, o nome acessível de um botão ou link se baseia no texto visível. Para marcas a e button, o nome acessível se baseia no texto interno da marca. Para uma marca input com type="button", o nome acessível se baseia no atributo value.
TabelasO nome acessível de uma tabela costuma ser definido com uma marca caption na tabela.
Elementos de estrutura e ponto de referênciaÉ importante rotular elementos de estrutura e ponto de referência, pois os leitores de tela usam os rótulos para navegar no documento. Elementos que precisam de rótulos incluem formulários, quadros, regiões e outros elementos com funções de ponto de referência, como "main", "navigation" e "search".
Elementos em uma div

Para todos os elementos que são tipicamente definidos com o uso de uma marca div, incluindo elementos personalizados, você pode definir um nome acessível usando um dos atributos a seguir:

  • aria-labelledby—para fazer referência ao elemento que contém o texto a ser usado como nome acessível.
  • aria-label—para definir o nome acessível diretamente.
  • title—para criar uma dica de ferramenta que também é usada como nome acessível.

Use os atributos anteriores com elementos de interface do usuário personalizados (por exemplo, com marcas div) e para substituir os atributos HTML padrão.

 

Este exemplo mostra como definir um nome acessível para vários tipos de elementos HTML.


<!--Label landmark regions by using aria-labelledby or aria-label. -->      
<h1 id="formLabel">Personal Information</h1>
<form aria-labelledby="formLabel" ... > 

    <!-- The label tag with "for" attribute sets the name of the input field. -->
    <label for="fullname">Full Name</label>
    <input id="fullname" type="text" accesskey="N"/>

    <!-- Alt text is used as the image accessible name. -->      
    <img src="..." alt="Personal Photo" />

    <!-- An image button's accessible name is set with the alt attribute. -->
    <input type="image" src="images/back.png" alt="Back" onclick="..." />

    <!-- Inner text is used as the accessible name for A, BUTTON, P, and so on. -->
    <a href="...">More Photos</a> 

    <!-- The submit button uses default caption text as the accessible name. -->
    <input type="submit" /> 

</form>

Para controles do Tempo de Execução do Windows, você pode usar a vinculação de dados para definir o nome acessível.


<!-- Data binding maps the image alt attribute to the data source title field -->
<div class="..." data-win-control="Win.Binding.Template">
    <div class="image" data-win-bind="...; alt: title"></div>
    <div class="text">
        <h1 class="title" data-win-bind="textContent: title"></h1>
        <p class="description" data-win-bind="textContent: description"></p>
    </div>
</div>

<!-- List view can set the accessible name with aria-labelledby or aria-label. -->
<h1 id="pageTitle">Items collection page</ h1>
<div data-win-control="Win.UI.ListView" data-win-options="{...}" 
    aria-labelledby="pageTitle">
</div>

Observação  A plataforma de acessibilidade de Automação da Interface do Usuário Microsoft gera a representação de aplicativos em árvore da interface do usuário para uso do cliente de Automação da Interface do Usuário. Ela representa a estrutura dos elementos de interface do usuário disponíveis para inspeção e interação de tecnologias assistenciais. Você não está especificando suas próprias informações de Automação da Interface do Usuário. Mas está dependendo do suporte integrado do host do Tempo de Execução do Windows que converte toda atribuição relevante para o conteúdo HTML em informações equivalentes da Automação da Interface do Usuário, que criam uma acessibilidade comum ou representação de automação de cada aplicativo que está sendo exibido.

Valor

Se um elemento de interface do usuário tem um valor associado importante para entender sua condição, exponha essa informação às estruturas de acessibilidade.

Por exemplo, um controle HTML hospedado em uma marca div com o atributo role definido como "slider", "progressbar" ou "spinbutton" deve expor os atributos aria-valuemax, aria-valuemin e aria-valuenow. Além disso, o aplicativo tem que manter o atributo aria-valuenow dinamicamente para refletir as mudanças no elemento. É bom definir o atributo aria-valuetext para fornecer a cadeia de caracteres de texto correspondente ao valor atual do atributo aria-valuenow.


<div id="sl" role="slider" ... 
    aria-valuemin="1" aria-valuemax="5" aria-valuenow="3" aria-valuetext="good"...>
</div>

<script>
    function manageValue()
    {
        ...
        // Dynamically maintain aria properties for the current value and text.
        sl.setAttribute("aria-valuenow", currentValue);
        sl.setAttribute("aria-valuetext", currentValueText);
        ...
    }
}
</script>


Estado

Às vezes, é importante definir e manter o estado acessível de um elemento de interface do usuário (por exemplo, usando o atributo aria-disabled). É especialmente importante definir e manter o estado de acessibilidade de elementos de interface do usuário personalizados. O sistema tem suporte interno para manter o estado acessível de todos os elementos de interface do usuário e controles do Windows padrão.


<!-- Declaring accessibility attributes for a custom image button. -->
<div id="folders" role="tree" aria-label="Folders">
...
</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.leftArrow) {
            // The node is collapsed if it has children
            e.srcElement.setAttribute('aria-expanded', false );
        } else if ( e.keyCode === Win.Utilities.Key.rightArrow) {
            // The node is expanded if it has children
            e.srcElement.setAttribute('aria-expanded', true );
        }
    });
</script>

Observação  Para remover um elemento e todo seu conteúdo da árvore de Automação de Interface de Usuário, use o atributo aria-hidden com o valor definido como true.

Função

Atribua uma função WAI-ARIA válida (não abstrata) aos elementos de interface do usuário personalizados. Assim, os leitores de tela têm mais informações sobre os comportamentos e propriedades que devem esperar dos elementos de interface do usuário.

Também é importante definir a função de elementos referenciados pelo atributo aria-labelledby e de elementos que expõem itens de interface do usuário importantes para a interação do usuário.

Neste exemplo, os elemento de um modo de exibição de árvore são marcados com as funções WAI-ARIA correspondentes para que os leitores de tela possam entender a estrutura a exibição e para expor seu comportamento de expandir–recolher.


<!-- Custom tree view element. -->
<div id="folders" role="tree" aria-label="Folders" tabindex="0" 
        aria-activedescendant="n-0" >
    <div id="n-0" 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>

Para ilustrar melhor os conceitos de acessibilidade, o modo de exibição de árvore do exemplo anterior foi simplificado para incluir apenas um elemento para cada nó. Em uma implementação real, os nós expansíveis incluiriam dois subelementos, um para representar a funcionalidade expandir–recolher e outro para expor a funcionalidade de ativação de nós (por exemplo, carregando uma lista de arquivos e pastas contidos).


<!-- An example of the expandable and actionable node. -->
...
    <div role="presentation">
    <img src="images/expand.png" role="presentation" onclick="expColl(event)"/>
    <span id="n-0" role="treeitem" onclick="activateItem(event)"
        aria-expanded="true" >Libraries</span>
    </div>
...

No exemplo anterior, role="presentation" remove os elementos sem valor semântico da árvore da interface do usuário (ou árvore de acessibilidade). role="presentation" remove o elemento atual da árvore da interface do usuário, mas não afeta os subelementos contidos. Para remover o elemento de interface do usuário e todos seus elementos filhos da árvore da interface do usuário, use aria-hidden="true".

Algumas marcas HTML5, como a ou img, têm funções implícitas fortes que só podem ser substituídas pela função "presentation".

Descrição acessível (opcional)

Uma descrição acessível fornece informações adicionais de acessibilidade sobre um determinado elemento de interface do usuário. Normalmente, você fornece uma descrição acessível quando o nome acessível sozinho não informa adequadamente a finalidade do elemento.

O leitor de tela Narrador só lê a descrição acessível do elemento quando o usuário pede mais informações sobre o elemento, pressionando Caps Lock + F.

A melhor maneira de fornecer uma descrição acessível é usando o atributo aria-describedby. Esse atributo faz referência a um ou mais elementos de interface do usuário cujo conteúdo de texto o sistema usa como descrição acessível. Como opção, você pode fornecer a descrição acessível implementando uma dica de ferramenta com o atributo title. Para saber mais, veja Tornando as dicas de ferramentas acessíveis.


<!-- Declaring visible text as the accessible description of a table. -->
<p id="tableDesc">This table describes travel expenses organized by destination and dates.</p>
<table aria-describedby="tableDesc">...<table>

Tópicos relacionados

Cumprindo os requisitos de acessibilidade básicos

 

 

Mostrar:
© 2014 Microsoft