Repères et en-têtesLandmarks and Headings

Une interface utilisateur est généralement organisée de manière visuellement efficace, ce qui permet à un utilisateur de voir rapidement ce qui les intéresse sans avoir à ralentir pour lire tout le contenu.A user interface is typically organized in a visually efficient way, allowing a sighted user to quickly skim for what interests them without having to slow down to read all the content. Un utilisateur de lecteur d’écran doit avoir ce même capacité d’évolution.A screen reader user needs to have this same skimming ability. Les éléments géographiques et les en-têtes définissent des sections d’une interface utilisateur qui facilitent la navigation pour les utilisateurs de la technologie d’assistance (au niveau de).Landmarks and headings define sections of a user interface that aid in more efficient navigation for users of assistive technology (AT). Le fait de marquer le contenu dans des points de vue et des en-têtes offre à l’utilisateur d’un lecteur d’écran la possibilité de parcourir du contenu de la même façon qu’un utilisateur à l’écran.Marking up the content into landmarks and headings provides a screen reader user the option to skim content similar to the way a sighted user would.

Les concepts des points d’accès Aria, des en-têtes Ariaet des titres html ont été utilisés dans le contenu Web depuis des années pour permettre une navigation plus rapide par les utilisateurs de lecteurs d’écran.The concepts of ARIA landmarks, ARIA headings, and HTML headings have been used in web content for years to allow faster navigation by screen reader users. Les pages Web utilisent des points de vue et des titres pour rendre leur contenu plus utilisable en permettant à l’utilisateur d’accéder rapidement au gros bloc (repère) et au plus petit bloc (en-tête).Web pages utilize landmarks and headings to make their content more usable by allowing the AT user to quickly get to the large chunk (landmark) and smaller chunk (heading). Plus précisément, les lecteurs d’écran ont des commandes qui permettent aux utilisateurs de passer d’un point de vue à un autre et d’accéder entre les en-têtes (niveau de titre suivant/précédent ou spécifique).Specifically, screen readers have commands allowing users to jump between landmarks and jump between headings (next/previous or specific heading level). Il est important de prendre en compte les points de repère et les en-têtes dans vos applications pour les mêmes raisons.It is important to consider landmarks and headings in your apps for the same reasons.

Les points de vue permettent de regrouper le contenu en différentes catégories, telles que la recherche, la navigation, le contenu principal, etc.Landmarks enable content to be grouped into various categories such as search, navigation, main content, and so on. Une fois regroupés, l’utilisateur peut naviguer rapidement entre les groupes.Once grouped, the AT user can quickly navigate between the groups. Cette navigation rapide permet à l’utilisateur d’ignorer des quantités substantielles de contenu qui, auparavant, auraient dû être parcourues par élément pour une expérience médiocre.This quick navigation allows the user to skip potentially substantial amounts of content which previously may have had to be navigated over item by item making for a poor experience.

Par exemple, lorsque vous utilisez un panneau d’onglets, considérez-le comme un repère de navigation.For example, when using a tab panel, consider this a navigational landmark. Lorsque vous utilisez une zone d’édition de la recherche, considérez cet repère de recherche et envisagez de définir votre contenu principal en tant que repère de contenu principal.When using a search edit box, consider this a search landmark and consider setting your main content as a main content landmark. Que ce soit dans un repère ou même en dehors d’un repère, envisagez de définir des sous-éléments comme en-têtes avec des niveaux de titre logiques.Whether within a landmark or even outside a landmark, consider setting sub elements as headings with logical heading levels.

Examinez la page facilité d’accès de l’application Paramètres Windows.Consider the Ease of Access page in the Windows Settings app.

Page facilité d’accès de l’application Paramètres Windows

Une zone de modification de recherche est incluse dans un repère de recherche.There is a search edit box which is wrapped within a search landmark. Les éléments de navigation à gauche sont enveloppés dans un repère de navigation et le contenu principal à droite est encapsulé dans un repère de contenu principal.The navigational elements on the left are wrapped within a navigational landmark and the main content on the right is wrapped within a main content landmark. Pour aller plus loin, dans le volet de navigation, il y a un titre de groupe principal appelé facilité d’accès , qui est un titre de niveau 1.Taking this further, within the navigational landmark there is a main group heading called Ease of Access which is a heading level 1. Sous, il s’agit des sous -options application, audition, etc.Under that are the sub options Vison, Hearing, and so on. Ils ont le niveau de titre 2.These have a heading level 2. Le fait de définir les en-têtes se poursuit dans le contenu principal, en définissant à nouveau l’objet principal, l' affichage, comme niveau de titre 1 et les sous-groupes, par exemple faire tout le plus grand sous forme de titre niveau 2.Setting headings is continued within the main content again setting the main subject, Display, as heading level 1 and sub groups such as Make everything bigger as heading level 2.

L’application paramètres est accessible sans les points de repère et les en-têtes, mais elle est plus utilisable.The Settings app would be accessible without landmarks and headings, but it becomes more usable with them. Un utilisateur de lecteur d’écran peut rapidement et facilement accéder au groupe (repère) dont il A besoin, puis accéder rapidement au sous-groupe (en-tête).A screen reader user can quickly and easily get to the group (landmark) they need and then quickly get to the sub group (heading) as well.

Utilisez AutomationProperties. LandmarkTypeProperty pour configurer l’élément d’interface utilisateur en tant que type d’élément géographique de votre choix.Use AutomationProperties.LandmarkTypeProperty to setup the UI element as the type of landmark you wish. Cet élément d’interface utilisateur repère encapsule tous les autres éléments d’interface utilisateur qui ont un sens pour ce repère.This landmark UI element would encapsulate all the other UI elements which make sense for that landmark.

Utilisez AutomationProperties. LocalizedLandmarkTypeProperty pour nommer spécifiquement le repère.Use AutomationProperties.LocalizedLandmarkTypeProperty to specifically name the landmark. Si vous sélectionnez un type de repère prédéfini, tel que principal ou de navigation, ces noms sont utilisés pour le nom du repère.If you select a predefined landmark type such as main or navigational, these names will be used for the landmark name. Toutefois, si vous définissez le type de repère sur personnalisé, vous devez spécifiquement nommer le repère par le biais de cette propriété.However, if you set the landmark type to custom you must specifically name the landmark through this property. Vous pouvez également utiliser cette propriété pour remplacer les noms par défaut des types d’éléments de rapport non personnalisés.You can also use this property to override the default names from the non-custom landmark types.

Utilisez AutomationProperties. HeadingLevel pour définir l’élément d’interface utilisateur en tant que titre d’un niveau spécifique, de niveau1 à Level9.Use AutomationProperties.HeadingLevel to set the UI element as a heading of a specific level from Level1 through Level9.

ExemplesExamples

Pour obtenir de nombreux exemples de code qui montrent comment résoudre de nombreux problèmes courants d’accessibilité par programme dans les applications de bureau Windows, consultez exemples de code pour la résolution des problèmes courants d’accessibilité par programmation dans les applications de bureau Windows.For numerous code samples showing how to resolve many common programmatic accessibility issues in Windows desktop apps, see Code samples for resolving common programmatic accessibility issues in Windows desktop apps.

Ces exemples de code sont directement référencés par Microsoft Accessibility Insights pour Windows, ce qui peut aider à améliorer la plupart des problèmes d’accessibilité dans l’interface utilisateur.These code samples are referenced directly by Microsoft Accessibility Insights for Windows, which can help to spotlight many accessibility issues in UI.