FLASH20： フォーカス表示を視覚的により認識しやすくするために Flash コンポーネントのスキンを切り替える

この実装方法の目的は、コンテンツ制作者が ActionScript やコンポーネントのスキンを使用して、コンポーネントにフォーカスがあるときに視覚的な強調表示を行えるようにすることである。このテクニックでは、コンポーネントの背景色と境界線の両方を変更する。コンポーネントがフォーカスを失ったら、通常のスタイルに戻る。

視覚的な強調表示は、コンポーネントのスキンの一部を切り替えることによって行う。標準の Flash コンポーネントは、それぞれコンポーネントの外観を構成する独自のスキンのセットを持っている。各部分はムービークリップによって表現される。このムービークリップを編集するか、または置き換えることによって、コンポーネントの外観をカスタマイズすることができる。このテクニックに最も適したスキンは focusRectSkin スキンであり、これはすべてのコンポーネント間で共有される。このスキンのデフォルトでは、コンポーネントがフォーカスを受け取ると、わずかに視覚的な強調表示が行われる。

この実装方法は、次の手順で行うことができる。

1. focusRectSkin のカスタマイズバージョンを作成する。

2. スクリプトを使用して、カスタマイズしたスキンにコンポーネントを関連付ける。

スキンをカスタマイズするには次の 2 つの方法がある。

1. 既存のスキンを複製する

   この方法では、既存の focusRect スキンのコピーを作成して、それを変更する。このスキンは、コンポーネントの各インスタンスに手動で適用する必要がある（下記の手順 5）。

   1. スタイルを適用するコンポーネントをステージにドラッグする。この操作により、スキンに関連付けられた適切なコンポーネントがムービーのライブラリに追加される。

   2. 「ライブラリ」パネルを開き、Component Assets フォルダー > Shared フォルダーの順に移動する。

   3. focusRectSkin ムービークリップを右クリック（Mac では Ctrl キーを押しながらクリック）し、コンテキストメニューから「複製」を選択する。

   4. スキンのムービークリップの境界線の外観を編集する。例えば、より目立つようにフォーカス矩形の境界線を太くする（この手順は、以下のスクリーンショットで示されている）。

   5. ActionScript を使用して、フォームコンポーネントのインスタンスを focusRectSkin のカスタマイズバージョンに関連付ける。これは、setStyle メソッドを使用して実現できる。

   

2. 既存のスキンを変更する

   この方法では、元の focusRect スキンを変更する。つまり、この変更はフォーカス可能なすべてのコンポーネントのフォーカス視覚表示に適用される。

   1. スタイルを適用するコンポーネントをステージにドラッグする。この操作により、スキンに関連付けられた適切なコンポーネントがムービーのライブラリに追加される。

   2. 「ライブラリ」パネルを開き、Component Assets フォルダー > Shared フォルダーの順に移動する。

   3. focusRectSkin ムービークリップをダブルクリックして、編集用として開く。

   4. スキンのムービークリップの境界線の外観を編集する。例えば、より目立つようにフォーカス矩形の境界線を太くする。

   注記： この方法では、既存のスキンが上書きされることになる。上書きしたくない場合は、この方法ではなく「1. 既存のスキンを複製する」方法を用いること。

focusRect スキンは、フォーカス可能なすべての Flash コンポーネントに適用される。他の強調表示（例えばコンポーネントの上にマウスを移動させた際に適用される強調表示など）を変更する場合は、各コンポーネントのスキンを個別に編集する必要がある。例えば、チェックボックスコンポーネントのマウスオーバーの強調表示を編集するには、 Checkbox_overIcon と Checkbox_selectedOverIcon の両方を変更するか、または複製する必要がある。同様に、ボタンコンポーネントのマウスオーバーの強調表示を編集するには、Button_over スキンを変更する必要がある。

また、特定のイベント（フォーカス、マウスオーバーなど）では、既存のスキンが自動的に適用されることを念頭に置く必要がある。ただし、開発者が選ぶタイミングでスキンを手動で切り替えることも可能である（例えば、テキストフィールドに無効なコンテンツが入力されていることを示す場合など）。これを行うには、setStyle メソッドを呼び出す。

package wcagSamples {
  import fl.accessibility.ButtonAccImpl;
  import fl.accessibility.CheckBoxAccImpl;
  import fl.controls.CheckBox;
  import fl.controls.Button;
  import fl.controls.Label;
  import fl.controls.TextInput;
  import flash.display.Sprite;
  import flash.events.FocusEvent;
  import flash.events.MouseEvent;
  
  public class FocusStyler extends Sprite {
    public function FocusStyler() {
      ButtonAccImpl.enableAccessibility()
      CheckBoxAccImpl.enableAccessibility()
      
      var lbl1: Label = new Label();
      lbl1.text = "name";
      lbl1.x = lbl1.y = 20;
      addChild(lbl1);
      
      var txt1: TextInput = new TextInput();
      txt1.x = 60;
      txt1.y = 20;
      txt1.width = 200;
      txt1.addEventListener(FocusEvent.FOCUS_IN, handleFocusIn);
      txt1.addEventListener(FocusEvent.FOCUS_OUT, handleFocusOut);
      txt1.addEventListener(MouseEvent.MOUSE_OVER, handleFocusIn);
      txt1.addEventListener(MouseEvent.MOUSE_OUT, handleFocusOut);
      txt1.setStyle("focusRectSkin", "focus_custom");
      addChild(txt1);
      
      var chk1: CheckBox = new CheckBox();
      chk1.label = "Check Me";
      chk1.x = 60;
      chk1.y = 70;
      chk1.setStyle("focusRectSkin", "focus_custom");
      addChild(chk1);
      
      var btn1: Button = new Button();
      btn1.label = "Click Me";
      btn1.x = 60;
      btn1.y = 110;
      btn1.setStyle("focusRectSkin", "focus_custom");
      btn1.setStyle("overSkin", "Button_over_custom");
      addChild(btn1);
    }
    
    private function handleFocusIn(event) {
      event.currentTarget.setStyle("upSkin", "TextInput_upSkin_custom");
    }
    
    private function handleFocusOut(event) {
      event.currentTarget.setStyle("upSkin", "TextInput_upSkin");
    }
  }
}

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

• Creating ActionScript 3.0 components in Flash – Part 5: Styles and skins

• SCR31： スクリプトを用いて、フォーカスのある要素の背景色又はボーダーを変更する

チェックポイント

Flash ムービーにフォーカス可能なコンポーネントが含まれている場合は、次のことを確認する。

1. 視覚的な強調表示が、コンポーネントのスキンを変更することによって適用されている。

2. コンポーネントがフォーカスを受け取ると、視覚的な強調された表示になる。

判定基準

• 1. および 2. を満たしている。

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