Accessible components and containers
To accelerate building accessible applications, Adobe built support for accessibility into Flex 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.
Flex comes with the following set of accessible components and containers.
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 is announced, and the label of its default button. When not in Forms mode, the text in the Alert control is announced twice when you press the Down Arrow. |
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. For more information on keyboard navigation, see Button control user interaction. |
|
Press the Spacebar to activate the check box items. For more information on keyboard navigation, see CheckBox control user interaction. |
|
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. |
|
For more information on keyboard navigation, see ComboBox control user interaction. |
|
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 DataGrid control user interaction. |
|
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 ControlDown, 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. |
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. |
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. |
|
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. |
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:
The control uses the following keys for an up/down slider:
|
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 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. |
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. |
A screen reader announces the TitleWindow control only when Forms mode is inactive. |
|
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. |
|
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 time and 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.
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."