Exposition de la structure logique de votre application Windows Runtime

Applies to Windows and Windows Phone

Structure logique en HTML

Le marquage correct des éléments de structure et de point de repère pour l’accessibilité permet à un lecteur d’écran de créer un résumé de page ou un sommaire. Ces informations aident l’utilisateur à comprendre le contenu des pages, et lui offrent un moyen efficace de parcourir la page.

En général, vous devez fractionner tout le contenu de la page en régions logiques et en sous-régions facultatives, et vous devez marquer chaque région et sous-région avec un rôle de point de repère et un nom accessible appropriés. Plus précisément, chaque page doit contenir au moins une région marquée avec role="main" qui représente le contenu principal de la page. Les autres rôles de point de repère importants sont "navigation" et "search", qui doivent marquer les régions ayant des fonctionnalités de navigation ou de recherche. "banner", "contentinfo" et "complementary" sont d’autres rôles de point de repère pour le marquage de contenu de page.

Si votre application contient des régions qui ne correspondent pas à un rôle de point de repère existant, marquez ces régions à l’aide du rôle de structure "region". Enfin, vous devez étiqueter tous les formulaires, cadres et éléments iframe HTML avec des noms accessibles.

Lors de l’étiquetage d’une région, utilisez l’attribut aria-labelledby pour faire référence à du texte visible à utiliser comme étiquette de cette région. Utilisez, autant que possible, un élément d’en-tête pour étiqueter une région, soit en utilisant une balise d’en-tête HTML telle que <h1>, <h2> ou <h3>, soit en marquant du texte référencé avec le paramètre role="header" et l’attribut aria-level correspondant. S’il n’y a aucun texte visible à utiliser comme étiquette de région, définissez le nom accessible à l’aide de l’attribut aria-label ou de l’attribut title (généralement pour les cadres et les éléments iframe). Dans certains cas, une région peut également avoir une description supplémentaire marquée avec un attribut aria-describedby. Pour plus d’informations, voir Landmark Navigation (widget) dans la documentation du 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>

Structure logique en XAML

L’interface utilisateur XAML n’a pas l’équivalent direct de l’attribut role XHTML et du vocabulaire utilisé pour présenter la structure logique aux éléments généraux de l’interface utilisateur. XAML est plus directement solidaire de Microsoft UI Automation, qui utilise des types de contrôle pour décrire les éléments de l’interface utilisateur. Tout contrôle ou élément que vous utilisez dans une interface utilisateur XAML indique son type de contrôle à l’arborescence des contenus ou des contrôles UI Automation. Toutefois, un balisage purement sémantique tel que "complementary" n’a pas de correspondance dans UI Automation et n’est pas utilisé dans une interface utilisateur XAML. Voir Mappage de rôles ARIA à UI Automation.

Rubriques associées

Implémentation de l’accessibilité pour des types de contenus particuliers

 

 

Afficher:
© 2014 Microsoft