Supporting screen readers

One of the most common ways to bring accessibility to an app is to provide support for screen readers, which are used to narrate and describe elements on the screen. In this section, we will use the Xamarin.Forms AutomationProperties class to easily add screen reader support to our entry detail page:

  1. First, we will need to update each of the detail elements in DetailPage.xaml to be included in the accessibility tree, making them readable by the operating systems' screen readers:
      <StackLayout Padding="10" Grid.Row="1">
<Label ... Text="{Binding Entry.Title}"
AutomationProperties.IsInAccessibleTree="true" />
<Label ... Text="{Binding Entry.Date, StringFormat='{0:M}'}"
AutomationProperties.IsInAccessibleTree="true" />
<Image ... Source="{Binding Entry.Rating, Converter={StaticResource RatingToStartImageNameConverter}}"
AutomationProperties.IsInAccessibleTree="true" />
<Label ... Text="{Binding Entry.Notes}"
AutomationProperties.IsInAccessibleTree="true" />
</StackLayout>
  1. Next, we will need to update each of the detail elements in DetailPage.xaml to describe itself. This is what the screen reader will use when narrating. There are a couple of properties that we can use for this, such as AutomationProperties.Name and AutomationProperties.HelpText. Name is used to identify the element, while HelpText is used to describe what the element is used for or what type of data should be provided to the element, as shown in the following code:
      <StackLayout Padding="10" Grid.Row="1">
<Label ... Text="{Binding Entry.Title}"
AutomationProperties.IsInAccessibleTree="true"
AutomationProperties.HelpText="Title of trip" />
<Label ... Text="{Binding Entry.Date, StringFormat='{0:M}'}"
AutomationProperties.IsInAccessibleTree="true"
AutomationProperties.HelpText="Date of trip" />
<Image ... Source="{Binding Entry.Rating, Converter={StaticResource RatingToStartImageNameConverter}}"
AutomationProperties.IsInAccessibleTree="true"
AutomationProperties.HelpText="{Binding Entry.Rating, StringFormat='{0} star rating'}" />
<Label ... Text="{Binding Entry.Notes}"
AutomationProperties.IsInAccessibleTree="true"
AutomationProperties.HelpText="Notes from trip" />
</StackLayout>

Notice how we used data binding to set the AutomationProperties.HelpText attribute for the rating Image tag.

Each platform handles accessibility and screen reading differently—using different combinations and precedence of the AutomationProperties attached properties. Refer to the Xamarin.Forms accessibility documentation and the accessibility documentation specific to each platform for more details.
..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.119.133.160