Exposing the logical structure of your Windows Runtime app
[This article is for Windows 8.x and Windows Phone 8.x developers writing Windows Runtime apps. If you’re developing for Windows 10, see the latest documentation]
Logical structure in HTML
Properly marking structure and landmark elements for accessibility enables a screen reader to build a page summary or table of contents. This information helps the user understand the page content, and provides an efficient way for the user to navigate the page.
In general, you should split all page content into logical regions and optional subregions, and you should mark each region and subregion with an appropriate landmark role and accessible name. Specifically, each page should contain at least one region marked with role="main" that represents the main content of the page. Other important landmark roles are "navigation" and "search", which should mark areas that have navigation or search functionality. Other landmark roles for marking page content include "banner", "contentinfo", and "complementary".
If your app contains regions that do not correspond to an existing landmark role, mark the regions by using the structure role of "region". Finally, you should label all HTML forms, frames, and iframe elements with accessible names.
When labeling a region, use the aria-labelledby attribute to refer to some visible text to use as the region label. Whenever possible, use a header element to label a region, either by using an HTML heading tag such as <h1>, <h2>, or <h3>, or by marking referenced text with role="header" and the corresponding aria-level attribute. If there is no visible text to use as the region label, set the accessible name by using the aria-label attribute or the title attribute (typically for frames and iframe elements). In some cases, a region can also have an additional description marked with an aria-describedby attribute. For more information, see Landmark Navigation (widget) in the World Wide Web Consortium (W3C) documentation.
<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>
Logical structure in XAML
XAML UI doesn't have the direct equivalent of the XHTML role attribute and vocabulary that's used to introduce logical structure to general UI elements. XAML is more directly supportive of Microsoft UI Automation, which uses control types to describe elements in the UI. Any control or element you use in a XAML UI reports its control type to the UI Automation control or content tree. However, purely semantic tagging such as "complementary" doesn't map to UI Automation and isn't used in a XAML UI. See Mapping ARIA roles to UI Automation.