【注意】この文書にはより新しいバージョンが存在します: WCAG 2.1 達成方法集

WCAG 2.0 達成方法集

Skip to Content (Press Enter)

このページのコンテンツ:

-

SL2: Changing The Visual Focus Indicator in Silverlight

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

この達成方法 (参考) の使用法と、この達成方法が WCAG 2.0 達成基準 (規定) とどのように関係するのかに関する重要な情報については、WCAG 達成基準の達成方法を理解するを参照のこと。適用 (対象) のセクションは、その達成方法の範囲について説明しており、特定の技術に関する達成方法の存在は、その技術があらゆる状況で WCAG 2.0 を満たすコンテンツを作成するために使用できることを意味するものではない。

適用 (対象)

訳注: Silverlight は、2021 年 11 月にサポートを終了する計画が Microsoft 社より公表されている (Microsoft サポート - Silverlight のライフサイクルポリシー)。

WAIC では、Silverlight に関する達成方法の翻訳を行っていないが、将来もその予定がないことに留意されたい。

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

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

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

解説

The objective of this technique is to use the Silverlight "control skinning" scenario and feature set to change the visible focus indication of a control. In particular, the intent is to increase the visibility of focus indication versus the appearance of a default-styled control. This technique is useful both for the control sets that are included in the Silverlight run time or SDK assemblies, as well as for Toolkit or any third party distributed control.

The default Silverlight core controls all indicate some type of visible focus indication, through their default templates. However, Silverlight application authors can still use the skinning techniques to augment or replace the visible focus indications for controls as used in their applications. For more information on how Silverlight controls will generally supply a default visual focus indicator, see Focus Overview on MSDN.

Silverlight control skinning is enabled through a deliberate separation of UI and logic in the Silverlight control model. Appearance of a control is largely written in XAML. The logic is largely written in code (for example C#) and is left unaffected when a Silverlight application author provides a new control template "skin". The hooks that connect the appearance and the logic are a Style property of the control (which the author changes the value of, to refer to their new XAML resource) and a contract of expected named entities in the XAML. The control logic invokes the names of the entities/parts whenever control state changes, and the expectation is that the named part provides the necessary appearance as defined in XAML. Design tools such as Visual Studio or Expression Blend generate copies of the default templates and parts, such that Silverlight authors can modify the parts that they want to change the appearance of, and still preserve the remainder of default appearance and behavior of the control.

For the visible focus indicator technique, the author typically modifies a single visual element that renders in layout as an overlay on top of the control when it is focused, and switches the overlay to nonvisible when the control is not focused. This element is a named element that is typically referred to from within the XAML named state Focused, which in turn is hooked up to changes in the visual state.

Note that this technique assumes that the original control author provided the necessary logic event hookup, and exposed a named state associated with keyboard focus to work with. If this is not the case, or if the scenario is that a Silverlight author is defining their own control, a different technique is needed. See SL7: Designing a Focused Visual State for Custom Silverlight Controls.

Focus in Silverlight

Focus in Silverlight is equivalent to the larger user interface and application concept of keyboard focus. The element that has focus is the element within the Silverlight object tree and programming model that has first chance to process the Silverlight key events. As a more tangible example that is user-centric, if a TextBox has keyboard focus, then when the user presses keys on the keyboard, the characters associated with the user's pressed keys will appear in the TextBox. A user interface element in Silverlight can obtain keyboard focus in one of three ways:

  1. The user uses the Silverlight tab sequence to traverse into the Silverlight content and to focus a specific control.

  2. The Silverlight application's logic calls the Focus method programmatically to force focus to a control.

  3. The user performs some other action, for example uses the mouse to click on a control. That control's specific logic handles the Silverlight input event and uses that event as stimulus to call Focus on that control. The difference between this case and the above case is that the behavior is typically built-in to that control's runtime behavior, and does not require each application author to call Focus in application code.

事例

事例 1: Two Button elements, one reskinned to provide new visible focus indicator

XAML templates can be verbose; for clarity, only the parts of the template that were changed or useful for showing the structure are shown. Omitted portions are shown as ellipsis (...). 

<UserControl x:Class="VisibleFocusTemplate.MainPage"
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
>
 <UserControl.Resources>
   <Style x:Key="StrongFocusIndicator" TargetType="Button">
...
     <Setter Property="Template">
       <Setter.Value>
         <ControlTemplate TargetType="Button">
...
             <VisualStateManager.VisualStateGroups>
               <VisualStateGroup x:Name="FocusStates">
                 <VisualState x:Name="Focused">
                   <Storyboard>
                     <DoubleAnimation Duration="0" To="1"
 Storyboard.TargetProperty="Opacity"
 Storyboard.TargetName="FocusVisualElement"/>
                     <DoubleAnimation Duration="0" To="0.5"
 Storyboard.TargetProperty="(UIElement.Opacity)"
 Storyboard.TargetName="rectangle" d:IsOptimized="True"/>
                   </Storyboard>
                 </VisualState>
                 <VisualState x:Name="Unfocused"/>
               </VisualStateGroup>
             </VisualStateManager.VisualStateGroups>
...
             <Border x:Name="FocusVisualElement"
 IsHitTestVisible="false" Opacity="0"
 CornerRadius="2" BorderBrush="#D0FF0000"
 BorderThickness="4">
               <Rectangle x:Name="rectangle"
 IsHitTestVisible="false" Margin="2"
 Opacity="0" RadiusY="2" RadiusX="2"
 Fill="#A0FF0000"/>
             </Border>
          </ControlTemplate>
       </Setter.Value>
     </Setter>
   </Style>
 </UserControl.Resources>
 <StackPanel x:Name="LayoutRoot">
   <Button Width="275">Default button</Button>
   <Button Width="275"
 Style="{StaticResource StrongFocusIndicator}"
 >Button with re-templated focus visible indicator</Button>
 </StackPanel>
</UserControl>

The most interesting aspect of this example is the change made to the FocusVisualElement part. Here is the original (default template) FocusVisualElement: 

<Rectangle x:Name="FocusVisualElement" RadiusX="2" RadiusY="2" Margin="1" Stroke="#FF6DBDD1" StrokeThickness="1" 
 Opacity="0" IsHitTestVisible="false" />

Here is the changed FocusVisualElement: 

<Border x:Name="FocusVisualElement" IsHitTestVisible="false"
 Opacity="0" CornerRadius="2"
 BorderBrush="#D0FF0000" BorderThickness="4">
 <Rectangle x:Name="rectangle" IsHitTestVisible="false"
 Margin="2" Opacity="0"
 RadiusY="2" RadiusX="2" Fill="#A0FF0000"/>
</Border>

The following images show how each of the two buttons (default and reskinned) appear when focused.

Default button focus

Reskinned button focus

This example is shown in operation in the working example of Visible Focus Template.

参考リソース

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

検証

手順

Note that not all Silverlight applications necessarily will start with the keyboard focus being somewhere within the Silverlight content area for purpose of Step #2. It may be necessary to press TAB several times to traverse the browser's framing user interface. Also, within the browser's display area that displays the HTML document, there might also be other HTML elements that are keyboard focusable, which are representative of HTML that falls lexically before the <object> tag that instantiates the Silverlight plug-in. So it may also be necessary to press TAB several times until these HTML elements are traversed.

  1. Using a browser that supports Silverlight, open an HTML page that references a Silverlight application through an object tag.

  2. Using a keyboard, tab to the element where focus characteristics are being examined.

  3. Check that the background, border, or other noticable visual indicator of the element changes color.

  4. Check that the changes in color for the background, border, or other noticable visual indicator are removed when the element loses focus.

期待される結果

#3 and #4 are true.

この達成方法が「十分な達成方法」の一つである場合、この手順や期待される結果を満たしていなければ、それはこの達成方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の達成方法によってその達成基準が満たされていることもありうる。

このウェブページは、WCAG 2.0 達成方法集: WCAG 2.0 の達成方法と失敗例 (この文書の最新版 (英語) を参照してください) の一部です。文書全体を単一 HTML ファイルにしたものもご利用いただけます。この文書と、Web Content Accessibility Guidelines (WCAG) 2.0 に関連する他の文書との関係については、The WCAG 2.0 Documents をご覧ください。パブリックコメントを送るには、Instructions for Commenting on WCAG 2.0 Documents に従ってください。

Copyright © 2016 W3C® (MIT, ERCIM, Keio, Beihang). W3C liability, trademark and document use rules apply.

【注意】 この文書は、W3C ワーキンググループノート Techniques for WCAG 2.0 の 2016 年 10 月 7 日時点での最新版をウェブアクセシビリティ基盤委員会 (WAIC) が翻訳して公開しているものです。この文書の正式版は、W3C のサイトにある英語版です。正確な内容については、W3C が公開している原文 (英語) をご確認ください。この翻訳文書はあくまで参考情報であり、翻訳上の誤りが含まれていることがあります。翻訳上の誤りを見つけられた場合は、翻訳に関するお問い合わせからご連絡ください。

【重要】 達成方法のタイトルが英語のままになっているものは、日本語訳を行っていないため、原文 (英語) にリンクしています。