Making list views accessible

  • Article

[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]

A Windows Runtime ListView control is accessible by default. For HTML, you only need to set the accessible name for the top-level div list that represents the ListView control, and map the accessibility properties to data, if necessary. For XAML, the ListViewItem items in the ListView control that are created from an ItemTemplate use value promotion for the databound values in the items.

No additional work is needed to set accessible names for list items. That's because the platform automatically sets the accessible names by reusing the text of the list items.

Here's how the accessible names for list view items appear in the Inspect tool:

This example shows the HTML that produces the list item in the previous example:

<div class="itemtemplate" data-win-control="WinJS.Binding.Template">
    <img class="item-image" src="#" data-win-bind="src: backgroundImage; alt: title" />
    <div class="item-info">
        <h4 class="item-title" data-win-bind="textContent: title"></h4>
        <h6 class="item-subtitle win-type-ellipsis" data-win-bind="textContent: subtitle"></h6>
        <h4 class="item-description" data-win-bind="textContent: description"></h4>
    </div>
</div>

If you want to override the accessible names of list items, or if your list items don’t have any text content, you need to explicitly set the accessible names for the list item objects. For HTML, use the techniques described in Exposing basic information about UI elements (HTML). For XAML, you can use the attached property AutomationProperties.Name, use techniques described in Exposing basic information about UI elements (XAML), or perhaps use a custom items peer for your items.

As an alternative for list items that don’t have text content, you can add text content with the same foreground and background color in Cascading Style Sheets (CSS) (for HTML) or where a text Foreground value is same as the container's Background (for XAML) to preserve the initial appearance and still have a "hidden" text element in the UI Automation tree.

Note  Hiding a text element in CSS or with the aria-hidden attribute causes the text element to be removed from the UI Automation tree.

 

Quickstart: Adding a ListView (HTML)

Adding ListView and GridView (XAML)

Exposing basic information about UI elements (HTML)

Exposing basic information about UI elements (XAML)