WCAG 2.0 達成方法集

Skip to Content (Press Enter)

-

SL21: Replacing A Silverlight Timed Animation With a Nonanimated Element

達成方法に関する重要な情報

これらの達成方法(参考)の使用法及び、それらがWCAG 2.0 達成基準(規定)とどのように関係するかに関する重要な情報については、WCAG 達成基準の達成方法を理解するを参照のこと。適用(対象)セクションは、その達成方法の範囲について説明しており、特定の技術に関する達成方法があるからといって、WCAG 2.0 を満たすコンテンツを作成する際に、常にその技術が使用可能であるわけではない。

適用(対象)

これは、次の達成基準に関連する達成方法である:

ユーザエージェント及び支援技術によるサポート

SL21 に関するユーザエージェントサポートノート (英語)を参照のこと。Silverlight Technology Notesも参照。

解説

The objective of this technique is to replace a timed Silverlight animation with a non-timed user interface element that presents equivalent information. This is useful in cases where the Silverlight animation is a timed animation that may contain information that the user wants to see without a time limit, such as crawling text in a text area. The animated version of information in the user interface element can instead be swapped out for an equivalent static element.

The Silverlight animation system is generalized such that nearly any Silverlight property of type Double, Point or Color can be animated, or a property can cycle through discrete object values. Thus the possibilities for which properties in the user interface can be animated are quite broad. The general technique shown can be used to stop any animation.

事例

事例 1: Stopping an animation that is scrolling text, replacing the animation with a full text alternative

This example has a UI definition in XAML and interaction logic in C#. The following is the basic UI in XAML.

<UserControl x:Class="StopAnimation.MainPage"
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:sys="clr-namespace:System;assembly=mscorlib">
   <UserControl.Resources>
       <ImageBrush x:Key="Stars" ImageSource="/stars.jpg" Stretch="Fill"/>
       <Storyboard x:Key="crawl">
           <DoubleAnimation From="700" To="-100" Duration="0:0:20"
             Storyboard.TargetName="crawltext" Storyboard.TargetProperty="(Canvas.Top)"/> 
       </Storyboard>
       <sys:String x:Key="crawlText">
           Episode IV, A NEW HOPE It is a period of civil war. Rebel spaceships, striking from a hidden base, 
           have won their first victory against the evil Galactic Empire. During the battle, Rebel spies managed 
           to steal secret plans to the Empire’s ultimate weapon, the DEATH STAR, an armored space station with 
           enough power to destroy an entire planet. Pursued by the Empire’s sinister agents, Princess Leia 
           races home aboard her starship, custodian of the stolen plans that can save her people and restore 
           freedom to the galaxy….
       </sys:String>
   </UserControl.Resources>
   <StackPanel x:Name="LayoutRoot"
   Background="{StaticResource Stars}"
   Height="600" Width="800">
       <Button Width="200"
   Click="Button_Click">Stop crawling text, display fixed text</Button>
       <Canvas Name="CrawlPanel" Width="605" Height="595" >
           <Canvas.Projection>
               <PlaneProjection RotationX="-75"/>
           </Canvas.Projection>
           <Canvas.Clip>
               <RectangleGeometry Rect="0 0 600 600"/>
           </Canvas.Clip>
           <TextBlock Text="{StaticResource crawlText}"
   TextWrapping="Wrap" FontSize="20"
   Width="300" Canvas.Left="150" Name="crawltext"
   Foreground="Goldenrod"/>
       </Canvas>
   </StackPanel>
</UserControl>

The following is the C# logic. In this example, the animation starts automatically. When the user activates the control (the Button), the event handler stops the animation, removes the animated element from the visual tree, and replaces it with a fixed text element that presents all text at once. Because it is a TextBox, assistive technologies could identify the newly introduced text element and present it, for example read the text in a screen reader.

       public MainPage()
       {
           InitializeComponent();
           (this.Resources["crawl"] as Storyboard).Begin();
       }
       private void Button_Click(object sender, RoutedEventArgs e)
       {
           (this.Resources["crawl"] as Storyboard).Stop();
           LayoutRoot.Children.Remove(CrawlPanel);
           TextBox tb = new TextBox();
           tb.IsReadOnly = true;
           tb.FontSize = 30;
           tb.TextWrapping = TextWrapping.Wrap;
           tb.Text = (string)this.Resources["crawlText"];
           LayoutRoot.Children.Add(tb);
       }

This example is shown in operation in the working example of Stop Text Animation.

参考リソース

この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。

検証

チェックポイント

  1. Using a browser that supports Silverlight, open an HTML page that references a Silverlight application through an object tag. For a Silverlight application that has a time limit on interaction due to an animated user interface element:

  2. Check for a mechanism to stop the time limit on interaction.

  3. When the mechanism is activated, check that the element that is animated and resulting in a time limit is removed, and the time-limited element is replaced with static content that is equivalent and does not have a time limit.

判定基準

#3 is true.

この達成方法が「十分な達成方法」の一つである場合、このチェックポイントや判定基準を満たしていなければ、それはこの達成方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の達成方法によってその達成基準が満たされていることもありうる。