Flex Accessibility 全键盘支持和扩展

1. 以特殊的样式如白背景黑字或黑背景白字显示用户界面以满足视力有缺陷的用户
2. 所有用户界面的文字、输入框等都能通过某种工具（Screen Reader）以语音的形式展示以方便视力有缺陷的用户
3. 用户界面的每个控件如图片，文字，按钮等，都能通过某种方式用键盘操作（全键盘支持），如使用 Tab 键可以在各个控件之间切换。

图 1.Flex Builder 配置
 

清单 1. Ant mxmlc 任务

<mxmlc file="Test.mxml" output="Test.swf" locale="en_US"> <load-config filename="flex_config.xml"/> <source-path path-element="src"/> </mxmlc>

清单 2. accessible 配置
<compiler> ... <accessible>true</accessible> ... </compiler>

清单 3.AccText 类
// 继承 IFocusManagerComponent 接口并设置 tabEnabled 属性为 true 使 AccText 类可以接受焦点 public classAccText extendsText implementsIFocusManagerComponent { public functionAccText() { Super(); this.tabEnabled = true; } }

图 2.普通 Text 和 AccText 示例
 

清单 4.AccImage 类
// 继承 IFocusManagerComponent 接口并设置 tabEnabled 属性为 true 使 AccImage 类可以接受焦 public classAccImage extendsmx.controls.Image implementsIFocusManagerComponent { public functionAccImage() { Super(); this.tabEnabled = true; } }

图 3.普通 Image 和 AccImage 示例
 

清单 5. AccHBox 类
/** * 继承 IFocusManagerComponent 接口并设置 tabEnabled,focusEnabled 和 tabChildren 属性为 true 使 * AccHBox 类可以接受焦点，并且它的孩子也都可以接受焦点 */ public classAccHBox extendsHBox implementsIFocusManagerComponent { public functionAccHBox() { Super(); this.focusEnabled = true; this.tabEnabled = true; this.tabChildren = true; } }

图 4.AccHBox 示例
 

清单 6. Login.mxml
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:widget="*" layout="vertical" creationComplete="initApp()"> <mx:Script> <![CDATA[ importmx.styles.StyleManager; importmx.managers.FocusManager; importmx.managers.PopUpManager; importmx.controls.Menu; // 程序初始化的时候将焦点设置到用户名的输入框 private functioninitApp():void { this.focusManager.setFocus(this.username); } ]]> </mx:Script> <mx:Panel title="登录" > <mx:HBox width="100%" id="box"/> <mx:Form width="100%" height="100%"> <mx:FormItem label="用户名" width="45%"> <mx:TextInput id="username" /> </mx:FormItem> <mx:FormItem label="密码" width="45%"> <mx:TextInput id="pwd" displayAsPassword="true"/> </mx:FormItem> </mx:Form> <mx:ControlBar width="100%"> <widget:AccHBox> <widget:AccImage id="img" source="assets/icons/arrowRight_b.png"/> <widget:AccText text="Register"/> </widget:AccHBox> <mx:Spacer width="80%"> </mx:Spacer> <mx:Button label="登录" id="okBtn"/> <mx:Button label="取消"/> </mx:ControlBar> </mx:Panel> </mx:Application>

图 5.Login 页面
 

图 6.无焦点提示符的登录按钮
 

图 7.显示焦点指示符的登录按钮
 

清单 7. AccHBox 类
public classAccHBox extendsHBox implementsIFocusManagerComponent { /** * 继承 IFocusManagerComponent 接口并设置 tabEnabled,focusEnabled 和 tabChildren 属性为 true 使 * AccHBox 类可以接受焦点，并且它的孩子也都可以接受焦点 */ public functionAccHBox() { Super(); this.focusEnabled = true; this.tabEnabled = true; this.tabChildren = true; } /** * 覆写 focusInHandler 函数改变 HBox 的默认行为，默认焦点在最后一个孩子 */ override protected functionfocusInHandler(event:FocusEvent):void { super.focusInHandler(event); if(this.numChildren <= 0) return; varlastChild:DisplayObject = this.getChildAt(this.numChildren-1); if(lastChild isIFocusManagerComponent) { this.focusManager.setFocus(IFocusManagerComponent(lastChild））; } }

清单 8. 扩展的 AccImage 类
public classAccImage extendsmx.controls.Image implementsIFocusManagerComponent { public functionAccImage() { super(); this.tabEnabled = true; } /** * 覆写 keyDownHandler 函数,改变 Image 的默认行为，当用户按下 space 和 enter 键的时候弹出对话框 */ protected override functionkeyDownHandler(event:KeyboardEvent):void { if(event.keyCode == Keyboard.SPACE ) { mx.controls.Alert.show("Space 键触发","提示",1,this); } else if(event.keyCode == Keyboard.ENTER) { mx.controls.Alert.show("Enter 键触发",this); } } }

图 8.扩展的 AccImage 示例