Many countries, including the United States, Australia, Canada, Japan, and countries in the European Union, have adopted accessibility standards based on those developed by the World Wide Web Consortium (W3C). W3C publishes Web Content Accessibility Guidelines, a document that prioritizes actions that designers should take to make web content accessible. For information about the Web Accessibility Initiative, see the W3C website at www.w3.org/WAI.

In the United States, the law that governs accessibility is commonly known as Section 508, which is an amendment to the U.S. Rehabilitation Act. Section 508 prohibits federal agencies from buying, developing, maintaining, or using electronic technology that is not accessible to those with disabilities. In addition to mandating standards, Section 508 lets government employees and the public sue agencies in federal court for noncompliance.

For additional information about Section 508, see the U.S. government-sponsored website at www.section508.gov.

Adobe Flash Player uses Microsoft Active Accessibility (MSAA), which provides a descriptive and standardized way for applications and screen readers to communicate. MSAA is available for Windows operating systems only. For more information on Microsoft accessibility technology, visit the Microsoft accessibility website at www.microsoft.com/enable/.

The Flash Player ActiveX control for Internet Explorer on Windows version 9 and later supports MSAA. The Flash Player plug‑in for Firefox on Windows version 9.0.115 and later also supports MSAA. All versions of Windows standalone players do not support MSAA.

Flex supports a debugger version of Flash Player that can display debugging information during run time and generate profiling information so that you can more easily develop applications. However, the debugger version of Flash Player does not support accessibility.

When Internet Explorer or Firefox loads a new page, it sends an event notification to the MSAA system. A screen reader, as an MSAA client, has registered with MSAA to receive event notifications, so the screen reader becomes aware that the browser has changed its object tree. The screen reader sends a special window message (WM_GETOBJECT) to the browser, asking for its root object.

The browser responds by sending back a pointer to a COM interface of type IAccessible. This interface has methods that allow the screen reader to ask for object properties, such as type, name, description, value, and visibility.

IAccessible also has methods for traversing the object tree in various ways—abstractly, in terms of tab order, in terms of geometric relationship, or in terms of pixel locations. Finally, IAccessible allows clients to manipulate UI objects programmatically, pressing buttons and altering selection and focus. The screen reader now traverses the tree of IAccessible objects, building up a tree of COM pointers.

For each object discovered, the screen reader determines the type of object (is it a container? button? textfield? and so on), the object's name, and possibly a few other properties. The screen reader now has enough information to construct its narrative text and feed it into the text-to-speech engine.

The browser, in order to be a proper MSAA server, has two main responsibilities. It must implement the IAccessible interface for every significant onscreen object that it displays, and it must notify the MSAA system whenever any part of the object tree changes. The Flash Player handles these two responsibilities for Flash content.

By default, Flex accessibility features are disabled. When you enable accessibility, you enable the application to communicate with a screen reader.

You can use one of the following methods to enable accessibility:

• Enable accessibility by default for all Flex applications so that all requests return accessible content.

  To enable accessibility for all Flex applications, edit the flex-config.xml file to set the accessible property to true, the default value, as the following example shows:

   <compiler> 
   	... 
   	<accessible>true</accessible> 
   	... 
   <compiler>

• Enable accessibility by using the mxmlc command-line compiler.

  When you compile a file by using the mxmlc command-line compiler, you can use the ‑accessible option to enable accessibility, as the following example shows:

   mxmlc -accessible c:/dev/myapps/mywar.war/app1.mxml

  For more information on the command-line compiler, see Flex compilers.

  When you compile a file by using the mxmlc command-line compiler, you can use a configuration variable to notify the compiler to generate the SWF file with accessibility enabled. The command-line syntax for the mxmlc.exe compiler allows the addition of –compiler.accessible (or just –accessible) to enable accessibility, as shown in the following examples:

  mxmlc –compiler.accessible c:/dev/myapps/ appl.mxml

  mxmlc -accessible c:/dev/myapps/appl.mxml

If you edited the flex-config.xml file to enable accessibility by default, you can disable it for an individual request by setting the accessible query parameter to false, as the following example shows:

 http://www.mycompany.com/myflexapp/app1.mxml?accessible=false

For more information on the command-line compiler, see Flex compilers.

To use the JAWS screen reader with a Flex application, users must download scripts from the Adobe accessibility website before invoking a Flex application. Screen readers work best when in Forms mode, which lets users interact directly with the Flex application. These scripts let users switch between Virtual Cursor mode and Forms mode by using the Enter key from almost anywhere within a Flex application. If necessary, users can exit Forms mode by using the standard JAWS keystrokes.

To verify that the Flex scripts for JAWS are correctly installed, users can press the Insert+Q keys when JAWS is running. If the scripts are installed correctly, users hear "Updated for Adobe Flex 4" in the voice response to this keystroke.

It is important that you direct users with visual impairments to the script download page so that they have the necessary scripts to use JAWS effectively.

Flex comes with the following set of accessible components and containers in the Spark component set.

Flex comes with the following set of accessible components and containers in the MX component set.

The AdvancedDataGrid control supports the accessibility features in the DataGrid and Tree controls and adds additional features to support accessibility.

Cell and header navigation

For AdvancedDataGrid header cells, each header cell is selectable and reported individually. Pressing the Up Arrow key when in the first row of the control shifts the focus to the header cell.

When focus is moved to a header cell, the screen reader reports: "From: Column 1 press space to sort ascending on this field. Press Control+space to add this field to sort."

The following figure shows an AdvancedDataGrid control that uses a column group for the Revenues column. If the control defines a column group, then the screen reader reports the header information as: "Revenues: Column 1, spans 2 columns."

The data reported for body cells depends on the setting of the selectionMode property of the AdvancedDataGrid control, as described in the following table:

Selection mode	Screen reader output
singleRow	Information corresponding to the entire row.
singleCell	Information corresponding to the selected cell only.

Example navigation of flat data

The following image shows an AdvancedDataGrid control displaying flat data:

In this example:

• When you press the Tab key to move focus to the control, the screen reader reports: "ListBox."

• Pressing the Down Arrow and Up Arrow keys navigates the rows of the control.

  • When the selectionMode property is set to singleRow, the screen reader reports all the data in the row, for example: "Artist: Grateful Dead, Album: Shakedown Street, Price: 11.99."

  • When the selectionMode property is set to singleCell, the screen reader reports only the selected cell's data. For the cell in the first column of the row, the screen reader reports: "Artist: Grateful Dead, Row 1." The row information is reported only when focus is on the first column, not for other columns in the row. Therefore, for the second cell, the screen reader reports: "Album: ShakeDown Street."

• Pressing the Up Arrow key when the focus is on the first row of the control moves the focus to the header cell. The screen reader reports: "From: Column 1 press space to sort ascending on this field. Press control space to add this field to sort."

  • Pressing the Spacebar sorts the column.

  • Multicolumn sorting is supported. The sort order is reported in case of multicolumn sorting.

  For example, if the Album column is sorted and the sort order is 2, the screen reader reports: "Album: Column 2 sorted ascending, sort order 2 Press space to sort descending on this field. Press Control+space to add this field to sort."

Example navigation of hierarchical data

The following image shows an AdvancedDataGrid control displaying hierarchical data:

In this example:

• When you press the Tab key to move focus to the control, the screen reader reports: "Treeview."

• Pressing the Shift+Control+Right Arrow keys opens a node.

• Pressing the Down Arrow key moves the focus to the next row.

  If you move focus to the first row under Arizona, the screen reader reports: "Level2. Region: Southwest, Territory: Arizona, TerritoryRep: Barbara Jennings, Actual: 38865, Estimate: 40000, 1 of 2. Press Control+Shift+Right Arrow to open, Control+Shift+Left Arrow to close. Open."

As a general rule, you should structure your application so that all components fit in the available screen area; otherwise you will have to adds vertical or horizontal scroll bars as necessary. Scroll bars let users move around the application to access components outside of the screen area.

If your application uses scroll bars, tabbing through the application components does not automatically scroll the application to make the currently selected component visible. You can add logic to your application to automatically scroll to the currently selected component, as the following example shows:

<?xml version="1.0"?> 
<!-- accessibility\ScrollComp.mxml --> 
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    creationComplete="setupFocusViewportWatcher();"> 
 
    <fx:Script> 
        <![CDATA[ 
        
        import mx.core.Container; 
        import mx.core.EdgeMetrics; 
    
        [Bindable] 
        public var cards: Array = [ 
            {label:"Visa", data:1}, 
            {label:"Master Card", data:2}, 
            {label:"American Express", data:3} ]; 
        
        [Bindable] 
        public var selectedItem:Object; 
 
        [Bindable] 
        public var forListDP:Array = [ 
            {label:'Apple', data:10.00}, 
            {label:'Banana', data:15.00}, 
            {label:'Melon', data:3.50}, 
            {label:'Kiwi', data:7.65}, 
            {label:'123', data:12.35 }, 
            {label:'some', data:10.01 }]; 
    
        // Set up the event listener for the focusIn event. 
        public function setupFocusViewportWatcher():void { 
            addEventListener("focusIn", makeFocusedItemVisible); 
        } 
    
        public function makeFocusedItemVisible(event:FocusEvent):void { 
            // Target is the actual object that has focus. 
            var target:InteractiveObject = InteractiveObject(event.target); 
            
            // OriginalTarget is the component that has focus as some 
            // component actually delegate true focus to an internal object. 
            var originalTarget:InteractiveObject = 
        InteractiveObject(focusManager.findFocusManagerComponent(target)); 
    
            // The viewable portion of a container 
            var viewport:Rectangle = new Rectangle(); 
            do { 
                // Cycle through all parents looking for containers. 
                if (target.parent is Container) { 
                    var viewportChanged:Boolean = false; 
                    var c:Container = target.parent as Container; 
 
                    // Get the viewable area in the container. 
                    var vm:EdgeMetrics = c.viewMetrics; 
                    viewport.x = vm.left; 
                    viewport.y = vm.top; 
                    viewport.width = 
                        c.width / c.scaleX - vm.left - vm.right; 
                    viewport.height = 
                        c.height / c.scaleY - vm.top - vm.bottom; 
                    
                    // Calculate the position of the target in the container. 
                    var topLeft:Point = new Point(0, 0); 
                    var bottomRight:Point = 
                new Point(originalTarget.width, originalTarget.height); 
                    topLeft = originalTarget.localToGlobal(topLeft); 
                    topLeft = c.globalToLocal(topLeft); 
                    bottomRight = originalTarget.localToGlobal(bottomRight); 
                    bottomRight = c.globalToLocal(bottomRight); 
    
                    // Figure out if we have to move the scroll bars. 
                    // If the scroll bar moves, the position of the component 
                    // moves as well. This algorithm makes sure the top 
                    // left of the component is visible if the component is 
                    // bigger than the viewport. 
                    var delta:Number; 
 
                    if (bottomRight.x > viewport.right) { 
                        delta = bottomRight.x - viewport.right; 
                        c.horizontalScrollPosition += delta; 
                        topLeft.x -= delta; 
                        viewportChanged = true; 
                    } 
 
                    if (topLeft.x < viewport.left) { 
                        // leave it a few pixels in from the left 
                        c.horizontalScrollPosition -= 
                            viewport.left - topLeft.x + 2; 
                        viewportChanged = true; 
                    } 
                    
                    if (bottomRight.y > viewport.bottom) { 
                        delta = bottomRight.y - viewport.bottom; 
                        c.verticalScrollPosition += delta; 
                        topLeft.y -= delta; 
                        viewportChanged = true; 
                    } 
                    
                    if (topLeft.y < viewport.top) { 
                        // leave it a few pixels down from the top 
                        c.verticalScrollPosition -= 
                            viewport.top - topLeft.y + 2; 
                        viewportChanged = true; 
                    } 
                    
                    // You must the validateNow() method to get the 
                    // container to move the component before working 
                    // on the next parent. 
                    // Otherwise, your calculations will be incorrect. 
                    if (viewportChanged) { 
                        c.validateNow(); 
                    } 
                } 
                
                target = target.parent; 
            } 
            
            while (target != this); 
        } 
        ]]> 
    </fx:Script> 
    
    <fx:Declarations> 
        <fx:Model id="statesModel" source="assets/states.xml"/> 
    </fx:Declarations> 
 
    <mx:Panel 
            x="58" y="48" 
            width="442" height="201" 
            layout="absolute" 
            title="Tab through controls to see if focus stays in view"> 
            
        <mx:VBox x="10" y="10" verticalScrollPolicy="off"> 
            <mx:TextInput/> 
            <mx:TextInput/> 
            <mx:TextArea width="328" height="64"/> 
            <mx:ComboBox dataProvider="{cards}" width="150"/> 
            <mx:DataGrid dataProvider="{forListDP}" /> 
            <mx:DateChooser yearNavigationEnabled="true"/> 
            <mx:List id="source" 
                width="75" 
                dataProvider="{statesModel.state}"/> 
        </mx:VBox> 
    </mx:Panel> 
</s:Application>

To create content that behaves in a specific way if a screen reader is active, you can use the ActionScript Accessibility.active property, which is set to a value of true if a screen reader is present, and false otherwise. You can then design your content to perform in a way that is compatible with screen reader use, such as by hiding child elements from the screen reader.

For example, you could use the Accessibility.active property to decide whether to include unsolicited animation. Unsolicited animation means animation that happens without the screen reader doing anything. This can be very confusing for screen readers.

For more information on the Accessibility class, see the ActionScript 3.0 Reference for the Adobe Flash Platform .

Defining a custom accessiblity implementation for a component requires changes the component's class file. Copy the PopUpButton class file from its location in the Flex SDK source code, /sdks/4.6.0/frameworks/projects/framework/src/mx/controls/PopUpButton.as to a directory in the source folder for the project, /mx/controls/PopUpButton.as.

Next, copy the included files /sdks/4.6.0/frameworks/projects/framework/src/mx/core/Version.as to /mx/core/Version.as and /sdks/4.6.0/frameworks/projects/framework/src/mx/styles/metadata/IconColorStyles.as to /mx/styles/metadata/IconColorStyles.as so that the project compiles without errors. When the project is compiled, the Flex compiler will override the existing PopUpButton class contained within the Flex framework, with the modified class in project folder, which will support accessibility. Open the PopUpButton class file that you just copied over from the Flex SDK. At line 168 in the code, add the following meta tag:

[AccessibilityClass(implementation="mx.accessibility.PopUpButtonAccImpl")]

The [AccessibilityClass] meta tag lets the compiler know which class serves as the accessibility implementation for this component. Add the following code to create a placeholder for the static createAccessibilityImplementation() method at line 244, just before the PopUpButton constructor:

… 
	//---------------------------------------------------------------------- ----           
	// 
	//  Class mixins           
	// 
	//----------------------------------------------------------------------           ---- 
	/** 
	 *  Placeholder for mixin by PopUpButtonAccImpl.           
	 */ 
	 mx_internal static var createAccessibilityImplementation:Function; 
…

This createAccessibilityImplementation() method will be assigned by the PopUpButtonAccImpl accessibility implementation class we'll create. At line 469, among the overridden methods from UIComponent class, add the following initializeAccessibility() method:

/** 
 *  @inheritDoc 
 */ 
  override protected function initializeAccessibility():void 
	{ 
		if (PopUpButton.createAccessibilityImplementation != null) 
		PopUpButton.createAccessibilityImplementation(this); 
	}

The initializeAccessibility() method is invoked by the UIComponent.initialize() method to initialize accessibility for a component instance at runtime.

To define the PopUpButtonAccImpl class, copy the ButtonAccImpl class file from its location in the Flex SDK source code, /sdks/4.6.0/frameworks/projects/framework/src/mx/accessibility/Button.as, to a directory in the source folder for the project. Save the file with a new file name, /mx/accessibility/PopUpButtonAccImpl.as.Open the PopUpButtonAccImpl class file that you copied over from ButtonAccImpl class in the Flex SDK. Update the import statement block to import the PopUpButton, Menu, AccessibilityProperties and Rectangle classes:

... 
package mx.accessibility 
{ 
import flash.accessibility.Accessibility; 
import flash.accessibility.AccessibilityProperties; 
import flash.events.Event; 
import flash.events.KeyboardEvent;  
import flash.geom.Rectangle; 
import flash.ui.Keyboard; 
import mx.controls.Menu;    
import mx.controls.PopUpButton; 
import mx.core.UIComponent; 
import mx.core.mx_internal; 
...

At line 61 in the code, update the class definition to read:

... 
	public class PopUpButtonAccImpl extends AccImpl 
...

At line 93 in the code update the hookAccessibility method to read:

... 
	private static function hookAccessibility():Boolean 
	{ 
		PopUpButton.createAccessibilityImplementation = 
			createAccessibilityImplementation; 
		return true; 
	} 
...

The hookAccessibility() method defines the PopUpButton class's static createAccessibilityImplementation() method to use the method of the same name defined in the PopUpButtonAccImpl class. It is called once at runtime when the PopUpButtonAccImpl class initializes and defines the static accessibilityHooked property.Replace the createAccessibilityImplementation() method at line 149 with the following:

... 
	mx_internal static function createAccessibilityImplementation( 
														component:UIComponent):void 
	{ 
		component.accessibilityImplementation = new PopUpButtonAccImpl(component); 
	} 
...

The createAccessibilityImplementation() method assigns a new PopUpButtonAccImpl instance to the accessibilityImplementation property of a given component instance.Add the following four static state and role constants at line 122:

... 
	/** 
	 * The object is hot-tracked by the mouse, which means that its appearance 
	 * has changed to indicate that the pointer is located over it. 
	 */ 
	 private static const STATE_SYSTEM_HOTTRACKED:uint = 0x00000080; 
 
	/** 
	 *  Object displays a pop-up menu or window when invoked. 
	 */ 
	 private static const STATE_SYSTEM_HASPOPUP:uint = 0x40000000; 
 
	/** 
	 * The role represents a button that has a drop-down list icon directly adjacent 
	 * to the button. 
	 */ 
	 private static const ROLE_SYSTEM_SPLITBUTTON:uint = 0x3e; 
 
	/** 
	 * The object represents a button that drops down a list of items. 
	 */ 
	 private static const ROLE_SYSTEM_BUTTONDROPDOWN:uint = 0x38; 
...

System roles and states are predefined for all components in MSAA. The hexidecimal values for the constants can be found in the ActionScript 3.0 Reference for the Adobe Flash Platform under AccessibilityImplementation Constants. The MSAA documentation has a list of guidelines for accessible object implementations that documents which constants are used by which component types. Unfortunately, the User Interface Element Reference for MSAA omits the pop‑up button. To figure out the appropriate role and state constants for the PopUpButton Accessibility Implementation, use the AccExplorer, Inspect32, and AccEvent tools that are available in the Microsoft Active Accessibility 2.0 SDK to examine a similar existing component in Windows.

How found:	Mouse move (199,85) 
	hwnd=0x0006038A 32bit class="ToolbarWindow32" style=0x5601A945 ex=0x100000 
Info:	IAcc = 0x001F7A6C VarChild:[VT_I4=0x0] 
Interfaces:	IEnumVARIANT IOleWindow IAccIdentity 
Impl:	Remote oleacc proxy 
Annotation ID:	0100008000000000FCFFFFFF00000000 
Name:	"Run PopUpMenuButton" 
Value:	none [false] 
Role:	split button 
State:	hot tracked 
Location:	{l:192, t:72, w:38, h:22} 
Description:	none [false] 
Kbshortcut:	none [false] 
DefAction:	"Open" 
Parent:	none [false]:tool bar 
Help:	none [false] 
Help Topic:	none [false] 
ChildCount:	1 
Window:	0x0006038A class="ToolbarWindow32" style=0x5601A945 ex=0x100000 
Children:	"Open" : drop down button : hot tracked 
Selection:	none [empty] 
Ancestors:	none [false] : tool bar : normal 
	none [false] : window : normal 
	none [false] : client : default,focusable 
	none [false] : window : normal 
	none [false] : client : normal 
	none [false] : window : normal 
	none [false] : client : normal 
	none [false] : window : normal 
	"Flex Development - file:/C:/Program Files/Adobe/Flash Builder 4/plugins/com.adobe.flexbuilder.ui_4.0.nnnnnn/welcome/welcome.html - Adobe Flash Builder" : client : normal	"Flex Development - file:/C:/Program Files/Adobe/Flash Builder 
4/plugins/com.adobe.flexbuilder.ui_4.0.nnnnnn/welcome/welcome.html - Adobe Flash Builder" : window : sizeable,moveable,focusable	"Desktop" : client : normal	"Desktop" : window : normal 
	[ No Parent ]

The Inspect32 tool reveals that the pop‑up button should have the role split button and one child named Open with the role drop down button. When you mouse over the control or give it keyboard focus, the control's state is hot tracked. In Flash terminology, "hot tracked" is a mouseover, or the button "over" state. A search on https://msdn.microsoft.com/ for "SplitButton accessibility" returns a more detailed and useful description of the SplitButton control's accessibiliy implementation: Working with Active Accessibility in the 2007 Office Fluent User Interface: The SplitButton Control. This more detailed description states that we should also expose the state of the child drop‑down button that opens a popup menu as has popup.

Update the PopUpButtonAccImpl constructor function at line 199 to read:

... 
	//---------------------------------------------------------------------- ---                                 - 
	// 
	//  Constructor 
	// 
	//--------------------------------------------------------------------- - ----                                 
 	/** 
	 * Creates a new PopUpButtonAccImpl instance for the specified PopUpButton component    . 
	 * 
	 * <p>Direct calls to the AccImpl subclass constructors are unneccessary. 
	 * When a Flex project is compiled with Generate accessible SWF file set to 
	 * <code>true</code>, 
	 * the compiler instantiates the accessibility implementations for the components 
	 * used in the project that have them by calling the static 
	 * <code>enableAccessibility()</code> method. </p   > 
	 * 
	 * @param master The UIComponent instance that this PopUpButtonAccImpl instance 
	 * is making accessible. 
	 * 
	 * @see ../../../html/help.html?content=accessible_4.html Configuring Flex 
	 * applications for accessibility 
	 */ 
	public function PopUpButtonAccImpl(master:UIComponent) 
	{ 
		super(master); 
		role = ROLE_SYSTEM_SPLITBUTTON; 
	} 
...

The constructor function defines the role property for the PopUpButtonAccImpl as ROLE_SYSTEM_SPLITBUTTON (0x3e). Update the eventsToHandle() method at line 237 to include any additional events to which the PopUpButtonAccImpl should listen from its master component. In this example, the events should be the same as for the ButtonAccImpl, "click" and "labelChanged".

... 
	//---------------------------------- 
	//  eventsToHandle 
	//---------------------------------- 
	/** 
	 *	@inheritDoc 
	 */ 
	override protected function get eventsToHandle():Array 
	{ 
		return super.eventsToHandle.concat([ "click", "labelChanged" ]); 
	} 
...

Update the get_accRole() method at line 247 to read as follows:

... 
	/** 
	 * IAccessible method for returning system role for the component. 
	 * System roles are predefined for all the components in MSAA. 
	 * <p>A PopUpButton component, ( <code>childID == 0</code> ), reports 
	 * the role <code>ROLE_SYSTEM_SPLITBUTTON</code> (0x3E). 
	 * The PopUpButton's drop down arrow ( <code>childID == 1</code> ) 
	 * reports the role <code>ROLE_SYSTEM_BUTTONDROPDOWN</code> (0x3B).</p> 
	 * 
	 * @param childID An unsigned integer corresponding to one of the component's child 
	 * elements as defined by 
	 * <code><a href="#getChildIDArray()">getChildIDArray()</a></code>. 
	 * 
	 * @return Role associated with the component. 
	 * @tiptext Returns the system role for the component 
	 * @helpid 3009 
	 * 
	 * @see ../../flash/accessibility/constants.html#roles AccessibilityImplementation Constants: Object Roles 
	 * @see https://msdn.microsoft.com/en-us/library/ms696113(VS.85).aspx Microsoft Accessibility Developer Center: IAccessible::get_accRole 
	 */ 
	override public function get_accRole(childID:uint):uint 
	{ 
		if (childID == 0) 
			return role; 
			 
		return ROLE_SYSTEM_BUTTONDROPDOWN; 
	} 
...

The get_accRole() method should return the appropriate role constant for the master component or for one of its children. The PopUpButtonAccImpl returns ROLE_SYSTEM_SPLITBUTTON (0x3e), while its child drop-down button returns ROLE_SYSTEM_BUTTONDROPDOWN (0x38).Add the following get_accValue() method override at line 272:

... 
	/** 
	 * IAccessible method for returning the value of the PopUpButton 
	 * which is spoken out by the screen reader. 
	 * The PopUpButton should return value that would be applied when clicked. 
	 * For example, the value of the PopUpButton's label property. 
	 * 
	 * @param childID An unsigned integer corresponding to one of the component's 
	 * child elements as defined by 
	 * <code><a href="#getChildIDArray()">getChildIDArray()</a></code>. 
	 * 
	 *  @return Value String 
	 * 
	 *  @see https://msdn.microsoft.com/en-us/library/ms697312(VS.85).aspx Microsoft Accessibility Developer Center: IAccessible::get_accValue 
	 *  @see https://msdn.microsoft.com/en-us/library/bb404170.aspx#ActiveAccessibility2007OfficeFluentUI_TheSplitButtonControl Working with Active Accessibility in the 2007 Office Fluent User Interface: The SplitButton Control 
	 */ 
	override public function get_accValue(childID:uint):String 
	{ 
		var accValue:String; 
		 
		// local reference to the master component as a PopUpButton 
		var popUpButton:PopUpButton = PopUpButton(master); 
		 
		if(childID == 0){ 
		// the PopUpButton component itself 
			 
			// local reference to the label 
			var label:String = popUpButton.label; 
			 
			if(popUpButton.popUp 
				&& popUpButton.popUp is Menu 
				&& label != null 
				&& label != ""){ 
				// If the popUp exists and is a Menu and 
				// the label exists and is not an empty string... 
					 
				var popUpMenu:Menu = popUpButton.popUp as Menu; 
				if(popUpMenu.itemToLabel(popUpMenu.selectedItem) == label){				 
				// If the label matches the popUp menu's selectedIndex, 
				// return the label as the accValue. 
					accValue = label; 
					if(popUpButton.accessibilityProperties && popUpButton.accessibilityProperties.shortcut){ 
						// If a keyboard shortcut is defined in the 
						// PopUpButton's .accessibilityProperties object, 
						// append it to the returned accValue. 
						accValue + = "("+popUpButton.accessibilityProperties.shortcut+")"; 
					} 
				} 
				 
			} 
		} 
 
		return accValue; 
	} 
...

The get_accValue() method returns the appropriate value for the component or for one of its child elements. If the PopUpButton component's label property is equal to the label of the selectedItem in its popUp menu, the get_accValue() method should return the value of the label property. Update the get_accState() method at line 321 to read:

... 
	/** 
	 * IAccessible method for returning the state of the PopUpButton. 
	 * States are predefined for all the components in MSAA. 
	 * Values are assigned to each state. 
	 * Depending upon the PopUpButton being pressed or released, its popUp being present 
	 * and opened or closed, and the PopUpButton being hovered over or focused, 
	 * a value is returned. 
	 * 
	 * @param childID An unsigned integer corresponding to one of the component's 
	 * child elements as defined by 
	 * <code><a href="#getChildIDArray()">getChildIDArray()</a></code>. 
	 * 
	 * @return State indicating whether the PopUpButton is pressed or released. 
	 * 
	 * @see #getChildIDArray() 
	 * @see flash.accessibility.AccessibilityImplementation#get_accState() 
	 * @see ../../flash/accessibility/constants.html#states AccessibilityImplementation Constants: Object State Constants 
	 * @see https://msdn.microsoft.com/en-us/library/ms696191(VS.85).aspx Microsoft Accessibility Developer Center: IAccessible::get_accState 
	 */ 
	 override public function get_accState(childID:uint):uint 
	{ 
		// the normal default state 
		var accState:uint = 0; 
		 
		// local reference to the master component as a PopUpButton 
		var popUpButton:PopUpButton = PopUpButton(master); 
		 
		if(childID == 1){ 
		// the drop-down button 	 
			 
			if(popUpButton.popUp){ 
			// if the PopUpButton's popUp property is defined, 
			// indicate that the drop-down button has a pop up.	 
				accState = STATE_SYSTEM_HASPOPUP; 
			} 
			 
			 
			if(popUpButton.mx_internal::isShowingPopUp == true){ 
			// if the popUp is showing, 
			// indicate that the drop-down button is pressed 
				accState |= STATE_SYSTEM_PRESSED; 
			} 
			 
		} else { 
		// the PopUpButton component itself 
		 	 
		 	// the component state inherited from AccImpl 
		 	// unavailable, normal, focusable, or focused 
		 	accState = getState(childID); 
		 	 
		 	if (popUpButton.selected) {		 	// if the popUpButton is selected, 
		 	// indicate that popUpButton is pressed 
		 		accState |= STATE_SYSTEM_PRESSED; 
		 	} 
		} 
		 
		var mouseX:Number = master.mouseX; 
		var mouseY:Number = master.mouseY; 
		var bounds:Rectangle = master.getBounds(master); 
		if((mouseX >= bounds.x 
			&& mouseX <= (bounds.x + bounds.width) 
			&& mouseY >= bounds.y 
			&& mouseY <= (bounds.y + bounds.height)) 
			|| (popUpButton.focusManager.getFocus() == popUpButton)){ 
			// if the parent popUpButton component or child drop-down button 
			// has either mouse or keyboard focus, 
			// indicate that it is hot-tracked. 
			accState |= STATE_SYSTEM_HOTTRACKED; 
		} 
		return accState; 
	} 
...

The get_accState() method should return the appropriate state constant or state constants for the master component or for one of its children. If the PopUpButton has a popUp property, its child drop‑down button should have the state STATE_SYSTEM_HASPOPUP (0x40000000). If the popUp is showing, the drop‑down button should also have the state STATE_SYSTEM_PRESSED (0x00000008). If the PopUpButton itself is selected, it should have the state STATE_SYSTEM_PRESSED (0x00000008). Both the PopUpButton and its child drop‑down button should have the state STATE_SYSTEM_HOTTRACKED (0x00000080) when a user mouses over the PopUpButton or when it has keyboard focus.Add the following getChildIDArray() method override at line 398:

... 
	/** 
	 * Method to return an array of childIDs. 
	 * 
	 * @return An array of unsigned integer IDs with a length of one 
	 * for the drop-down menu button. 
	 */ 
	override public function getChildIDArray():Array 
	{ 
		var childIDs:Array = [1]; 
		 
		return childIDs; 
	} 
...

The getChildIDArray() method returns an array containing the unsigned integer IDs of all child elements in the accessibility implementation. The length of the array may be zero. The IDs in the array should appear in the same logical order as the child elements they represent. This method is mandatory for any accessibility implementation that can contain child elements; otherwise, do not implement it. For the PopUpButtonAccImpl, the getChildIDArray() method returns an array containing a single element with a value of 1, which represents the PopUpButton's child drop‑down button element.Update the get_accDefaultAction() method at line 410 to return the appropriate default action for the master component or for one of its children. For the PopUpButton component itself, the method returns "Press". For the component's child drop‑down button, the method returns "Open."

... 
	/** 
	 * IAccessible method for returning the default action of the PopUpButton, 
	 * which is Press for the component itself and Open for its child drop-down 
	 * menu button. 
	 * 
	 * @param childID An unsigned integer corresponding to one of the component's 
	 * child elements as defined by 
	 *  <code><a href="#getChildIDArray()">getChildIDArray()</a></code>. 
	 * 
	 *  @return DefaultAction String 
	 * 
	 *  @see https://msdn.microsoft.com/en-us/library/ms696144(VS.85).aspx Microsoft Accessibility Developer Center: IAccessible::get_accDefaultAction 
	 */ 
	override public function get_accDefaultAction(childID:uint):String 
	{ 
		if(childID == 0){ 
			return "Press"; 
		} 
		return "Open"; 
	} 
...

Update the addDoDefaultAction() method at line 439 to read as follows:

... 
	/** 
	 * IAccessible method for performing the default action of the PopUpButton, which is Press for the component itself and Open for its child drop-down menu button. 
	 * 
	 * @param childID An unsigned integer corresponding to one of the component's 
	 * child elements as defined by 
	 *  <code><a href="#getChildIDArray()">getChildIDArray()</a></code>. 
	 * 
	 *  @see https://msdn.microsoft.com/en-us/library/ms696119(VS.85).aspx Microsoft Accessibility Developer Center: IAccessible::accDoDefaultAction 
	 */ 
	override public function accDoDefaultAction(childID:uint):void 
	{ 
		var popUpButton:PopUpButton = master as PopUpButton; 
		if (childID==0) 
		{ 
			var event:KeyboardEvent = new KeyboardEvent(KeyboardEvent.KEY_DOWN); 
			event.keyCode = Keyboard.SPACE; 
			master.dispatchEvent(event); 
 
			event = new KeyboardEvent(KeyboardEvent.KEY_UP); 
			event.keyCode = Keyboard.SPACE; 
			master.dispatchEvent(event); 
			 
		} else if(childID == 1){ 
			 
			if(popUpButton.mx_internal::isShowingPopUp == true){ 
				popUpButton.close(); 
			} else { 
				popUpButton.open(); 
			} 
		} 
	} 
...

The accDoDefaultAction() method executes the default action for the master component or for one of its children. For the PopUpButton component itself, the method simulates a button click. For the child drop‑down button element, the method either opens or closes the popUp. Update the getName() method at line 463 to read as follows:

... 
	/** 
	 * Method for returning the name of the PopUpButton which is spoken out by 
	 * the screen reader. 
	 *  The PopUpButton should return the label inside as the name of the PopUpButton. 
	 *  The child drop-down button should return "Open" or "Close". 
	 * 
	 * @param childID An unsigned integer corresponding to one of the component's 
	 * child elements as defined by 
	 *  <code><a href="#getChildIDArray()">getChildIDArray()</a></code>. 
	 * 
	 * @return Name string corresponding to the PopUpButton label. 
	 * "Open" or "Close" for the child drop-down button. 
	 */ 
	override protected function getName(childID:uint):String 
	{	 
		var popUpButton:PopUpButton = master as PopUpButton; 
		var popUp:UIComponent = popUpButton.popUp as UIComponent; 
 
		if(popUp && popUp is Menu){ 
		// a tweak to add Context as the name of the popUp menu if no other name is defined 
			if(!popUp.accessibilityProperties){ 
				popUp.accessibilityProperties = new AccessibilityProperties(); 
			} 
			if(popUp is Menu && popUp.accessibilityProperties.name == ""){ 
				popUp.accessibilityProperties.name = "Context"; 
			} 
		} 
		if(childID == 1){ 
		// For the drop-down button, if the popUp is showing, return Close, 
		// otherwise return Open. 
			return (popUpButton.mx_internal::isShowingPopUp == true) ? "Close" : "Open"; 
		} 
		 
		// For the popUpButton component itself, return the label property. 
		var label:String = popUpButton.label; 
		return label != null && label != "" ? label : ""; 
	} 
...

The getName() method returns the appropriate name for the master component or for one of its children. For the PopUpButton component itself, the method should return its label property as its name. The component's child drop‑down button returns either "Open" or "Close", depending on whether or not the popUp is showing. For the PopUpButton, this method also adds "Context" as the name of the popUp menu if no other name has been defined.Add the following accLocation() method at line 498:

... 
	/** 
	 * IAccessible method for returning the bounding box of a the PopUpButton 
	 * or its child drop-down arrow. 
	 * 
	 * @param childID An unsigned integer corresponding to one of the component's 
	 * child elements as defined by 
	 *  <code><a href="#getChildIDArray()">getChildIDArray()</a></code>. 
	 * 
	 *  @return The PopUpButton or its drop-down button. 
	 * 
	 *  @see https://msdn.microsoft.com/en-us/library/ms696118(VS.85).aspx Microsoft Accessibility Developer Center: IAccessible::accLocation 
	 */ 
	override public function accLocation(childID:uint):* 
	{ 
 
		// the master component 
		var location:* = master; 
		 
		if(childID == 1){ 
		// calculate the rectangle location of the child drop-down button 
			var popUpButton:PopUpButton = master as PopUpButton; 
			var popUpButtonRect:Rectangle = popUpButton.getRect(popUpButton); 
			var arrowButtonsWidth:Number = 
popUpButton.mx_internal::getArrowButtonsWidth(); 
			location = new Rectangle( 
								popUpButtonRect.x + popUpButton.width - 
arrowButtonsWidth, 
								popUpButtonRect.y, 
								arrowButtonsWidth, 
								popUpButton.height 
							);	 
		} 
		 
		return location; 
		 
	} 
...

The accLocation() method returns the bounding box of the master component, or that of one of its children, relative to the master component's stage. The PopUpButton returns itself as the its bounding box location. Its child drop‑down button returns its bounding box as a Rectangle with its bounds determined programmatically.Update the eventHandler() method at line 535 to handle any events to which the PopUpButtonAccImpl should listen from its master component. In this example, the handled events should be the same as for the ButtonAccImpl, "click" and "labelChanged".

... 
	/** 
	 * Override the generic event handler. 
	 * Each AccImpl subclass must implement this method 
	 * to listen for events from its master component. 
	 * 
	 *  @param event The event object. 
	 * 
	 *  @see mx.accessibility.AccImpl#eventHandler() 
	 */ 
	override protected function eventHandler(event:Event):void 
	{ 
		switch (event.type) 
		{ 
			case "click": 
			{ 
				Accessibility.sendEvent(master, 0, EVENT_OBJECT_STATECHANGE); 
				Accessibility.updateProperties(); 
				break; 
			} 
			 
			case "labelChanged": 
			{ 
				Accessibility.sendEvent(master, 0, EVENT_OBJECT_NAMECHANGE); 
				Accessibility.updateProperties(); 
				break; 
			} 
			 
		} 
	} 
...

The eventHandler() method handles events from the master component and sends the appropriate object or system event to MSAA using the flash.accessibility.Accessibility.sendEvent() method. Depending on the object or system event it receives, the MSAA system will call the IAccessible method to retrieve the appropriate value from the object that sent the event.

Once you've added the accessibility mix‑in methods to your component and have created the AccImpl subclass, you can test the accessibility implementation.Copy the following MXML code sample into the default MXML application for your PopUpMenuButton Flex project. The application is a slightly modified version of the PopUpMenuButton example described in the article PopUpMenuButton control. The modification adds event handlers to retain the selectedItem in the popUp menu when the menu is opened and closed, which allows you to test the PopUpButtonAccImpl.get_accValue() method.

<?xml version="1.0"?> 
<!-- m  enus/Pop U pMenuButton Control.mxml     - - > 
 <s:Application xm lns :fx = "http://ns.adobe.co m/mx ml/2009" 
	xmlns:s="library: //ns. adobe.com/flex/spark" 
 	xmlns:mx=" librar y:// n s.adob e .com/flex/mx"  
	viewSourceURL="srcview/index.html">   
 
	<fx:Script> 
 	 	<![CDATA [ 
			import mx.events.DropdownEvent;  
 			impor t  mx.events.MenuEvent;  
			import mx.controls.Menu; 
 
			private var selectedIndex:int = 2; 
 
			// The initData function sets the initial value of the button 
			// label by setting the Menu subcontrol's selectedIndex property. 
			// You must cast the popUp property to a Menu. 
			private function initData():void { 
				var menu:Menu = Menu(pb2.popUp); 
				menu.selectedIndex = selectedIndex; 
				pb2.addEventListener(MenuEvent.ITEM_CLICK, itemClickHandler); 
				pb2.addEventListener(DropdownEvent.OPEN, openHandler); 
				pb2.addEventListener(DropdownEvent.CLOSE, closeHandler); 
			} 
 
			private function itemClickHandler(event:MenuEvent):void { 
			var menu:Menu = Menu(event.currentTarget.popUp); 
			selectedIndex=menu.selectedIndex; 
			} 
 
			private function openHandler(event:DropdownEvent):void { 
				var menu:Menu = Menu(pb2.popUp); 
				menu.selectedIndex = selectedIndex; 
			} 
 
			private function closeHandler(event:DropdownEvent):void { 
				var menu:Menu = Menu(pb2.popUp); 
				selectedIndex = (selectedIndex != menu.selectedIndex) ? 
				menu.selectedIndex : selectedIndex; 
				menu.selectedIndex = selectedIndex; 
			} 
		]]> 
	</fx:Script> 
	<fx:XML format="e4x" id="dp2"> 
		<root> 
			<editItem label="Cut"/> 
			<editItem label="Copy"/> 
			<editItem label="Paste"/> 
			<separator type="separator"/> 
			<editItem label="Delete"/> 
		</root> 
	</fx:XML> 
	<mx:PopUpMenuButton id="pb2" 
		dataProvider="{dp2}" 
		labelField="@label" 
		showRoot="false" 
		creationComplete="initData();" /> 
</s:Application>

Compile and debug the application in either Internet Explorer or Firefox. Open the MSAA SDK Tool Inspect32. Focus on the Flash movie in the browser window and navigate to focus on the PopUpMenu instance in your application using the the keyboard or the mouse. Inspect32 should track your focus and update its display window with information similar to the following:

How found:	Focus [o:0xFFFFFFFC,c:0x1] 
	hwnd=0x000C0976 32bit class="MacromediaFlashPlayerActiveX" style=0x56000000 ex=0x0 
Info:	IAcc = 0x001F1568 VarChild:[VT_I4=0x0] 
Interfaces:	IEnumVARIANT 
Impl:	Remote native IAccessible 
Annotation ID:	[not supported] 
Name:	"Paste" 
Value:	"Paste" 
Role:	split button 
State:	focused,hot tracked,focusable 
Location:	{l:802, t:147, w:63, h:22} 
Description:	none [mnfd] 
Kbshortcut:	none [mnfd] 
DefAction:	"Press" 
Parent:	none [mnfd]:client 
Help:	none [mnfd] 
Help Topic:	none [mnfd] 
ChildCount:	1 
Window:	0x000C0976 class="MacromediaFlashPlayerActiveX" style=0x56000000 ex=0x0 
Children:	"Open" : drop down button : hot tracked,has popup 
Selection:	none [mnfd] 
Ancestors:	none [mnfd] : client : focusable 
	[ No Parent ]

Inspect32 reveals how the PopUpButton Accessibility Implementation exposes itself to MSAA, as an object with the role "split button,", with name and value equal to "Paste," having the default action "Press."

The object's state includes "focused" and "hot tracked". It contains a single child with the role "drop down button," that has the name "Open." The child object's state includes "hot tracked" and "has popup." Inspect32 also allows you to test navigation and interaction programmatically.

For example, with the application in focus, type Ctrl+Shift+F12 to navigate to the next item or type Ctrl+Shift+F11 to navigate to the previous item in the MSAA hierarchy. Use Ctrl+Shift+F12 and/or Ctrl+Shift+F11 to set focus on the PopUpMenuButton instance's child drop down button. Type Ctrl+Shift+F2 to execute the default action for the drop down button. This action should open the popUp menu. The drop down button name should change to "Close," and its state should indicate "pressed." Type Ctrl+Shift+F2 again to close the menu.

Once you're fairly confident that your accessibility implementation is returning appropriate values for its IAccessible methods, you should test again using a screen reader that is capable of interpreting Flash applications, such as Freedom Scientific's JAWS or GW Micro's Window‑Eyes.

It is not uncommon for a component to behave unexpectedly when testing it with a screen reader. For example, the keyboard command Ctrl+Down arrow, which is used in the PopUpButton component to open the popUp menu, is also the standard keyboard command in JAWS to move one paragraph down in the text.

Using Ctrl+Shift+Down arrow instead of Ctrl+Down arrow will open the menu, but it's not obvious to the user. A better solution is to update the PopUpButton component, to allow it to open by pressing the Down arrow.Update the PopUpButton.keyDownHandler() method at line 907 in the PopUpButton class file for the PopUpMenuButton Flex project to read:

... 
	override protected function keyDownHandler(event:KeyboardEvent):void 
	{ 
		super.keyDownHandler(event); 
 
		// listen for both Ctrl+Down Arrow and Down Arrow events 
		// if the popUp menu is not already showing 
		if ((event.ctrlKey && event.keyCode == Keyboard.DOWN) 
		|| (event.keyCode == Keyboard.DOWN &&!showingPopUp)) 
		{ 
			openWithEvent(event); 
			event.stopPropagation(); 
		} 
		else if ((event.ctrlKey && event.keyCode == Keyboard.UP) || 
				(event.keyCode == Keyboard.ESCAPE)) 
		{ 
			closeWithEvent(event); 
			event.stopPropagation(); 
		} 
		else if (event.keyCode == Keyboard.ENTER &∓ showingPopUp) 
		{ 
			// Redispatch the event to the popup 
			// and let its keyDownHandler() handle it. 
			_popUp.dispatchEvent(event); 
			closeWithEvent(event); 
			event.stopPropagation(); 
		} 
		else if (showingPopUp && 
			(event.keyCode == Keyboard.UP || 
			event.keyCode == Keyboard.DOWN || 
			event.keyCode == Keyboard.LEFT || 
			event.keyCode == Keyboard.RIGHT || 
			event.keyCode == Keyboard.PAGE_UP || 
			event.keyCode == Keyboard.PAGE_DOWN)) 
		{ 
			// Redispatch the event to the popup 
			// and let its keyDownHandler() handle it. 
			_popUp.dispatchEvent(event); 
			event.stopPropagation(); 
		} 
	} 
...

Another peculiarity of JAWS is that it announces the role of the PopUpMenuButton component as a "button" as opposed to a "split button." Even if you are providing a correct accessibility implementation to MSAA, if it is of a system role that does not have a precedent in Flex or Flash, like the PopUpButton, the screen reader may not have been scripted to understand how to interpret an object with that system role in a Flash application. The short term solution is to add the system role to the name returned by the PopUpButtonAccImpl.getName() method.

Update the getName() method at line 463 in the PopUpButtonAccImpl class definition to read:

... 
	/** 
	 * Method for returning the name of the PopUpButton that is spoken 
	 * by the screen reader. 
	 *  The PopUpButton should return the label inside as the name of the PopUpButton. 
	 *  The child drop-down button should return "Open" or "Close". 
	 * 
	 *  @param childID An unsigned integer corresponding to one of the component's 
	 * child elements as defined by 
	 *  <code><a href="#getChildIDArray()">getChildIDArray()</a></code>. 
	 * 
	 *  @return Name string corresponding to the PopUpButton label. 
	 * "Open" or "Close" for the child drop-down button. 
	 */ 
	override protected function getName(childID:uint):String 
	{	 
		var popUpButton:PopUpButton = master as PopUpButton; 
		var popUp:UIComponent = popUpButton.popUp as UIComponent; 
 
		if(popUp && popUp is Menu){ 
		// a tweak to add Context as the name of the popUp menu if no other name is defined 
			if(!popUp.accessibilityProperties){ 
				popUp.accessibilityProperties = new AccessibilityProperties(); 
			} 
			if(popUp is Menu && popUp.accessibilityProperties.name == ""){ 
				popUp.accessibilityProperties.name = "Context"; 
			} 
		} 
		if(childID == 1){ 
		// For the drop-down button, if the popUp is showing, return Close, 
		// otherwise return Open. 
			return (popUpButton.mx_internal::isShowingPopUp == true) ? "Close" : "Open"; 
		} 
		 
		// For the popUpButton component itself, return the label property. 
		var label:String = popUpButton.label; 
		return label != null && label != "" ? label + " Split Button" : "Split Button"; 
 
	} 
...