更新日: 2010 年 12 月 24 日

C# の内容はこちらに掲載しています。10 行でズバリ!! [C#] Silverlight - アクセシビリティの実装

このコンテンツのポイント

  • 読み上げ機能への対応
  • ハイコントラストへの対応
  • アプリケーション リソースの使い方

今回紹介するコード

<UserControl x:Class="SampleAccessibility.MainPage"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  mc:Ignorable="d"
  d:DesignHeight="300" d:DesignWidth="400"
          x:Name="page"
  FontSize="16" >
  <Grid x:Name="LayoutRoot" >
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="Auto" />
      <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
      <RowDefinition Height="Auto" />
      <RowDefinition Height="Auto" />
      <RowDefinition Height="Auto" />
      <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
    <TextBlock Grid.Row="0" Grid.ColumnSpan="2" Margin="4">Sample Data Form</TextBlock>
    <TextBlock Grid.Row="1" Grid.Column="0" Margin="4">Name</TextBlock>
    <TextBox Grid.Row="1" Grid.Column="1" AutomationProperties.Name="Name" />
    <TextBlock Grid.Row="2" Grid.Column="0" Margin="4">Address</TextBlock>
    <TextBox Grid.Row="2" Grid.Column="1" AutomationProperties.Name="Address" />
    <TextBlock Grid.Row="3" Grid.Column="0" Margin="4">Phone</TextBlock>
    <TextBox Grid.Row="3" Grid.Column="1" AutomationProperties.Name="Phone" />
  </Grid>

</UserControl>

目次

  1. はじめに
  2. サンプル アプリケーションの作成準備
  3. ユーザー補助機能を使うための準備
  4. 読み上げ機能への対応
  5. ハイコントラスト対応
  6. アプリケーション リソースを使う
  7. おわりに

1. はじめに

Silverlight はすぐれたユーザー インターフェイスを実装する機能を持ちますが、そのような機能が視覚障碍者の方にとって、かえって使いづらいものになることもあります。Silverlight には、読み上げ機能への対応や、視認性の高いユーザー インターフェイスを実現するユーザー補助を実現する機能を提供しています。

今回は、簡単なアプリケーションを作成して、ユーザー補助の機能について解説します。

ページのトップへ


2. サンプル アプリケーションの作成準備

まず、Visual Studio を起動して、[ファイル] メニューの [新規作成] から [プロジェクト] をクリックし、[新しいプロジェクト] を開きます。次に、[インストールされたテンプレート] で [Silverlight] カテゴリーにある [Silverlight アプリケーション] を選びます。[名前] には任意のプロジェクト名を指定できますが、ここでは「SampleAccessibility」とします。

図 1. [新しいプロジェクト] ダイアログで Silverlight アプリケーションのプロジェクトを新規作成

[OK] をクリックすると、[新しい Silverlight アプリケーション] ダイアログが表示され、これから作成する Silverlight アプリケーションが埋め込まれた Web ページを持つ Web サイトを作成するかどうかと、Silverlight のバージョンが確認されます。ここでは、[Silverlight アプリケーションを新しい Web サイトでホストする] のチェックを外します。これで、この Silverlight アプリケーションを実行しようとするたびに、仮の Web サイトが自動作成されます。Silverlight のバージョンは、「Silverlight 4」のままにしておきます。

図 2. [新しい Silverlight アプリケーション] ダイアログ

[OK] ボタンをクリックすると、SampleAccessibility ソリューションと、Silverlight アプリケーションのための SampleAccessibility プロジェクトが作成されます。

図 3. プロジェクト作成直後の Visual Studio 2010

ページのトップへ


3. ユーザー補助機能を使うための準備

Windows には、アクセシビリティ (ユーザー補助) のための機能が組み込まれています。ここでは、Windows 7 における設定を説明します。

まず、コントロール パネルで、「コンピューターの簡単操作」から「コンピューターの簡単操作センター」を選びます。ここでは次の図のように表示されます。

図 4. コンピューターの簡単操作センター

拡大鏡を使うと、マウス カーソルの位置を中心に画面全体を大きく表示するか (Aero が有効な場合)、画面上部にカーソル位置付近の拡大イメージを表示します。スクリーン キーボードは、画面上に仮想的なキーボードが表示されます。

今回の説明で使う読み上げを使うためには、「ナレーターを有効にします」をクリックします。すると、「Microsoft ナレーター」というウィンドウが開きます。この状態で、Windows 上で操作するとキー入力やアプリケーションを切り替えるたびに、該当テキストが読み上げられます。

図 5. コンピューターの簡単操作センター

なお、本トピックの動作を確認するために「システム メッセージをアナウンスする」チェック ボックスをチェックしたままにしておいてください。また、現時点では Windows に日本語音声合成エンジンが標準搭載されていないため、このトピックで説明する読み上げ機能を日本語で利用する場合は、市販の読み上げエンジンを購入する必要があります。日本語音声合成エンジンを入手した場合は、[音声の設定] ボタンで「音声の設定 - ナレーター」ダイアログを表示し、音声を選択しておいてください。

図 6. 音声の選択

また、「ハイコントラストのセットアップをします」を選ぶと、ハイコントラスト (明暗のはっきりした色設定) について設定できます。Windows 7 では「左 Alt + 左 Shift + PrintScreen」を押すと、図 6 のような確認ダイアログが表示されて、ハイコントラストな配色に切り替えることができます。同じキーの組み合わせをもう一度押すと、元に戻ります。

図 7. ハイコントラストの確認画面

Note: 以下の説明では、日本語音声合成エンジンが搭載されていない環境を考慮して、読み上げ用のテキストには英文を使っています。

ページのトップへ


4. 読み上げ機能への対応

まず、典型的なデータ入力用のフォームを作成するため、XAML を以下のように定義します。

<UserControl x:Class="SampleAccessibility.MainPage"
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
   xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
   mc:Ignorable="d"
   d:DesignHeight="300" d:DesignWidth="400"
   FontSize="16">

 <Grid x:Name="LayoutRoot" Background="White">
   <Grid.ColumnDefinitions>
     <ColumnDefinition Width="Auto" />
     <ColumnDefinition Width="*" />
   </Grid.ColumnDefinitions>
   <Grid.RowDefinitions>
     <RowDefinition Height="Auto" />
     <RowDefinition Height="Auto" />
     <RowDefinition Height="Auto" />
     <RowDefinition Height="Auto" />
   </Grid.RowDefinitions>
   <TextBlock Grid.Row="0" Grid.ColumnSpan="2" Margin="4">Sample Data Form</TextBlock>
   <TextBlock Grid.Row="1" Grid.Column="0" Margin="4">Name</TextBlock>
   <TextBox Grid.Row="1" Grid.Column="1" />
   <TextBlock Grid.Row="2" Grid.Column="0" Margin="4">Address</TextBlock>
   <TextBox Grid.Row="2" Grid.Column="1" />
   <TextBlock Grid.Row="3" Grid.Column="0" Margin="4">Phone</TextBlock>
   <TextBox Grid.Row="3" Grid.Column="1" />

 </Grid>
</UserControl>

プログラムを実行すると、次の図のように表示されます。

図 8. テスト用のデータ入力画面

このとき、前述の手順にしたがって「Microsoft ナレーター」を有効にしていると、「SampleAccessibility、Windows Internet Explorer、…、Silverlight Control、Sample Data Form、Name、Address、Phone」のように読み上げられます (読み上げ方が違う場合があります。読み上げられない場合は、アクティブなアプリケーションを切り替えるか、フォーム上をクリックしてみてください)。

これにより、音声を聞くだけで「どのように構成されたページであるか」を把握することができます。しかし、それぞれの入力ボックス (TextBox) をクリックしてフォーカスを移動しても、その場所が「何を入力する場所」なのかはわかりません。

Silverlight のコントロールにはユーザー補助のために AutomationProperties というクラスのプロパティを用意しています。このクラスの Name プロパティが要素の「オートメーション名」を指定します。上記の例は、次のように修正できます。

     …
   </Grid.RowDefinitions>
   <TextBlock Grid.Row="0" Grid.ColumnSpan="2" Margin="4">Sample Data Form</TextBlock>
   <TextBlock Grid.Row="1" Grid.Column="0" Margin="4">Name</TextBlock>
   <TextBox Grid.Row="1" Grid.Column="1" AutomationProperties.Name="Name" />
   <TextBlock Grid.Row="2" Grid.Column="0" Margin="4">Address</TextBlock>
   <TextBox Grid.Row="2" Grid.Column="1" AutomationProperties.Name="Address" />
   <TextBlock Grid.Row="3" Grid.Column="0" Margin="4">Phone</TextBlock>
   <TextBox Grid.Row="3" Grid.Column="1" AutomationProperties.Name="Phone" />
 </Grid>
</UserControl>

プログラムを実行して、それぞれの入力ボックスをクリックすると、AutomationProperties.Name に設定したとおり、「Name」「Address」「Phone」とアナウンスされます。このとき、下図のようにテスト用のデータを入力すると「Name、Bill Gates」のように要素の名前と入力文字列を読み上げます。

図 9. データを入力

AutomationProperties.Name は、TextBox 以外のコントロールで使うこともできますが、コントロール名が読み上げられるのは入力フォーカスを受け取った時だけです。TextBlock や Image コントロールのような表示専用のコントロールでは、意味のあるコントロールにだけ AutomationProperties.Name を設定し、飾りのために用意されているものには設定しないようにします。

ページのトップへ


5. ハイコントラスト対応

Silverlight では、テンプレートやスタイルを活用した配色が容易にできます。また、ユーザー インターフェイスに洗練された、あるいは落ち着いた印象を与えるために、コントラスト (明暗の度合い) の低い配色を使うことがあります。しかし、このような配色は、視力の弱い方にとって見づらいものになることがあります。駅や歩道に設置されている点字ブロック (視覚障碍者誘導ブロック) は、凹凸で誘導するだけでなく、黄色という目立つ色で見分けやすいという利点があります。同じように、視力の弱い方にとってはコントラストの高いユーザー インターフェイスの方が使いやすいものになります。

一般にはコントラストの高い配色はギラギラしたものとなり目が疲れやすくなる原因にもなるため、設定により切り替えることが望ましいと言えます。Windows 7 のデスクトップのテーマには、「ハイコントラスト テーマ」と呼ばれるものが何種類か組み込まれています。Silverlight では、システムで「ハイコントラスト」が選ばれているかどうかは、System.Windows 名前空間にある SystemParameters クラスの HighContrast プロパティで判別できます。

Silverlight 自身はハイコントラスト用の配色セットを持っておらず、OS のテーマ設定によってコントロールの配色は変わりません。したがって、ハイコントラストが選択されているときに、どのような配色を使うかはアプリケーション開発者の責任です。つまり、ハイコントラスト設定によって「ユーザー インターフェイス全体の配色をまとめて切り替える」ことが必要になります。

たとえば、スタイルやデータ バインディングを使って、画面全体の配色を統一することができます。前述の入力フォームの例を次のように修正します。

<UserControl x:Class="SampleAccessibility.MainPage"
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
   xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
   mc:Ignorable="d"
   d:DesignHeight="300" d:DesignWidth="400"
   x:Name="page"
   FontSize="16" Foreground="Blue" BorderBrush="Gray">


 <UserControl.Resources>
   <Style x:Key="NormalStyle" TargetType="Grid">
     <Setter Property="Background" Value="Cyan" />
   </Style>
   <Style x:Key="HighStyle" TargetType="Grid">
     <Setter Property="Background" Value="Black" />
   </Style>
 </UserControl.Resources>


 <Grid x:Name="LayoutRoot" Style="{StaticResource NormalStyle}">
   <Grid.ColumnDefinitions>
     <ColumnDefinition Width="Auto" />
     <ColumnDefinition Width="*" />
   </Grid.ColumnDefinitions>
   <Grid.RowDefinitions>
     <RowDefinition Height="Auto" />
     <RowDefinition Height="Auto" />
     <RowDefinition Height="Auto" />
     <RowDefinition Height="Auto" />
   </Grid.RowDefinitions>
   <TextBlock Grid.Row="0" Grid.ColumnSpan="2" Margin="4">Sample Data Form</TextBlock>
   <TextBlock Grid.Row="1" Grid.Column="0" Margin="4">Name</TextBlock>
   <TextBox Grid.Row="1" Grid.Column="1" Background="Transparent"

            Foreground="{Binding ElementName=page, Path=Foreground}"
            BorderBrush="{Binding ElementName=page, Path=BorderBrush}" />
   <TextBlock Grid.Row="2" Grid.Column="0" Margin="4">Address</TextBlock>
   <TextBox Grid.Row="2" Grid.Column="1" Background="Transparent"

            Foreground="{Binding ElementName=page, Path=Foreground}"
            BorderBrush="{Binding ElementName=page, Path=BorderBrush}" />
   <TextBlock Grid.Row="3" Grid.Column="0" Margin="4">Phone</TextBlock>
   <TextBox Grid.Row="3" Grid.Column="1" Background="Transparent"

            Foreground="{Binding ElementName=page, Path=Foreground}"
            BorderBrush="{Binding ElementName=page, Path=BorderBrush}" />

 </Grid>
</UserControl>

これに対応するコード ビハインドでは、コンストラクターで次のように配色を初期化します。

Partial Public Class MainPage
   Inherits UserControl

   Public Sub New()
       InitializeComponent()

       If SystemParameters.HighContrast = True Then
           Me.Foreground = New SolidColorBrush(Colors.White)
           Me.BorderBrush = New SolidColorBrush(Colors.Yellow)
           LayoutRoot.Style = TryCast(Me.Resources("HighStyle"), Style)
       Else
           Me.Foreground = New SolidColorBrush(Colors.Blue)
           Me.BorderBrush = New SolidColorBrush(Colors.Gray)
           LayoutRoot.Style = TryCast(Me.Resources("NormalStyle"), Style)
       End If

   End Sub
End Class

WPF (Windows Presentation Foundation) では、DynamicResource (実行時に値を変更するリソース) が使えますが、Silverlight では StaticResource (実行時に値が変わらないリソース) しか使えません。このため、プログラムでリソースを書き換えることはできません (書き換えても画面に反映されません)。

上記の例では、メインページが初期化される際にコントラストの設定を参照し、自分自身の文字の色 (Foreground プロパティ) と枠の色 (BorderBrush プロパティ) を設定し、LayoutRoot (Grid コントロール) の Style プロパティにリソースで定義されたスタイルを割り当てています。ユーザー インターフェイスの定義ではコントロール間のデータ バインディングを多用していることに注意してください。バインディングによって、他のコントロールのプロパティの変更が、自分のコントロールのプロパティに反映されるようになり、プログラムでそれぞれのコントロールのプロパティを逐一修正する必要がなくなります。

以下に、このプログラムを通常のテーマ設定とハイコントラスト設定で実行した様子を示します。

図 10. 通常設定でアプリケーションを起動

図 11. ハイコントラスト設定でアプリケーションを起動

ページのトップへ


6. アプリケーション リソースを使う

Silverlight アプリケーションで多数のコントロールを使う場合、あるいは MainPage 以外の複数のページを利用する場合、すべてのコントロールのプロパティを個別に定義するのは面倒です。本来、コントロールのスタイルをリソースで定義する場合、「キー (x:Key)」を指定しなければ、TargetType で指定されたすべてのコントロール型に、そのリソースが適用されます。また、リソースを定義する場所としては、上記のように個別のページ (UserControl) で定義する代わりに、アプリケーション (App.xaml) でアプリケーション全体で利用できるリソースを定義できます。したがって、App.xaml でキー指定のないスタイルを定義すれば、個々のコントロールに対してアプリケーション全体でスタイルを再利用でき、配色を共通化できます。

ただし、前述のとおり、Silverlight では DynamicResource がないため、App.xaml で Resources 属性を使って定義しても、プログラムで修正できません。そこで、アプリケーションが呼び出された時点で、動的にリソースを作成してみます。

まず、MainPage.xaml の内容を冒頭にある「今回紹介するコード」のリストに戻します (UserControl に追加した Foreground や BorderBrush プロパティ、Grid コントロールの Background プロパティの指定を削除しておいてください。この指定があると、スタイルを変更しても背景の色を変えられません)。続いて、「5. ハイコントラスト対応」で、コード ビハインド MainPage.xaml.vb の MainPage クラスのコンストラクターに追加したコードを削除します。

ソリューション エクスプローラーで App.xaml を展開し、App.xaml.vb を次のように修正します。

   public Sub New()
       InitializeComponent()
   End Sub

   Private Sub Application_Startup(ByVal o As Object, ByVal e As StartupEventArgs) Handles Me.Startup
       Dim IsHigh = SystemParameters.HighContrast = True

       Dim pageStyle As New Style(GetType(MainPage))
       pageStyle.Setters.Add(New Setter(UserControl.ForegroundProperty,
                             New SolidColorBrush(IIf(IsHigh, Colors.White, Colors.Blue))))
       Resources.Add(GetType(MainPage), pageStyle)


       Dim gridStyle As New Style(GetType(Grid))
       gridStyle.Setters.Add(New Setter(Grid.BackgroundProperty,
                             New SolidColorBrush(IIf(IsHigh, Colors.Black, Colors.Cyan))))
       Resources.Add(GetType(Grid), gridStyle)


       Dim textboxStyle As New Style(GetType(TextBox))
       textboxStyle.Setters.Add(New Setter(TextBox.ForegroundProperty,
                                New SolidColorBrush(IIf(IsHigh, Colors.White, Colors.Blue))))
       textboxStyle.Setters.Add(New Setter(TextBox.BackgroundProperty,
                                New SolidColorBrush(IIf(IsHigh, Colors.Black, Colors.Cyan))))
       textboxStyle.Setters.Add(New Setter(TextBox.BorderBrushProperty,
                                New SolidColorBrush(IIf(IsHigh, Colors.Yellow, Colors.Gray))))
       Resources.Add(GetType(TextBox), textboxStyle)


       Me.RootVisual = New MainPage()
   End Sub

   Private Sub Application_Exit(ByVal o As Object, ByVal e As EventArgs) Handles Me.Exit

   End Sub

ここでは、アプリケーション起動時に呼び出される Startup イベント ハンドラーで、メインページを生成する前にアプリケーションのリソースを作成しています。具体的には、メインページ (MainPage)、LayoutRoot (Grid)、入力ボックス (TextBox) のそれぞれのスタイルをプログラムで生成しています。配色は、SystemParameters.HighContrast の設定により切り替えています。

テーマの設定を変えてプログラムを実行すると、前述と同じ結果になることがわかります。

ページのトップへ


7. おわりに

アクセシビリティへの対応は、障碍を持つ方にとって重要なことです。また、Web アプリケーションの対応を義務付けられる場合もあります。Silverlight のオブジェクトは、Silverlight ランタイムを通じて、Web ページ上のオブジェクトと同じように階層化されて管理されており、それぞれの情報を外部からでも参照できるようになっています。今回示したように適切な設定を施すことで、あらゆる利用者にとって使いやすいアプリケーションを開発できます。なお、アクセシビリティについての詳細は「Silverlight のユーザー補助の概要」を参照してください。


Code Recipe Silverlight デベロッパー センター

ページのトップへ