Expondo a estrutura lógica do seu aplicativo

Expondo a estrutura lógica do seu aplicativo do Tempo de Execução do Windows

[ Este artigo destina-se aos desenvolvedores do Windows 8.x e do Windows Phone 8.x que escrevem aplicativos do Windows Runtime. Se você estiver desenvolvendo para o Windows 10, consulte documentação mais recente]

Estrutura lógica em HTML

Com a marcação correta dos elementos de estrutura e ponto de referência para acessibilidade, o leitor de tela pode criar um resumo de página ou sumário. Essas informações ajudam a entender o conteúdo da página, fornecendo uma forma eficiente para navegar por ela.

Em geral, você deve dividir todo o conteúdo da página em regiões lógicas e sub-regiões opcionais, e marcar cada região e sub-região com uma função de ponto de referência e um nome acessível apropriado. Especificamente, cada página precisa ter pelo menos uma região marcada com role="main", que representa o conteúdo principal da página. Outras funções de ponto de referência importantes são "navigation" e "search", que marcam áreas com funcionalidades de navegação ou pesquisa. Outras funções de ponto de referência para marcar o conteúdo da página são "banner", "contentinfo" e "complementary".

Se o aplicativo tiver regiões que não correspondam a uma função de ponto de referência existente, marque as regiões usando a função de estrutura de "region". Por fim, você deve rotular todos os formulários HTML, quadros e elementos iframe com nomes acessíveis.

Ao rotular uma região, use o atributo aria-labelledby para fazer referência a algum texto visível e usá-lo como rótulo da região. Sempre que possível, use um elemento de cabeçalho para rotular uma região, usando uma marca de cabeçalho HTML como <h1>, <h2> ou <h3>, ou marcando o texto referenciado com role="header" e o atributo aria-level correspondente. Se não houver texto visível para usar como rótulo da região, defina o nome acessível usando o atributo aria-label ou o atributo title (normalmente para quadros e elementos iframe). Às vezes, a região também pode ter uma descrição adicional marcada com um atributo aria-describedby. Para saber mais, consulte Navegação de ponto de referência (widget) na documentação do World Wide Web Consortium (W3C).


<div id="title" role="banner" aria-labelledby="label_title">
    <a href="..."><img class="logo" alt="Home Page" src="..." /></a>
    <h1 id="label_title">...</h1> 
  </div>    

  <div id="nav1" >
    <h2 class="nav" id="nav1_label">...</h2>
    <ul id="navigation1" role="navigation" aria-labelledby="nav1_label">
      <li><a href="...">...</a></li>
      <li><a href="...">...</a></li>
      <li><a href="...">...</a></li>
    </ul>
  </div>

  <form id="search" ...>
    <div role="search" aria-labelledby="search_box">
      <label for="search_box">Search for ...</label>
      <input type="text" id="search_box" >
      <input type="submit" value="Search">
    </div>
  </form>

  <div id="contact-info" role="complementary" aria-labelledby="contact_label">
    <h4 id="contact_label">contact info</h4>
  </div>
	
  <div id="content-col-1" role="main" aria-labelledby="main_label"> 
    <h1 id="main_label">Welcome to ...</h1>  
    ...
  </div>

  <div id="copyright" role="contentinfo">Copyright ...</div>

Estrutura lógica em XAML

A interface do usuário XAML possui o equivalente direto do atributo role XHTML e o vocabulário que é usado para introduzir a estrutura lógica em elementos gerais da interface do usuário. A XAML possui mais suporte direto de Automação da Interface do Usuário Microsoft, que utiliza tipos de controle para descrever elementos na interface do usuário. Todos os controles ou elementos que você utiliza em uma interface do usuário XAML informa seu tipo de controle para o controle de Automação da Interface do Usuário ou a árvore de conteúdo. No entanto, marcas puramente semânticas como "complementary" não são mapeadas para a Automação da Interface do Usuário e não são usadas em uma interface do usuário XAML. Consulte Mapeando funções ARIA para Automação da Interface do Usuário.

Tópicos relacionados

Implementando a acessibilidade para tipos de conteúdo específicos

 

 

Mostrar:
© 2017 Microsoft