Accessible components and containers

To accelerate building accessible applications, Adobe built support for accessibility into Flex MX components and containers. These components and containers automate many of the most common accessibility practices related to labeling, keyboard access, and testing. They also help ensure a consistent user experience across rich Internet applications.

Accessible Spark components

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

Component

Screen reader behavior

ButtonBar control

Use the Tab key to move focus among the button of the ButtonBar control. Press the Spacebar to activate a button of the ButtonBar control. To cancel activating a button, press the Tab key to move the focus off the button control before releasing the Spacebar.

Button control

Press the Spacebar to activate the Button control. To cancel activating a button, press the Tab key to move the focus off the Button control before releasing the Spacebar.

CheckBox control

Press the Spacebar to activate the check box items.

For more information on keyboard navigation, see CheckBox control user interaction.

ComboBox control

For more information on keyboard navigation, see Spark ComboBox control user interaction.

DropDownList control

For more information on keyboard navigation, see Spark DropDownList control user interaction.

List control

Screen reader navigation is the same as for keyboard navigation. For more information on keyboard navigation, see Keyboard navigation.

For information on creating data tips (tool tips for individual list elements), see Displaying DataTips. For information on creating scroll tips (tool tips that provide information while the user scrolls through a list), see Displaying ScrollTips.

NumericStepper control

The name of a NumericStepper is, by default, an empty string. When wrapped in a FormItem element, the name is the FormItem's label. To override this behavior, set the Number ic Stepper control’s accessibilityName property.

The name of each child button is: "More" and "Less".

For more information on keyboard navigation, see User interaction.

Panel container

Screen reader announces the panel title only when Forms mode is inactive.

RadioButton control

With one radio button selected within a group, press the Enter key to enter that group. Use the arrow keys to move between items in that group. Press the Down and Right Arrow keys to move to the next item in a group; press the Up and Left Arrow keys to move to a previous item in the group.

When using a screen reader, select a radio button by using the Spacebar key.

For more information on keyboard navigation, see RadioButton user interaction.

RadioButtonGroup control

Screen reader navigation is the same as for the RadioButton control.

RichEdiableText control

Use the Home key to move to the beginning of a line. Use the End key to move to the end of a line. Use the Control-Home to move to the beginning of the text. Use the Control-End key to move to the end of the text.

Slider controls

The name of a HSlider or VSlider is, by default, an empty string. When wrapped in a FormItem element, the name is the FormItem's label. To override this behavior, set the Slider's accessibilityName property.

The name of each child of the Slider control is:
  • "Page left" for HSlider; "Page up" for VSlider.

  • Position".

  • "Page right" for HSlider; "Page down" for VSlider.

For more information on keyboard navigation, see Keyboard navigation.

Spinner control

The name of a Spinner control is, by default, an empty string. When wrapped in a FormItem element, the name is the FormItem's label. To override this behavior, set the Spinner accessibilityName property.

The name of each child button is: "More" and "Less".

For more information on keyboard navigation, see User interaction.

TabBar control

The name of a TabBar is, by default, an empty string. When wrapped in a FormItem element, the name is the FormItem's label. To override this behavior, set the TabBar's accessibilityName property.The name of each tab in the TabBar is its label.

The TabBar and its individual tabs accept focus. A tab is not automatically pressed when focus is changed by arrow keys. To select a focused tab, use the spacebar.

TextArea control

Use the Home key to move to the beginning of a line. Use the End key to move to the end of a line. Use the Control-Home to move to the beginning of the text. Use the Control-End key to move to the end of the text.

TextInput control

Use the Home key to move to the beginning of a line. Use the End Up key to move to the end of a line.

TitleWindow container

The name of a TitleWindow is, by default, the title that it displays. To override this behavior, set the TitleWindow's accessibilityName property.

A TitleWindow does not accept focus.

A screen reader announces the TitleWindow control only when Forms mode is inactive.

ToggleButton control

Press the Spacebar to activate the control. To cancel activating a button, press the Tab key to move the focus off the control before releasing the Spacebar.

The name of a ToggleButton is, by default, the label that it displays. When wrapped in a FormItem element, this label will be combined with the FormItem's label. To override this behavior, set the ToggleButton's accessibilityName property.

To provide two separate names for the different states of an icon based ToggleButton, separate both names by a comma in the accessibilityName property. For example, accessibilityProperty="Mute,Unmute" When using state specific names like this, the button does not expose the "pressed" state when pressed.

VideoPlayer control

The name of a VideoPlayer is, by default, "VideoPlayer". When wrapped in a FormItem element, the name is the FormItem's label. To override this behavior, set the controls accessibilityName property.

The name of each child control is:
  • Play/Pause control: "Play" or "Pause"

  • Scrub control: "Scrub Bar"

  • Play time indicator: the displayed text

  • Mute control: "Muted" or "Not muted"

  • Volume control: "Volume Bar"

  • Full Screen control: "Full Screen"

To override the names of these child controls, reskin the VideoPlayer and set the accessibilityName of the controls.

Use the Tab key to move focus among the child controls. Use the Spacebar to activate the Play/Pause control and the Full Screen control. Use the arrow keys to modify the Scrub Bar and Volume Bar controls.

Accessible MX Components

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

Component

Screen reader behavior

Accordion container

Press the arrow keys to move the focus to a different panel, and then use the Spacebar or Enter key to select that panel. Use the Page Up and Page Down keys to move between individual panels of the container.

When a screen reader encounters an Accordion container, it indicates each panel with the word tab. It indicates the current panel with the word active.

For more information on keyboard navigation, see Accordion container Keyboard navigation.

AdvancedDataGrid control

The AdvancedDataGrid control supports the accessibility features in the DataGrid and Tree controls and provides additional features. For more information, see Accessibility for the AdvancedDataGrid control.

For more information on standard keyboard navigation, see Keyboard navigation.

Alert control

In Forms mode, the text in the Alert control and the label of its default button are announced.

When not in Forms mode, the text in the Alert control is announced twice when you press the Down Arrow.

Button control

Press the Spacebar to activate the Button control. To cancel activating a button, press the Tab key to move the focus off the Button control before releasing the Spacebar.

When a screen reader encounters a Button control, activation varies, depending on the screen reader. In JAWS 6.10, the Spacebar activates Button controls when Forms mode is active. When Forms mode is inactive, the Spacebar or Enter key can be used to activate Button controls.

CheckBox control

Press the Spacebar to activate the check box items.

For more information on keyboard navigation, see CheckBox control user interaction.

ColorPicker control

Announced as "colorpicker combo box."

Open by using Control+Down Arrow, and close by using Control+Up Arrow. When open, you can use the four arrow keys to move among the colors.

When open, the Enter key sets the color value to the currently selected color, as will Control+Up Arrow.

When open, the Escape key closes the drop-down area and resets the color value to the previously selected color value.

ComboBox control

For more information on keyboard navigation, see ComboBox control user interaction.

DataGrid control

Press the arrow keys to highlight the contents, and then move between the individual characters within that field.

When using a screen reader in forms mode, use the Tab key to move between editable TextInput fields in the DataGrid control.

For more information on keyboard navigation, see MX DataGrid control user interaction.

DateChooser control

Press the Up, Down, Left, and Right Arrow keys to change the selected date. Use the Home key to reach the first enabled date in the month and the End key to reach the last enabled date in a month. Use the Page Up and Page Down keys to reach the previous and next months. For more information on keyboard navigation, see User interaction.

DateField control

Use the Control+Down Arrow keys to open the DateChooser control and select the appropriate date. When using a screen reader in Forms mode, use the same keystrokes as for keyboard navigation.

When a screen reader encounters a DateChooser control in Forms mode, it announces the control as “DropDown Calendar currentDate, to open press Control Down, ComboBox,” where currentDate is the currently selected date.

For more information on keyboard navigation, see User interaction.

Form container

For information on keyboard navigation, see Defining a default button.

Image control

An Image control with a tool tip defined is read by a screen reader only when Forms mode is inactive. The Image control is not focusable in Forms mode, or by the keyboard.

Label control

A Label control is read by a screen reader when it is associated with other controls, or when the Forms mode is inactive. The Label control is not focusable in Forms mode, or by the keyboard.

LinkButton control

LinkButton control activation when using a screen reader varies, depending on the screen reader. In JAWS 6.10, press the Spacebar to activate a LinkButton control when in Forms mode. When Forms mode is inactive, use the Spacebar or Enter key to activate the control.

For more information on keyboard navigation, see LinkButton control user interaction.

List control

Screen reader navigation is the same as for keyboard navigation.

For more information on keyboard navigation, see List control user interaction.

For information on creating data tips (tool tips for individual list elements), see Displaying DataTips. For information on creating scroll tips (tool tips that provide information while the user scrolls through a list), see Displaying ScrollTips.

Menu control

Screen reader navigation is the same as for keyboard navigation.

For more information on keyboard navigation, see Menu control user interaction.

MenuBar control

Screen reader navigation is the same as for keyboard navigation.

For more information on keyboard navigation, see Menu control user interaction.

Panel container

Screen reader announces the panel title only when Forms mode is inactive.

RadioButton control

With one radio button selected within a group, press the Enter key to enter that group. Use the arrow keys to move between items in that group. Press the Down and Right Arrow keys to move to the next item in a group; press the Up and Left Arrow keys to move to a previous item in the group.

When using a screen reader, select a radio button by using the Spacebar key.

For more information on keyboard navigation, see RadioButton user interaction.

RadioButtonGroup control

Screen reader navigation is the same as for the RadioButton control.

Slider control

In forms mode the control is announced along with the orientation of the control (left-right or up-down) and the current value.

The control uses the following keys for a left-right slider:

  • Left Arrow / Right Arrow—move slider to lower/higher value.

  • Page Up / Page Down—move slider to top/ bottom of range.

  • Down Arrow/Up Arrow—move slider to lower/higher value.

  • Home/End—move slider to top/ bottom of range.

The control uses the following keys for an up/down slider:

  • Down Arrow/Up Arrow—move slider to lower/higher value.

  • Home/End—move slider to top/ bottom of range.

TabNavigator container

When a screen reader encounters a TabNavigator container pane, it indicates each pane with the word tab. It indicates the current pane with the word active. When a pane is selected, the user moves to that panel by pressing the Enter key.

Press the arrow keys to move the focus to a different panel, and then use the Spacebar or Enter key to select that panel. Use the Page Up and Page Down keys to move between individual panels of the container.

For more information on keyboard navigation, see TabNavigator container Keyboard navigation.

Text control

A Text control is not focusable and is read by screen readers only when Forms mode is inactive.

TextArea control

Use the Home key to move to the beginning of a line. Use the End key to move to the end of a line. Use the PageUp key to move to the beginning of the text. Use the PageDown key to move to the end of the text.

TextInput control

Use the Home or Page Down key to move to the beginning of a line. Use the End or Page Up key to move to the end of a line.

TitleWindow container

A screen reader announces the TitleWindow control only when Forms mode is inactive.

ToolTipManager

When a screen reader is used, the contents of a tool tip are read after the item to which the tool tip is attached gets focus. Tool tips attached to nonaccessible components (other than the Image control) are not read.

Tree control

Press the Up and Down Arrow keys to move between items in a Tree control. To open a group, press the Right Arrow key or Spacebar. To close a group, press the Left Arrow key or Spacebar. For more information on keyboard navigation, see Editing a node label at run timeand Tree user interaction.

Accessibility for the AdvancedDataGrid control

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."