Reskinning Flash components to provide highly visible focus indication

Applicability

• Adobe Flash Professional version MX and higher
• Adobe Flex

This technique relates to Success Criterion 2.4.7: Focus Visible (Sufficient).

Description

The purpose of this technique is to allow the author to use ActionScript and component skins to apply a strong visual indication when a component receives focus. In this particular technique, both the component's background color and border will change. When the component loses focus, it returns to its normal styling.

The visual highlights will be applied by switching some of the component's skin parts. The Standard Flash components each have their own set of skins that make up the component's visual appearance. Each part is represented by a MovieClip which can be edited or replaced in order to customize how the component looks. The most relevant skin for this technique is the focusRectSkin skin, which is shared by all components. By default this skin applies a subtle visual highlight when the component receives focus.

This technique can be applied through the following steps:

1. Create a customized version of focusRectSkin.
2. Use scripting to associate the component with the customized skin.

There are two ways to customize a skin:

1. Duplicating Existing Skin

   With this approach you create a copy of the existing focusRect skin for modification. You will manually have to apply the skin for each individual component instance (as indicated in step 5 below).

   1. Drag the components you want to style to the stage. This will ensure the appropriate component related skins are added to the movie's library.
   2. Open the Library panel, and navigate to the "Component Assets > Shared" folder.
   3. Right-click (or Ctrl-click on a Mac) on the focusRectSkin MovieClip, and choose "Duplicate" from the context menu.
   4. Edit the visual border in the skin's MovieClip. For example, the focus rectangle can be made thicker to stand out more (This step is illustrated in the screenshot below this list).
   5. Using ActionScript, associate form component instances with your customized version of focusRectSkin. This can be achieved using the setStyle method.

   

2. Modifying Existing Skin

   With this approach, the original focusRect skin is modified. This means that the changes you make will be applied to the visual focus indication of _every_ focusable component.

   1. Drag the components you want to style to the stage. This will ensure the appropriate component related skins are added to the movie's library.
   2. Open the Library panel, and navigate to the "Component Assets > Shared" folder.
   3. Open the focusRectSkin MovieClip for editing by double clicking on it.
   4. Edit the visual border in the skin's MovieClip. For example, the focus rectangle can be made thicker to stand out more.
   Note

   With this approach you will override the existing skin. If you don't want this, follow the "Duplicate Existing Skin" approach instead.

The focusRect skin applies to all focusable Flash components. If you want to modify other highlights (for example highlights that occur when hovering over a component with the mouse), you will have to edit component specific skins individually. For example, to edit the mouseover highlights for the checkbox component, you will have to modify or duplicate both Checkbox_overIcon and Checkbox_selectedOverIcon. Similarly, for the Button component you will have to modify the Button_over skin.

Also, keep in mind that the existing skins are automatically applied on certain events (focus, mouseover, etc.). It is however also possible to manually switch a skin at a moment of your own choosing (e.g. to indicate invalid content for a text field). this can also be achieved this by calling the setStyle method.

Examples

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");
    }
  }
}

Resources

Resources are for information purposes only, no endorsement implied.

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

Related Techniques

• SCR31: Using script to change the background color or border of the element with focus

Tests