Share via

winRT apps: Implementing Screen Reading

  • Article

There is a tool called Narrator which is a screen reader that reads text on the screen aloud and describes events like error messages so you can use your PC without a display. Narrator is available in English (United States, United Kingdom, and India), French, Italian, German, Japanese, Korean, Mandarin (Chinese Simplified and Chinese Traditional), Cantonese (Chinese Traditional), Spanish (Spain and Mexico), Polish, Russian, and Portuguese (Brazil).
 You Can turn on Narrator anytime by pressing Windows + Enter key or from Ease of Access center. In windows phone you can turn on narrator from settings ->Ease of Access->Narrator 

Implementing Screen Reading

Let us create a Windows Universal App with a very simple UI. I am going to share UI for both Windows Store and Windows Phone Application. If you are new to Universal Windows App or sharing views and code for both the platforms please follow my another article Conditional Compilation in Universal Apps . Create a Windows Universal App in C#. Selecting the blank app and name it as AccessibiltyExample
**
** http://poojabaraskar.azurewebsites.net/wp-content/uploads/2015/07/create1.png

To share the view drag one of the MainPage.xaml file to shared project and then deleted it from the other two projects. Now there is a common MainPage.xaml file for both the projects. The view of project looks like this in Solution Explorer.

 http://poojabaraskar.azurewebsites.net/wp-content/uploads/2015/07/structure.png

Now let us create a simple UI with a TextBox a Button and a TextBlock. If we turn on Narrator and launch our app with English as default language, we will hear *

"AccessibilityExample.windows Windows"* *
"Editing"*  

To narrate the purpose of TextBox we need to add the following automation property 

 <Viewbox HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Column="1" Grid.Row="1" >
 <TextBox x:Name="userName" AutomationProperties.Name="Enter Your Name"/> 
 </Viewbox>
<Viewbox Grid.Column="3" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Row="1" >
 <Button Content="Enter" Click="Button_Click"/>
</Viewbox>
<Viewbox Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Row="3" >
 <TextBlock x:Name="display" TextWrapping="Wrap" Text="" AutomationProperties.LiveSetting="Polite" />
</Viewbox>

Now the Narrator will say  
"AccessibilyExample.windows window"
 "Enter your name"
 "Editing"

Localizing automation properties

Localization help us to reach larger set of audience. So let us localize our Narrator experience and make aur app talk in user's language.

<TextBox x:Name="userName" x:Uid="userName" AutomationProperties.Name="Enter your name"/>

Now in resource file add an entry

 http://poojabaraskar.azurewebsites.net/wp-content/uploads/2015/07/resw.png 

 Now let us test our app in windows phone emulator with default language French. If you turn on Narrator by pressing and holding the Volume up key and pressing start button, now you will hear

 http://poojabaraskar.azurewebsites.net/wp-content/uploads/2015/07/phone-narrator-on.png 
 
"AccessibiltyExample.windowsPhone window” ***
“Entrez votre nom*”****
 ***"Editing”

Reference