Supporting ScreenReaders in Silverlight

While teaching a Silverlight class on campus last week, I had a chance to get a coffee at a cafe on campus and ran into someone who works on the Windows build team. I noticed that he was blind because he was asking the barista to help him figure out whether his money was a $1, $5 or $10 bill. Of course, the fact that US Currency is same sized has always baffled me since the rest of the world uses different sizes to combat this very problem...but I digress.

While we were waiting for our coffee, he asked me about how Silverlight works with ScreenReaders. I've read the docs so I knew that it worked, but I'd never tried it out. It occurred to me that since Silverlight supports screenreaders (and has since at least Silverlight 2).  While the screenreaders do an admirable job without help, Silverlight provides the hooks required to improve the description of controls on your applications. 

In Silverlight, to add helpful text that describes controls, you can simple use the AutomationProperties attached properties.  AutomationProperties.Name and AutomationProperties.HelpText are the most important for screenreaders.  For example, here is a simple piece of XAML with the AutomationProperties set:

<Button Content="<<"
        Margin="2"
        Width="45"
        AutomationProperties.Name="First Game"
        AutomationProperties.HelpText="Moves to the first XBox Game."
        x:Name="firstButton" />
<Button Content="<"
        Margin="2"
        Width="45"
        AutomationProperties.Name="Previous Game"
        AutomationProperties.HelpText="Moves to the previous XBox Game."
        x:Name="prevButton" />
<Button Content=">"
        Margin="2"
        Width="45"
        AutomationProperties.Name="Next Game"
        AutomationProperties.HelpText="Moves to the next XBox Game."
        x:Name="nextButton" />
<Button Content=">>"
        Margin="2"
        Width="45"
        AutomationProperties.Name="Last Game"
        AutomationProperties.HelpText="Moves to the last XBox Game."
        x:Name="lastButton" />
</StackPanel>
<TextBlock Text="Name" />
<TextBox Text="{Binding ProductName}"
         AutomationProperties.Name="XBox Game Title"
         AutomationProperties.HelpText="The Name of the XBox Game" />

With these properties in place, the screenreaders can do a better job.  You can see it working here:

Are you doing anything about making your Silverlight applications accessible?

• May, 10, 2009, 2:52 PM |
• 6 Comment(s)
  
• Tag(s): Silverlight
  
•