Google Git
Sign in
apache / flex-site / HEAD / . / content / doc / flex / using / flx_accessible_ac.html
blob: ee5171f4396df0dcb55d6d20bc575bfcfaf669cc [file] [log] [blame]
<?xml version="1.0" encoding="UTF-8"?>
<!--
Licensed to the Apache Software Foundation (ASF) under one or more
contributor license agreements. See the NOTICE file distributed with
this work for additional information regarding copyright ownership.
The ASF licenses this file to You under the Apache License, Version 2.0
(the "License"); you may not use this file except in compliance with
the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en-us" xml:lang="en-us">
<head>
<meta name="DC.Type" content="topic"/>
<meta name="DC.Title" content="Accessible applications"/>
<meta name="DC.Format" content="XHTML"/>
<meta name="DC.Identifier" content="WS2db454920e96a9e51e63e3d11c0bf69084-7f60_verapache"/>
<title>Accessible applications</title>
</head>
<body id="WS2db454920e96a9e51e63e3d11c0bf69084-7f60_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf69084-7f60_verapache"><!-- --></a>
<div class="nested1" id="WS2db454920e96a9e51e63e3d11c0bf6399c-7fff_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf6399c-7fff_verapache"><!-- --></a>
<h2 class="topictitle2">Accessibility overview</h2>
<div>
<p>You create accessible content by using accessibility features
included with Flex, by taking advantage of ActionScript designed
to implement accessibility, and by following recommended design
and development practices.</p>
<p>Visually impaired users, for example, might rely on assistive
technology such as screen readers, which provide an audio version
of screen content, or screen magnifiers, which display a small portion
of the screen at a larger size, effectively reducing the visible
screen area. Hearing-impaired users might read text and captions
in the document in place of audio content. Other considerations
arise for users with mobility or cognitive impairments.</p>
<p>The following list of recommended practices is not exhaustive,
but suggests common issues to consider. Depending on your audience's
needs, additional requirements may arise. </p>
<dl>
<dt class="dlterm">Visually impaired users</dt>
<dd>
<p>For visually impaired users, keep in mind the following design
recommendations: </p>
<ul>
<li>
<p>Design and implement a logical tab
order for the tabs.</p>
</li>
<li>
<p>Design the document so that constant changes in content do
not unnecessarily cause screen readers to refresh. For example,
you should group or hide looping elements. </p>
</li>
<li>
<p>Provide captions for narrative audio. Be aware of audio in
your document that might interfere with a user being able to listen
to the screen reader. </p>
</li>
<li>
<p>Use percentage sizing so that your applications scale properly
at smaller screen sizes. This allows users of screen magnifiers
to see more of your application at one time. Also take into account
that many visually impaired users run applications with lower screen
resolutions than other users.</p>
</li>
<li>
<p>Ensure that foreground and background colors contrast sufficiently
to make text readable for people with low vision.</p>
</li>
<li>
<p>Ensure that controls don't depend on the use of a specific
pointer device, such as a mouse or trackball. </p>
</li>
<li>
<p>Ensure that components are accessible by keyboard. All Flex
components defined as accessible include keyboard navigation. For
a list of these components and the available keyboard commands for
each, see <a href="flx_accessible_ac.html#WS2db454920e96a9e51e63e3d11c0bf69084-7da6_verapache">Accessible
components and containers</a>.</p>
</li>
</ul>
</dd>
<dt class="dlterm">Color-blind users</dt>
<dd>
<p>For color-blind users, ensure that color is not the only
means of conveying information.</p>
</dd>
<dt class="dlterm">Users with mobility impairment</dt>
<dd>
<p>For users with mobility impairment, keep in mind the following
design recommendations:</p>
<ul>
<li>
<p>Ensure that controls don't
depend on the use of a specific pointer device.</p>
</li>
<li>
<p>Ensure that components are accessible by keyboard. All Flex
components defined as accessible include keyboard navigation. For
a list of these components and the available keyboard commands for
each, see <a href="flx_accessible_ac.html#WS2db454920e96a9e51e63e3d11c0bf69084-7da6_verapache">Accessible
components and containers</a>.</p>
</li>
</ul>
</dd>
<dt class="dlterm">Hearing-impaired users</dt>
<dd>
<p>For hearing-impaired users, ensure that you add captions
to audio content. </p>
</dd>
<dt class="dlterm">Users with cognitive impairment</dt>
<dd>
<p>For users with cognitive impairments, such as dyslexia, keep
in mind the following design recommendations:</p>
<ul>
<li>
<p>Ensure
an uncluttered, easy-to-navigate design.</p>
</li>
<li>
<p>Provide graphical imagery that helps convey the purpose and
message of the application. These graphics should enhance, not replace,
textual or audio content.</p>
</li>
<li>
<p>Provide more than one method to accomplish common tasks.</p>
</li>
</ul>
</dd>
</dl>
</div>
<div class="nested2" id="WS2db454920e96a9e51e63e3d11c0bf6399c-7ffe_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf6399c-7ffe_verapache"><!-- --></a>
<h3 class="topictitle3">About worldwide accessibility standards</h3>
<div>
<p>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 <em>Web Content Accessibility Guidelines</em>,
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 <a href="https://www.w3.org/WAI/" target="_blank">www.w3.org/WAI</a>.</p>
<p>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. </p>
<p>For additional information about Section 508, see the U.S. government-sponsored
website at <a href="https://www.section508.gov" target="_blank">www.section508.gov.</a>
</p>
</div>
</div>
</div>
<div class="nested1" id="WS2db454920e96a9e51e63e3d11c0bf6399c-7ffc_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf6399c-7ffc_verapache"><!-- --></a>
<h2 class="topictitle2">About screen reader technology</h2>
<div>
<p>A
screen reader is software designed to navigate through a website
and read the web content aloud. Visually impaired users often rely
on this technology. You can create content designed for use with
screen readers for Microsoft<sup>®</sup> Windows<sup>®</sup> platforms only. Users who view your content
must have Adobe<sup>®</sup> Flash<sup>®</sup> Player
9 or later, and Firefox or Internet Explorer on Windows 2000 or
Windows XP or later.</p>
<p>JAWS, from Freedom Scientific, is one example of screen reader
software. Another commonly used screen reader program is Window‑Eyes, from
GW Micro.</p>
<div class="note"><span class="notetitle">Note:</span> Flex support is most comprehensive in the JAWS
screen reader. JAWS version 10 or later is strongly recommended.</div>
<p>Screen readers help users understand what is contained in a web
page or Flex application. Based on the keyboard shortcuts that you
define, you can let users easily navigate through your application
by using the screen reader. </p>
<p>Because different screen reader applications use various methods
to translate information into speech, your content will vary in
how it's presented to each user. As you design accessible applications,
keep in mind that you have no control over how a screen reader behaves.
You can only mark up the content in your applications so that you
expose the text and ensure that screen reader users can activate the
controls. This means that you can decide which objects in the application
are exposed to screen readers, provide descriptions for the objects,
and decide the order in which the objects are exposed to screen
readers. However, you cannot force screen readers to read specific
text at specific times or control the manner in which that content
is read. </p>
<p>To use a JAWS screen reader with a Flex application, users must
download a set of scripts before invoking the Flex application.
For more information, see <a href="flx_accessible_ac.html#WS2db454920e96a9e51e63e3d11c0bf69084-7da4_verapache">Configuring
a JAWS screen reader for Flex applications</a>. </p>
</div>
<div class="nested2" id="WS2db454920e96a9e51e63e3d11c0bf6399c-7ffb_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf6399c-7ffb_verapache"><!-- --></a>
<h3 class="topictitle3">Flash Player and Microsoft Active
Accessibility</h3>
<div>
<p>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 <a href="https://www.microsoft.com/enable/" target="_blank">www.microsoft.com/enable/</a>.</p>
<p>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.</p>
<p>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. </p>
<div class="important"><span class="importanttitle">Important:</span> MSAA is currently not<em> supported in the opaque windowless and transparent windowless modes. (These modes are options in the HTML Publish Settings panel, available for use with the Windows version of Internet Explorer 4.0 or later, with the Flash ActiveX control.) If your content must be accessible to screen readers, avoid using these modes.</em>
</div>
</div>
</div>
</div>
<div class="nested1" id="WSaa0aa854ca84f616a6379ea1221e4cdc21-8000_verapache"><a name="WSaa0aa854ca84f616a6379ea1221e4cdc21-8000_verapache"><!-- --></a>
<h2 class="topictitle2">How MSAA works</h2>
<div>
<p>MSAA is essentially
a middleware architecture that conveys an object model of an application.
This is most easily explained by an example. The following screenshot
shows an HTML form, as displayed in a browser:</p>
<div class="p">
<div class="figborder"><span class="figdesc">HTML form in a browser</span>
<img src="images/ac_htmlFormInBrowser.png"/>
</div>
</div>
<p>Here is a screen capture that shows the object tree exposed by
the browser to assistive technology:</p>
<div class="p">
<div class="figborder"><span class="figdesc">Accessibility object tree</span>
<img src="images/ac_accExplorer-html.png"/>
</div>
</div>
<p>And finally, here is how JAWS for Windows 9.0, a popular screen
reader for Windows, reads this form after loading the page in Internet
Explorer:</p>
<div class="p">
<pre class="codeblock">Simple HTML Form.
Choose one or more children:
Extended select list box:
Avery, one of four.
Submit Button.</pre>
</div>
<p>This example shows a simple, basic screen reader operation. A
screen reader is a very complicated program that does much more
than announce page contents; it speaks words under the mouse cursor,
provides hundreds of keyboard shortcuts, and keeps track of user
state in myriad ways.</p>
</div>
<div class="nested2" id="WSaa0aa854ca84f6165a39c5a1221e5caeb8-8000_verapache"><a name="WSaa0aa854ca84f6165a39c5a1221e5caeb8-8000_verapache"><!-- --></a>
<h3 class="topictitle3">MSAA under the surface</h3>
<div>
<p>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
(<a href="https://msdn.microsoft.com/en-us/library/ms696155(VS.85).aspx" target="_blank">WM_GETOBJECT</a>) to the browser, asking
for its root object.</p>
<p>The browser responds by sending back a pointer to a COM interface
of type <a href="https://msdn.microsoft.com/en-us/library/ms696165(VS.85).aspx" target="_blank">IAccessible</a>. This interface has methods
that allow the screen reader to ask for object properties, such
as type, name, description, value, and visibility.</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
</div>
</div>
</div>
<div class="nested1" id="WSaa0aa854ca84f616a6379ea1221e4cdc21-7fff_verapache"><a name="WSaa0aa854ca84f616a6379ea1221e4cdc21-7fff_verapache"><!-- --></a>
<h2 class="topictitle2">Accessible object model in Flash
Player</h2>
<div>
<p>The Flash Player's accessible object tree consists of a
single top-level container (the root accessible object) containing
a flat collection of the following types of objects:</p>
<div class="p">
<ul>
<li>
<p>
<strong>Text</strong>: Regions of dynamic or static text in
the movie. The principal property of a text object is its name,
which, in keeping with MSAA convention, is equal to the contents
of the text string being displayed. A text object may also have
an associated description string. The Flash Player also makes an
attempt to deduce labeling relationships between text and input
text fields (text immediately above or to the left of an input text
field is be taken as a label for that field), and between text and
buttons (text entirely inside a button will be taken as a label
for that button). Any text that is deduced to be a label will be
omitted from the accessible object tree, and the content of that
text will be used as the name of the object that it labels. Labels
are never assigned to buttons or text fields that have author-supplied
names.</p>
</li>
<li>
<p>
<strong>Input text fields</strong>: An input text object has a value,
and optionally a name, a description string and a keyboard shortcut
string. As described above, an input text object's name may come
from a text object that is deduced to label it.</p>
</li>
<li>
<p>
<strong>Buttons</strong>: A button object has a state (pressed or not
pressed), supports a programmatic default action that causes the
button to depress momentarily, and may optionally have a name, a
description string, and a keyboard shortcut string. As described
above, a button object's name may come from a text object that is
deduced to label it. Movie clips used as buttons in Flash Player are
described by the player to MSAA as buttons, not as movie clips.
The child objects inside buttons are note normally looked at by
the player for accessibility purposes—buttons are "leaves" in the
accessible object tree. There is one exception: for buttons that
do not have author-supplied names, the player will look through
the button's child elements (just one child-level deep) for a text element.
If a text element is found, it is taken as a label for the button.</p>
</li>
<li>
<p>
<strong>Simple movie clips</strong>: All non-scripted movie clips at
all levels are classified into one of two categories: simple or
non-simple. A movie clip is simple if it does not have any other
accessible objects (text, input text, buttons, or components) as
children at any level of depth. Non-simple clips are not given any representation
in the object tree; instead, their accessible-object contents are promoted
into the flat top-level list of accessible objects. Simple clips,
on the other hand, do show up in the object tree, expressed to MSAA
as an image or animation widget. If a simple clip contains other
simple clips, only the topmost simple clip is included in the object
tree. A simple clip has a state (animated or not animated), and
may optionally have a name and a description string. Note that all
video regions are also treated as simple movie clips.</p>
</li>
<li>
<p>
<strong>Scripted movie clips</strong>: Flex (and Flash Professional)
UI components present a special problem for the accessible object
model in Flash Player. They are movie clips or sprites built from
collections of text, input text, shapes, and buttons, but if Flash
Player exposed those individual objects to MSAA, the meaning of the
overall component would be lost. For this reason, a Flex UI (or
Flash Professional) component may require a custom accessibility
implementation. A movie clip or sprite that provides its own accessibility
implementation is called a scripted movie clip, and it appears in
the accessible object tree. The details of the accessibility implementation
depend on the kind of component being implemented and are up to
the component developer.</p>
</li>
</ul>
</div>
<p>The Flash Player provides the flash.accessibility.AccessibilityImplementation class
as a base class for creating custom accessibility implementations
for Flex UI components in ActionScript 3. In Flex, this class is
extended by mx.accessibility.AccImpl which serves as the base class
for accessibility implementations in Flex components. A new accessibility
implementation can be created by extending mx.accessibility.AccImpl
for each new component. </p>
<p>When a Flex project is compiled with Generate accessible SWF
file set to true, the Flex compiler automatically enables accessibility
implementations for the components in the project that have them.
At runtime, when Flash Player discovers a component that has a custom
accessibility implementation, it will treat that component as a
scripted movie clip.</p>
<p>The following example shows a screenshot of a simple Flex form:</p>
<div class="p">
<div class="figborder"><span class="figdesc">A simple Flex form</span>
<img src="images/ac_FlexForm.png"/>
</div>
</div>
<p>When the project is compiled with Generate accessible SWF file
set to false, the object tree exposed by the browser to assistive
technology contains only text and simple movie clips, as shown in
the following image:</p>
<div class="p">
<div class="figborder"><span class="figdesc">Accessibility object tree for a nonaccessible Flex application</span>
<img src="images/ac_accExplorer-Flex.png"/>
</div>
</div>
<p>When the same project is compiled with Generate accessible SWF
file set to true, the object tree exposed by the browser to assistive
technology includes scripted movie clips with accessibility implementations
that properly expose them as text, a list box, and a button component:</p>
<div class="p">
<div class="figborder"><span class="figdesc">Accessibility object tree for an accessible Flex application</span>
<img src="images/ac_accExplorer-FlexAccessible.png"/>
</div>
</div>
<p>The methods of the flash.accessibility.AccessibilityImplementation
class are a subset of the IAccessible interface, adapted slightly
for ease of use. The Flash Player IAccessible interface for a scripted
movie clip simply passes most calls from MSAA through to the flash.accessibility.AccessibilityImplementation subclass
instance for that component. For example, when a screen reader needs to
determine the default action of a mx.controls.Button component instance
on the Stage in Flash Player, it calls the IAccessible method <samp class="codeph">get_accDefaultAction()</samp> on
the IAccessible interface exposed by the Flash Player for that component
instance. The request is passed through to the <samp class="codeph">get_accDefaultAction()</samp> method
of the mx.accessibility.ButtonAccImpl accessibility implementation
class instance, which returns the appropriate default action String
for a button control, which is "Press." The article Custom Accessibility
Implementations explains in more detail how to build custom accessibility
implementations for Flex components.</p>
</div>
</div>
<div class="nested1" id="WS2db454920e96a9e51e63e3d11c0bf69084-7da1_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf69084-7da1_verapache"><!-- --></a>
<h2 class="topictitle2">Configuring Flex applications for accessibility</h2>
<div class="nested2" id="WS2db454920e96a9e51e63e3d11c0bf6399c-7ff9_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf6399c-7ff9_verapache"><!-- --></a>
<h3 class="topictitle3">Enabling accessibility in Flex</h3>
<div>
<p>By default, Flex accessibility features are disabled. When
you enable accessibility, you enable the application to communicate
with a screen reader. </p>
<p>You can use one of the following methods to enable accessibility:</p>
<ul>
<li>
<p>Enable accessibility by default for all Flex applications
so that all requests return accessible content.</p>
<p>To enable
accessibility for all Flex applications, edit the flex-config.xml
file to set the <samp class="codeph">accessible</samp> property to <samp class="codeph">true</samp>,
the default value, as the following example shows:</p>
<pre class="codeblock"> &lt;compiler&gt;
  ...
  &lt;accessible&gt;true&lt;/accessible&gt;
  ...
 &lt;compiler&gt;</pre>
</li>
<li>
<p>Enable accessibility by using the mxmlc command-line compiler.</p>
<p>When
you compile a file by using the mxmlc command-line compiler, you
can use the ‑<samp class="codeph">accessible</samp> option to enable accessibility,
as the following example shows:</p>
<pre class="codeblock"> mxmlc -accessible c:/dev/myapps/mywar.war/app1.mxml</pre>
<p>For
more information on the command-line compiler, see <a href="flx_compilers_cpl.html#WS2db454920e96a9e51e63e3d11c0bf69084-7ffd_verapache">Flex
compilers</a>. </p>
<p>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 <samp class="codeph">–compiler.accessible</samp> (or just <samp class="codeph">–accessible</samp>)
to enable accessibility, as shown in the following examples:</p>
<div class="p">
<pre class="codeblock">mxmlc –compiler.accessible c:/dev/myapps/ appl.mxml</pre>
</div>
<div class="p">
<pre class="codeblock">mxmlc -accessible c:/dev/myapps/appl.mxml</pre>
</div>
</li>
</ul>
<p>If you edited the flex-config.xml file to enable accessibility
by default, you can disable it for an individual request by setting
the <samp class="codeph">accessible</samp> query parameter to <samp class="codeph">false</samp>,
as the following example shows:</p>
<pre class="codeblock"> http://www.mycompany.com/myflexapp/app1.mxml?accessible=false</pre>
<p>For more information on the command-line compiler, see <a href="flx_compilers_cpl.html#WS2db454920e96a9e51e63e3d11c0bf69084-7ffd_verapache">Flex
compilers</a>. </p>
</div>
</div>
<div class="nested2" id="WS2db454920e96a9e51e63e3d11c0bf69084-7da4_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf69084-7da4_verapache"><!-- --></a>
<h3 class="topictitle3">Configuring a JAWS screen reader
for Flex applications</h3>
<div>
<p>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.</p>
<p>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.</p>
<p>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.</p>
</div>
</div>
</div>
<div class="nested1" id="WS2db454920e96a9e51e63e3d11c0bf69084-7da6_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf69084-7da6_verapache"><!-- --></a>
<h2 class="topictitle2">Accessible components and containers</h2>
<div>
<p>To accelerate building accessible applications, there is
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. </p>
</div>
<div class="nested2" id="WS65aa2914f20a58eb22d397a612598077d4e-8000_verapache"><a name="WS65aa2914f20a58eb22d397a612598077d4e-8000_verapache"><!-- --></a>
<h3 class="topictitle3">Accessible Spark components</h3>
<div>
<p>Flex
comes with the following set of accessible components and containers
in the Spark component set. </p>
<div class="tablenoborder"><table cellpadding="4" cellspacing="0" summary="" frame="border" border="1" rules="all">
<thead align="left">
<tr>
<th class="cellrowborder" valign="top" width="NaN%" id="d7028e739">
<p>Component</p>
</th>
<th class="cellrowborder" valign="top" width="NaN%" id="d7028e745">
<p>Screen reader behavior</p>
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="cellrowborder" valign="top" width="NaN%" headers="d7028e739 ">
<p>
<a href="https://flex.apache.org/asdoc/spark/components/ButtonBar.html" target="_blank">ButtonBar</a> control</p>
</td>
<td class="cellrowborder" valign="top" width="NaN%" headers="d7028e745 ">
<p>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. </p>
</td>
</tr>
<tr>
<td class="cellrowborder" valign="top" width="NaN%" headers="d7028e739 ">
<p>
<a href="https://flex.apache.org/asdoc/spark/components/Button.html" target="_blank">Button</a> control</p>
</td>
<td class="cellrowborder" valign="top" width="NaN%" headers="d7028e745 ">
<p>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. </p>
</td>
</tr>
<tr>
<td class="cellrowborder" valign="top" width="NaN%" headers="d7028e739 ">
<p>
<a href="https://flex.apache.org/asdoc/spark/components/CheckBox.html" target="_blank">CheckBox</a> control</p>
</td>
<td class="cellrowborder" valign="top" width="NaN%" headers="d7028e745 ">
<p>Press the Spacebar to activate the check
box items. </p>
<p>For more information on keyboard navigation, see <a href="flx_controls_ctr.html#WS2db454920e96a9e51e63e3d11c0bf69084-7db6_verapache">CheckBox
control user interaction</a>. </p>
</td>
</tr>
<tr>
<td class="cellrowborder" valign="top" width="NaN%" headers="d7028e739 ">
<p>
<a href="https://flex.apache.org/asdoc/spark/components/ComboBox.html" target="_blank">ComboBox</a> control</p>
</td>
<td class="cellrowborder" valign="top" width="NaN%" headers="d7028e745 ">
<p>For more information on keyboard navigation,
see <a href="flx_spark_dpcontrols_sdp.html#WS70f0d54f063b9b08-69285d3c124728d5793-8000_verapache">Spark
ComboBox control user interaction</a>. </p>
</td>
</tr>
<tr>
<td class="cellrowborder" valign="top" width="NaN%" headers="d7028e739 ">
<p>
<a href="https://flex.apache.org/asdoc/spark/components/DropDownList.html" target="_blank">DropDownList</a> control</p>
</td>
<td class="cellrowborder" valign="top" width="NaN%" headers="d7028e745 ">
<p>For more information on keyboard navigation,
see <a href="flx_spark_dpcontrols_sdp.html#WSadd5e192b30094714d63c41412158f77a50-8000_verapache">Spark
DropDownList control user interaction</a>. </p>
</td>
</tr>
<tr>
<td class="cellrowborder" valign="top" width="NaN%" headers="d7028e739 ">
<p>
<a href="https://flex.apache.org/asdoc/spark/components/List.html" target="_blank">List</a> control</p>
</td>
<td class="cellrowborder" valign="top" width="NaN%" headers="d7028e745 ">
<p>Screen reader navigation is the same as
for keyboard navigation. For more information on keyboard navigation,
see <a href="flx_dpcontrols_dpc.html#WS19f279b149e7481c-65668f0612c12b89f91-8000_verapache">Keyboard
navigation</a>.</p>
<p>For information on creating data tips (tool
tips for individual list elements), see <a href="flx_dpcontrols_dpc.html#WS19f279b149e7481c32a1a3e512c12af2ad0-7fff_verapache">Displaying
DataTips</a>. For information on creating scroll tips (tool tips
that provide information while the user scrolls through a list), see <a href="flx_dpcontrols_dpc.html#WS19f279b149e7481c32a1a3e512c12af2ad0-7ffe_verapache">Displaying
ScrollTips</a>. </p>
</td>
</tr>
<tr>
<td class="cellrowborder" valign="top" width="NaN%" headers="d7028e739 ">
<p>
<a href="https://flex.apache.org/asdoc/spark/components/NumericStepper.html" target="_blank">NumericStepper</a> control</p>
</td>
<td class="cellrowborder" valign="top" width="NaN%" headers="d7028e745 ">
<p>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 <samp class="codeph">accessibilityName</samp> property. </p>
<p>The
name of each child button is: "More" and "Less".</p>
<p>For more
information on keyboard navigation, see <a href="flx_controls_ctr.html#WS2db454920e96a9e51e63e3d11c0bf63b33-7fd8_verapache">User
interaction</a>. </p>
</td>
</tr>
<tr>
<td class="cellrowborder" valign="top" width="NaN%" headers="d7028e739 ">
<p>
<a href="https://flex.apache.org/asdoc/spark/components/Panel.html" target="_blank">Panel</a> container</p>
</td>
<td class="cellrowborder" valign="top" width="NaN%" headers="d7028e745 ">
<p>Screen reader announces the panel title
only when Forms mode is inactive. </p>
</td>
</tr>
<tr>
<td class="cellrowborder" valign="top" width="NaN%" headers="d7028e739 ">
<p>
<a href="https://flex.apache.org/asdoc/spark/components/RadioButton.html" target="_blank">RadioButton</a> control</p>
</td>
<td class="cellrowborder" valign="top" width="NaN%" headers="d7028e745 ">
<p>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. </p>
<p>When
using a screen reader, select a radio button by using the Spacebar
key. </p>
<p>For more information on keyboard navigation, see <a href="flx_controls_ctr.html#WS2db454920e96a9e51e63e3d11c0bf69084-7daa_verapache">RadioButton
user interaction</a>.</p>
</td>
</tr>
<tr>
<td class="cellrowborder" valign="top" width="NaN%" headers="d7028e739 ">
<p>
<a href="https://flex.apache.org/asdoc/spark/components/RadioButtonGroup.html" target="_blank">RadioButtonGroup</a> control</p>
</td>
<td class="cellrowborder" valign="top" width="NaN%" headers="d7028e745 ">
<p>Screen reader navigation is the same as
for the RadioButton control.</p>
</td>
</tr>
<tr>
<td class="cellrowborder" valign="top" width="NaN%" headers="d7028e739 ">
<p>
<a href="https://flex.apache.org/asdoc/spark/components/RichEditableText.html" target="_blank">RichEdiableText</a> control</p>
</td>
<td class="cellrowborder" valign="top" width="NaN%" headers="d7028e745 ">
<p>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.</p>
</td>
</tr>
<tr>
<td class="cellrowborder" valign="top" width="NaN%" headers="d7028e739 ">
<p>Slider controls</p>
</td>
<td class="cellrowborder" valign="top" width="NaN%" headers="d7028e745 ">
<p>The name of a <a href="https://flex.apache.org/asdoc/spark/components/HSlider.html" target="_blank">HSlider</a> or <a href="https://flex.apache.org/asdoc/spark/components/VSlider.html" target="_blank">VSlider</a> 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 <samp class="codeph">accessibilityName</samp> property.</p>
<div class="p">The
name of each child of the Slider control is: <ul>
<li>
<p>"Page left"
for HSlider; "Page up" for VSlider.</p>
</li>
<li>
<p>Position".</p>
</li>
<li>
<p>"Page right" for HSlider; "Page down" for VSlider.</p>
</li>
</ul>
</div>
<p>For
more information on keyboard navigation, see <a href="flx_controls_ctr.html#WS2db454920e96a9e51e63e3d11c0bf63b33-7fc3_verapache">Keyboard
navigation</a>.</p>
</td>
</tr>
<tr>
<td class="cellrowborder" valign="top" width="NaN%" headers="d7028e739 ">
<p>
<a href="https://flex.apache.org/asdoc/spark/components/Spinner.html" target="_blank">Spinner</a> control</p>
</td>
<td class="cellrowborder" valign="top" width="NaN%" headers="d7028e745 ">
<p>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 <samp class="codeph">accessibilityName</samp> property. </p>
<p>The
name of each child button is: "More" and "Less".</p>
<p>For more
information on keyboard navigation, see <a href="flx_controls_ctr.html#WS2db454920e96a9e51e63e3d11c0bf63b33-7fd8_verapache">User
interaction</a>. </p>
</td>
</tr>
<tr>
<td class="cellrowborder" valign="top" width="NaN%" headers="d7028e739 ">
<p>
<a href="https://flex.apache.org/asdoc/spark/components/TabBar.html" target="_blank">TabBar</a> control</p>
</td>
<td class="cellrowborder" valign="top" width="NaN%" headers="d7028e745 ">
<p>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 <samp class="codeph">accessibilityName</samp> property.The name
of each tab in the TabBar is its label.</p>
<p>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.</p>
</td>
</tr>
<tr>
<td class="cellrowborder" valign="top" width="NaN%" headers="d7028e739 ">
<p>
<a href="https://flex.apache.org/asdoc/spark/components/TextArea.html" target="_blank">TextArea</a> control</p>
</td>
<td class="cellrowborder" valign="top" width="NaN%" headers="d7028e745 ">
<p>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.</p>
</td>
</tr>
<tr>
<td class="cellrowborder" valign="top" width="NaN%" headers="d7028e739 ">
<p>
<a href="https://flex.apache.org/asdoc/spark/components/TextInput.html" target="_blank">TextInput</a> control</p>
</td>
<td class="cellrowborder" valign="top" width="NaN%" headers="d7028e745 ">
<p>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.</p>
</td>
</tr>
<tr>
<td class="cellrowborder" valign="top" width="NaN%" headers="d7028e739 ">
<p>
<a href="https://flex.apache.org/asdoc/spark/components/TitleWindow.html" target="_blank">TitleWindow</a> container</p>
</td>
<td class="cellrowborder" valign="top" width="NaN%" headers="d7028e745 ">
<p>The name of a TitleWindow is, by default,
the title that it displays. To override this behavior, set the TitleWindow's <samp class="codeph">accessibilityName</samp> property. </p>
<p>A
TitleWindow does not accept focus. </p>
<p>A screen reader announces
the TitleWindow control only when Forms mode is inactive. </p>
</td>
</tr>
<tr>
<td class="cellrowborder" valign="top" width="NaN%" headers="d7028e739 ">
<p>
<a href="https://flex.apache.org/asdoc/spark/components/ToggleButton.html" target="_blank">ToggleButton</a> control</p>
</td>
<td class="cellrowborder" valign="top" width="NaN%" headers="d7028e745 ">
<p>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. </p>
<p>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 <samp class="codeph">accessibilityName</samp> property. </p>
<p>To
provide two separate names for the different states of an icon based
ToggleButton, separate both names by a comma in the <samp class="codeph">accessibilityName</samp> property.
For example, <samp class="codeph">accessibilityProperty="Mute,Unmute"</samp> When
using state specific names like this, the button does not expose
the "pressed" state when pressed.</p>
</td>
</tr>
<tr>
<td class="cellrowborder" valign="top" width="NaN%" headers="d7028e739 ">
<p>
<a href="https://flex.apache.org/asdoc/spark/components/VideoPlayer.html" target="_blank">VideoPlayer</a> control</p>
</td>
<td class="cellrowborder" valign="top" width="NaN%" headers="d7028e745 ">
<p>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 <samp class="codeph">accessibilityName</samp> property.</p>
<div class="p">The
name of each child control is: <ul>
<li>
<p>Play/Pause control: "Play"
or "Pause"</p>
</li>
<li>
<p>Scrub control: "Scrub Bar"</p>
</li>
<li>
<p>Play time indicator: the displayed text</p>
</li>
<li>
<p>Mute control: "Muted" or "Not muted"</p>
</li>
<li>
<p>Volume control: "Volume Bar"</p>
</li>
<li>
<p>Full Screen control: "Full Screen"</p>
</li>
</ul>
</div>
<p>To
override the names of these child controls, reskin the VideoPlayer
and set the <samp class="codeph">accessibilityName</samp> of the controls.</p>
<p>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. </p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="nested2" id="WS65aa2914f20a58eb22d397a612598077d4e-7fff_verapache"><a name="WS65aa2914f20a58eb22d397a612598077d4e-7fff_verapache"><!-- --></a>
<h3 class="topictitle3">Accessible MX Components</h3>
<div>
<p>Flex
comes with the following set of accessible components and containers
in the MX component set. </p>
<div class="tablenoborder"><table cellpadding="4" cellspacing="0" summary="" frame="border" border="1" rules="all">
<thead align="left">
<tr>
<th class="cellrowborder" valign="top" width="NaN%" id="d7028e1343">
<p>Component</p>
</th>
<th class="cellrowborder" valign="top" width="NaN%" id="d7028e1349">
<p>Screen reader behavior</p>
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="cellrowborder" valign="top" width="NaN%" headers="d7028e1343 ">
<p>
<a href="https://flex.apache.org/asdoc/mx/containers/Accordion.html" target="_blank">Accordion</a> container</p>
</td>
<td class="cellrowborder" valign="top" width="NaN%" headers="d7028e1349 ">
<p>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. </p>
<p>When a screen reader encounters
an Accordion container, it indicates each panel with the word <em>tab</em>.
It indicates the current panel with the word <em>active</em>. </p>
<p>For
more information on keyboard navigation, see <a href="flx_navigators_na.html#WS2db454920e96a9e51e63e3d11c0bf69084-7dba_verapache">Accordion
container Keyboard navigation</a>. </p>
</td>
</tr>
<tr>
<td class="cellrowborder" valign="top" width="NaN%" headers="d7028e1343 ">
<p>
<a href="https://flex.apache.org/asdoc/mx/controls/AdvancedDataGrid.html" target="_blank">AdvancedDataGrid</a> control</p>
</td>
<td class="cellrowborder" valign="top" width="NaN%" headers="d7028e1349 ">
<p>The AdvancedDataGrid control supports the
accessibility features in the DataGrid and Tree controls and provides
additional features. For more information, see <a href="flx_accessible_ac.html#WS2db454920e96a9e51e63e3d11c0bf69084-7db9_verapache">Accessibility
for the AdvancedDataGrid control</a>. </p>
<p>For more information
on standard keyboard navigation, see <a href="flx_advdatagrid_ad.html#WS2db454920e96a9e51e63e3d11c0bf69084-7db8_verapache">Keyboard
navigation</a>.</p>
</td>
</tr>
<tr>
<td class="cellrowborder" valign="top" width="NaN%" headers="d7028e1343 ">
<p>
<a href="https://flex.apache.org/asdoc/mx/controls/Alert.html" target="_blank">Alert</a> control</p>
</td>
<td class="cellrowborder" valign="top" width="NaN%" headers="d7028e1349 ">
<p>In Forms mode, the text in the Alert control
and the label of its default button are announced.</p>
<p>When not
in Forms mode, the text in the Alert control is announced twice
when you press the Down Arrow.</p>
</td>
</tr>
<tr>
<td class="cellrowborder" valign="top" width="NaN%" headers="d7028e1343 ">
<p>
<a href="https://flex.apache.org/asdoc/mx/controls/Button.html" target="_blank">Button</a> control</p>
</td>
<td class="cellrowborder" valign="top" width="NaN%" headers="d7028e1349 ">
<p>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. </p>
<p>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. </p>
</td>
</tr>
<tr>
<td class="cellrowborder" valign="top" width="NaN%" headers="d7028e1343 ">
<p>
<a href="https://flex.apache.org/asdoc/mx/controls/CheckBox.html" target="_blank">CheckBox</a> control</p>
</td>
<td class="cellrowborder" valign="top" width="NaN%" headers="d7028e1349 ">
<p>Press the Spacebar to activate the check
box items. </p>
<p>For more information on keyboard navigation, see <a href="flx_controls_ctr.html#WS2db454920e96a9e51e63e3d11c0bf69084-7db6_verapache">CheckBox
control user interaction</a>. </p>
</td>
</tr>
<tr>
<td class="cellrowborder" valign="top" width="NaN%" headers="d7028e1343 ">
<p>
<a href="https://flex.apache.org/asdoc/mx/controls/ColorPicker.html" target="_blank">ColorPicker</a> control</p>
</td>
<td class="cellrowborder" valign="top" width="NaN%" headers="d7028e1349 ">
<p>Announced as "colorpicker combo box." </p>
<p>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. </p>
<p>When
open, the Enter key sets the color value to the currently selected
color, as will Control+Up Arrow.</p>
<p>When open, the Escape key
closes the drop-down area and resets the color value to the previously selected
color value.</p>
</td>
</tr>
<tr>
<td class="cellrowborder" valign="top" width="NaN%" headers="d7028e1343 ">
<p>
<a href="https://flex.apache.org/asdoc/mx/controls/ComboBox.html" target="_blank">ComboBox</a> control</p>
</td>
<td class="cellrowborder" valign="top" width="NaN%" headers="d7028e1349 ">
<p>For more information on keyboard navigation,
see <a href="flx_dpcontrols_dpc.html#WS2db454920e96a9e51e63e3d11c0bf69084-7db5_verapache">ComboBox
control user interaction</a>. </p>
</td>
</tr>
<tr>
<td class="cellrowborder" valign="top" width="NaN%" headers="d7028e1343 ">
<p>
<a href="https://flex.apache.org/asdoc/mx/controls/DataGrid.html" target="_blank">DataGrid</a> control</p>
</td>
<td class="cellrowborder" valign="top" width="NaN%" headers="d7028e1349 ">
<p>Press the arrow keys to highlight the contents,
and then move between the individual characters within that field. </p>
<p>When
using a screen reader in forms mode, use the Tab key to move between
editable TextInput fields in the DataGrid control. </p>
<p>For more
information on keyboard navigation, see <a href="flx_dpcontrols_dpc.html#WS2db454920e96a9e51e63e3d11c0bf69084-7db4_verapache">MX
DataGrid control user interaction</a>.</p>
</td>
</tr>
<tr>
<td class="cellrowborder" valign="top" width="NaN%" headers="d7028e1343 ">
<p>
<a href="https://flex.apache.org/asdoc/mx/controls/DateChooser.html" target="_blank">DateChooser</a> control</p>
</td>
<td class="cellrowborder" valign="top" width="NaN%" headers="d7028e1349 ">
<p>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 <a href="flx_controls_ctr.html#WS2db454920e96a9e51e63e3d11c0bf69084-7db3_verapache">User
interaction</a>. </p>
</td>
</tr>
<tr>
<td class="cellrowborder" valign="top" width="NaN%" headers="d7028e1343 ">
<p>
<a href="https://flex.apache.org/asdoc/mx/controls/DateField.html" target="_blank">DateField</a> control</p>
</td>
<td class="cellrowborder" valign="top" width="NaN%" headers="d7028e1349 ">
<p>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.</p>
<p>When a screen reader encounters a DateChooser
control in Forms mode, it announces the control as "DropDown Calendar <em>currentDate</em>,
to open press Control Down, ComboBox," where <em>currentDate</em> is
the currently selected date. </p>
<p>For more information on keyboard
navigation, see <a href="flx_controls_ctr.html#WS2db454920e96a9e51e63e3d11c0bf69084-7db3_verapache">User
interaction</a>.</p>
</td>
</tr>
<tr>
<td class="cellrowborder" valign="top" width="NaN%" headers="d7028e1343 ">
<p>
<a href="https://flex.apache.org/asdoc/mx/containers/Form.html" target="_blank">Form</a> container</p>
</td>
<td class="cellrowborder" valign="top" width="NaN%" headers="d7028e1349 ">
<p>For information on keyboard navigation,
see <a href="flx_layouts_lo.html#WS2db454920e96a9e51e63e3d11c0bf69084-7db1_verapache">Defining
a default button</a>.</p>
</td>
</tr>
<tr>
<td class="cellrowborder" valign="top" width="NaN%" headers="d7028e1343 ">
<p>
<a href="https://flex.apache.org/asdoc/mx/controls/Image.html" target="_blank">Image</a> control</p>
</td>
<td class="cellrowborder" valign="top" width="NaN%" headers="d7028e1349 ">
<p>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.</p>
</td>
</tr>
<tr>
<td class="cellrowborder" valign="top" width="NaN%" headers="d7028e1343 ">
<p>
<a href="https://flex.apache.org/asdoc/mx/controls/Label.html" target="_blank">Label</a> control</p>
</td>
<td class="cellrowborder" valign="top" width="NaN%" headers="d7028e1349 ">
<p>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.</p>
</td>
</tr>
<tr>
<td class="cellrowborder" valign="top" width="NaN%" headers="d7028e1343 ">
<p>
<a href="https://flex.apache.org/asdoc/mx/controls/LinkButton.html" target="_blank">LinkButton</a> control</p>
</td>
<td class="cellrowborder" valign="top" width="NaN%" headers="d7028e1349 ">
<p>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. </p>
<p>For more information on keyboard
navigation, see <a href="flx_controls_ctr.html#WS2db454920e96a9e51e63e3d11c0bf69084-7db0_verapache">LinkButton
control user interaction</a>.</p>
</td>
</tr>
<tr>
<td class="cellrowborder" valign="top" width="NaN%" headers="d7028e1343 ">
<p>
<a href="https://flex.apache.org/asdoc/mx/controls/List.html" target="_blank">List</a> control</p>
</td>
<td class="cellrowborder" valign="top" width="NaN%" headers="d7028e1349 ">
<p>Screen reader navigation is the same as
for keyboard navigation. </p>
<p>For more information on keyboard
navigation, see <a href="flx_dpcontrols_dpc.html#WS2db454920e96a9e51e63e3d11c0bf66ce9-7fd2_verapache">List
control user interaction</a>.</p>
<p>For information on creating
data tips (tool tips for individual list elements), see <a href="flx_dpcontrols_dpc.html#WS19f279b149e7481c32a1a3e512c12af2ad0-7fff_verapache">Displaying
DataTips</a>. For information on creating scroll tips (tool tips
that provide information while the user scrolls through a list), see <a href="flx_dpcontrols_dpc.html#WS19f279b149e7481c32a1a3e512c12af2ad0-7ffe_verapache">Displaying
ScrollTips</a>. </p>
</td>
</tr>
<tr>
<td class="cellrowborder" valign="top" width="NaN%" headers="d7028e1343 ">
<p>
<a href="https://flex.apache.org/asdoc/mx/controls/Menu.html" target="_blank">Menu</a> control</p>
</td>
<td class="cellrowborder" valign="top" width="NaN%" headers="d7028e1349 ">
<p>Screen reader navigation is the same as
for keyboard navigation.</p>
<p>For more information on keyboard
navigation, see <a href="flx_menucontrols_mc.html#WS2db454920e96a9e51e63e3d11c0bf69084-7dac_verapache">Menu
control user interaction</a>.</p>
</td>
</tr>
<tr>
<td class="cellrowborder" valign="top" width="NaN%" headers="d7028e1343 ">
<p>
<a href="https://flex.apache.org/asdoc/mx/controls/MenuBar.html" target="_blank">MenuBar</a> control</p>
</td>
<td class="cellrowborder" valign="top" width="NaN%" headers="d7028e1349 ">
<p>Screen reader navigation is the same as
for keyboard navigation.</p>
<p>For more information on keyboard
navigation, see <a href="flx_menucontrols_mc.html#WS2db454920e96a9e51e63e3d11c0bf69084-7dac_verapache">Menu
control user interaction</a>.</p>
</td>
</tr>
<tr>
<td class="cellrowborder" valign="top" width="NaN%" headers="d7028e1343 ">
<p>
<a href="https://flex.apache.org/asdoc/mx/containers/Panel.html" target="_blank">Panel</a> container</p>
</td>
<td class="cellrowborder" valign="top" width="NaN%" headers="d7028e1349 ">
<p>Screen reader announces the panel title
only when Forms mode is inactive. </p>
</td>
</tr>
<tr>
<td class="cellrowborder" valign="top" width="NaN%" headers="d7028e1343 ">
<p>
<a href="https://flex.apache.org/asdoc/mx/controls/RadioButton.html" target="_blank">RadioButton</a> control</p>
</td>
<td class="cellrowborder" valign="top" width="NaN%" headers="d7028e1349 ">
<p>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. </p>
<p>When
using a screen reader, select a radio button by using the Spacebar
key. </p>
<p>For more information on keyboard navigation, see <a href="flx_controls_ctr.html#WS2db454920e96a9e51e63e3d11c0bf69084-7daa_verapache">RadioButton
user interaction</a>.</p>
</td>
</tr>
<tr>
<td class="cellrowborder" valign="top" width="NaN%" headers="d7028e1343 ">
<p>
<a href="https://flex.apache.org/asdoc/mx/controls/RadioButtonGroup.html" target="_blank">RadioButtonGroup</a> control</p>
</td>
<td class="cellrowborder" valign="top" width="NaN%" headers="d7028e1349 ">
<p>Screen reader navigation is the same as
for the RadioButton control.</p>
</td>
</tr>
<tr>
<td class="cellrowborder" valign="top" width="NaN%" headers="d7028e1343 ">
<p>
<a href="https://flex.apache.org/asdoc/mx/controls/sliderClasses/Slider.html" target="_blank">Slider</a> control</p>
</td>
<td class="cellrowborder" valign="top" width="NaN%" headers="d7028e1349 ">
<p>In forms mode the control is announced along
with the orientation of the control (left-right or up-down) and
the current value.</p>
<p>The control uses the following keys for
a left-right slider:</p>
<div class="p">
<ul>
<li>
<p>Left Arrow / Right Arrow—move
slider to lower/higher value.</p>
</li>
<li>
<p>Page Up / Page Down—move slider to top/ bottom of range.</p>
</li>
<li>
<p>Down Arrow/Up Arrow—move slider to lower/higher value.</p>
</li>
<li>
<p>Home/End—move slider to top/ bottom of range.</p>
</li>
</ul>
</div>
<p>The
control uses the following keys for an up/down slider:</p>
<div class="p">
<ul>
<li>
<p>Down Arrow/Up Arrow—move slider to lower/higher value.</p>
</li>
<li>
<p>Home/End—move slider to top/ bottom of range.</p>
</li>
</ul>
</div>
</td>
</tr>
<tr>
<td class="cellrowborder" valign="top" width="NaN%" headers="d7028e1343 ">
<p>
<a href="https://flex.apache.org/asdoc/mx/containers/TabNavigator.html" target="_blank">TabNavigator</a> container</p>
</td>
<td class="cellrowborder" valign="top" width="NaN%" headers="d7028e1349 ">
<p>When a screen reader encounters a TabNavigator
container pane, it indicates each pane with the word <em>tab</em>.
It indicates the current pane with the word <em>active</em>. When
a pane is selected, the user moves to that panel by pressing the
Enter key. </p>
<p>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. </p>
<p>For more information on keyboard navigation,
see <a href="flx_navigators_na.html#WS2db454920e96a9e51e63e3d11c0bf69084-7da9_verapache">TabNavigator
container Keyboard navigation</a>.</p>
</td>
</tr>
<tr>
<td class="cellrowborder" valign="top" width="NaN%" headers="d7028e1343 ">
<p>
<a href="https://flex.apache.org/asdoc/mx/controls/Text.html" target="_blank">Text</a> control</p>
</td>
<td class="cellrowborder" valign="top" width="NaN%" headers="d7028e1349 ">
<p>A Text control is not focusable and is read
by screen readers only when Forms mode is inactive. </p>
</td>
</tr>
<tr>
<td class="cellrowborder" valign="top" width="NaN%" headers="d7028e1343 ">
<p>
<a href="https://flex.apache.org/asdoc/mx/controls/TextArea.html" target="_blank">TextArea</a> control</p>
</td>
<td class="cellrowborder" valign="top" width="NaN%" headers="d7028e1349 ">
<p>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. </p>
</td>
</tr>
<tr>
<td class="cellrowborder" valign="top" width="NaN%" headers="d7028e1343 ">
<p>
<a href="https://flex.apache.org/asdoc/mx/controls/TextInput.html" target="_blank">TextInput</a> control</p>
</td>
<td class="cellrowborder" valign="top" width="NaN%" headers="d7028e1349 ">
<p>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.</p>
</td>
</tr>
<tr>
<td class="cellrowborder" valign="top" width="NaN%" headers="d7028e1343 ">
<p>
<a href="https://flex.apache.org/asdoc/mx/containers/TitleWindow.html" target="_blank">TitleWindow</a> container</p>
</td>
<td class="cellrowborder" valign="top" width="NaN%" headers="d7028e1349 ">
<p>A screen reader announces the TitleWindow
control only when Forms mode is inactive. </p>
</td>
</tr>
<tr>
<td class="cellrowborder" valign="top" width="NaN%" headers="d7028e1343 ">
<p>
<a href="https://flex.apache.org/asdoc/mx/managers/ToolTipManager.html" target="_blank">ToolTipManager</a>
</p>
</td>
<td class="cellrowborder" valign="top" width="NaN%" headers="d7028e1349 ">
<p>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. </p>
</td>
</tr>
<tr>
<td class="cellrowborder" valign="top" width="NaN%" headers="d7028e1343 ">
<p>
<a href="https://flex.apache.org/asdoc/mx/controls/Tree.html" target="_blank">Tree</a> control</p>
</td>
<td class="cellrowborder" valign="top" width="NaN%" headers="d7028e1349 ">
<p>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 <a href="flx_dpcontrols_dpc.html#WS19f279b149e7481c-407eb5a312c12b6a7c8-8000_verapache">Editing
a node label at run time</a>and <a href="flx_dpcontrols_dpc.html#WS2db454920e96a9e51e63e3d11c0bf69084-7da7_verapache">Tree
user interaction</a>. </p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="nested2" id="WS2db454920e96a9e51e63e3d11c0bf69084-7db9_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf69084-7db9_verapache"><!-- --></a>
<h3 class="topictitle3">Accessibility for the AdvancedDataGrid
control</h3>
<div>
<p>The AdvancedDataGrid control supports the accessibility
features in the DataGrid and Tree controls and adds additional features
to support accessibility. </p>
<div class="section" id="WS2db454920e96a9e51e63e3d11c0bf69084-7db9_verapache__WS2db454920e96a9e51e63e3d11c0bf6399c-7ff5_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf69084-7db9_verapache__WS2db454920e96a9e51e63e3d11c0bf6399c-7ff5_verapache"><!-- --></a><h4 class="sectiontitle">Cell
and header navigation</h4>
<p>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.</p>
<p>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."</p>
<p>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."</p>
<div class="figborder">
<img src="images/ac_simpleColumnGroup.png"/>
</div>
<p>The
data reported for body cells depends on the setting of the <samp class="codeph">selectionMode</samp> property
of the AdvancedDataGrid control, as described in the following table:</p>
<div class="tablenoborder"><table cellpadding="4" cellspacing="0" summary="" frame="border" border="1" rules="all">
<thead align="left">
<tr>
<th class="cellrowborder" valign="top" width="NaN%" id="d7028e2168">
<p>Selection mode</p>
</th>
<th class="cellrowborder" valign="top" width="NaN%" id="d7028e2174">
<p>Screen reader output</p>
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="cellrowborder" valign="top" width="NaN%" headers="d7028e2168 ">
<div class="p">
<pre class="codeblock">singleRow</pre>
</div>
</td>
<td class="cellrowborder" valign="top" width="NaN%" headers="d7028e2174 ">
<p>Information corresponding to the entire
row.</p>
</td>
</tr>
<tr>
<td class="cellrowborder" valign="top" width="NaN%" headers="d7028e2168 ">
<div class="p">
<pre class="codeblock">singleCell</pre>
</div>
</td>
<td class="cellrowborder" valign="top" width="NaN%" headers="d7028e2174 ">
<p>Information corresponding to the selected
cell only. </p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="section" id="WS2db454920e96a9e51e63e3d11c0bf69084-7db9_verapache__WS2db454920e96a9e51e63e3d11c0bf6399c-7ff4_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf69084-7db9_verapache__WS2db454920e96a9e51e63e3d11c0bf6399c-7ff4_verapache"><!-- --></a><h4 class="sectiontitle">Example
navigation of flat data</h4>
<p>The following image shows an AdvancedDataGrid
control displaying flat data:</p>
<div class="figborder">
<img src="images/ac_multicolumn_sort.png"/>
</div>
<p>In
this example:</p>
<ul>
<li>
<p>When you press the Tab key to move focus
to the control, the screen reader reports: "ListBox."</p>
</li>
<li>
<p>Pressing the Down Arrow and Up Arrow keys navigates the rows
of the control.</p>
<ul>
<li>
<p>When the <samp class="codeph">selectionMode</samp> property
is set to <samp class="codeph">singleRow</samp>, the screen reader reports
all the data in the row, for example: "Artist: Grateful Dead, Album:
Shakedown Street, Price: 11.99."</p>
</li>
<li>
<p>When the <samp class="codeph">selectionMode</samp> property is set to <samp class="codeph">singleCell</samp>,
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."</p>
</li>
</ul>
</li>
<li>
<p>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."</p>
<ul>
<li>
<p>Pressing the Spacebar sorts the column.</p>
</li>
<li>
<p>Multicolumn sorting is supported. The sort order is reported
in case of multicolumn sorting. </p>
</li>
</ul>
<p>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."</p>
</li>
</ul>
</div>
<div class="section" id="WS2db454920e96a9e51e63e3d11c0bf69084-7db9_verapache__WS2db454920e96a9e51e63e3d11c0bf6399c-7ff3_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf69084-7db9_verapache__WS2db454920e96a9e51e63e3d11c0bf6399c-7ff3_verapache"><!-- --></a><h4 class="sectiontitle">Example
navigation of hierarchical data</h4>
<p>The following image shows
an AdvancedDataGrid control displaying hierarchical data:</p>
<div class="figborder">
<img src="images/ac_simpleGroup.png"/>
</div>
<p>In
this example:</p>
<ul>
<li>
<p>When you press the Tab key to move focus
to the control, the screen reader reports: "Treeview."</p>
</li>
<li>
<p>Pressing the Shift+Control+Right Arrow keys opens a node. </p>
</li>
<li>
<p>Pressing the Down Arrow key moves the focus to the next row. </p>
<p>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."</p>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="nested1" id="WS2db454920e96a9e51e63e3d11c0bf6399c-7ff2_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf6399c-7ff2_verapache"><!-- --></a>
<h2 class="topictitle2">Creating tab order and reading
order</h2>
<div>
<p>There
are two aspects of tab indexing order—the <em>tab order</em> in which
a user navigates through the web content, and the <em>reading order</em> in
which things are read by the screen reader.</p>
<p>Flash
Player uses a tab index order from left to right and top to bottom.
However, if this is not the order you want to use, you can customize
both the tab order and the reading order by using the <a href="https://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/display/InteractiveObject.html#tabIndex" target="_blank">InteractiveObject.tabIndex</a> property.
(In ActionScript, the <samp class="codeph">tabIndex</samp> property is synonymous
with the reading order.) </p>
<dl>
<dt class="dlterm">Tab order</dt>
<dd>
<p>You can use the <samp class="codeph">tabIndex</samp> property of every
component to create a tab order that determines the order in which
objects receive input focus when a user presses the Tab key. </p>
</dd>
<dt class="dlterm">Reading order</dt>
<dd>
<p>You can use the <samp class="codeph">tabIndex</samp> property to control
the order in which the screen reader reads information about the
object. To create a reading order, you assign a value to the <samp class="codeph">tabIndex</samp> property
for every component in your application. You should set the <samp class="codeph">tabIndex</samp> property
for every accessible object, not just the focusable objects. For
example, you must set the <samp class="codeph">tabIndex</samp> property for
a Text control even though a user cannot tab to it. If you do not
set the <samp class="codeph">tabIndex</samp> property for every accessible
object, Flash Player puts that object at the end of the tab order,
rather than in its appropriate tab order location.</p>
</dd>
</dl>
</div>
<div class="nested2" id="WS2db454920e96a9e51e63e3d11c0bf6399c-7ff1_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf6399c-7ff1_verapache"><!-- --></a>
<h3 class="topictitle3">Scrolling to a component when tabbing</h3>
<div>
<p>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. </p>
<p>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:</p>
<pre class="codeblock">&lt;?xml version="1.0"?&gt;
&lt;!-- accessibility\ScrollComp.mxml --&gt;
&lt;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();"&gt;
&lt;fx:Script&gt;
&lt;![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 &gt; viewport.right) {
delta = bottomRight.x - viewport.right;
c.horizontalScrollPosition += delta;
topLeft.x -= delta;
viewportChanged = true;
}
if (topLeft.x &lt; viewport.left) {
// leave it a few pixels in from the left
c.horizontalScrollPosition -=
viewport.left - topLeft.x + 2;
viewportChanged = true;
}
if (bottomRight.y &gt; viewport.bottom) {
delta = bottomRight.y - viewport.bottom;
c.verticalScrollPosition += delta;
topLeft.y -= delta;
viewportChanged = true;
}
if (topLeft.y &lt; 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);
}
]]&gt;
&lt;/fx:Script&gt;
&lt;fx:Declarations&gt;
&lt;fx:Model id="statesModel" source="assets/states.xml"/&gt;
&lt;/fx:Declarations&gt;
&lt;mx:Panel
x="58" y="48"
width="442" height="201"
layout="absolute"
title="Tab through controls to see if focus stays in view"&gt;
&lt;mx:VBox x="10" y="10" verticalScrollPolicy="off"&gt;
&lt;mx:TextInput/&gt;
&lt;mx:TextInput/&gt;
&lt;mx:TextArea width="328" height="64"/&gt;
&lt;mx:ComboBox dataProvider="{cards}" width="150"/&gt;
&lt;mx:DataGrid dataProvider="{forListDP}" /&gt;
&lt;mx:DateChooser yearNavigationEnabled="true"/&gt;
&lt;mx:List id="source"
width="75"
dataProvider="{statesModel.state}"/&gt;
&lt;/mx:VBox&gt;
&lt;/mx:Panel&gt;
&lt;/s:Application&gt;</pre>
</div>
</div>
</div>
<div class="nested1" id="WS2db454920e96a9e51e63e3d11c0bf6399c-7ff0_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf6399c-7ff0_verapache"><!-- --></a>
<h2 class="topictitle2">Creating accessibility with ActionScript</h2>
<div>
<p>For
accessibility properties that apply to the entire document, use
the flash.accessibility.AccessibilityProperties class. For more
information on this class, see the <em>
<a href="https://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/" target="_blank">ActionScript 3.0 Reference for the Adobe
Flash Platform</a>
</em>.</p>
<p>The following table lists some of the relevant properties of
the <a href="https://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/accessibility/AccessibilityProperties.html" target="_blank">AccessibilityProperties</a> class.</p>
<div class="tablenoborder"><table cellpadding="4" cellspacing="0" summary="" frame="border" border="1" rules="all">
<thead align="left">
<tr>
<th class="cellrowborder" valign="top" width="NaN%" id="d7028e2513">
<p>Property</p>
</th>
<th class="cellrowborder" valign="top" width="NaN%" id="d7028e2519">
<p>Type</p>
</th>
<th class="cellrowborder" valign="top" width="NaN%" id="d7028e2525">
<p>Description</p>
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="cellrowborder" valign="top" width="NaN%" headers="d7028e2513 ">
<p>
<samp class="codeph">description</samp>
</p>
</td>
<td class="cellrowborder" valign="top" width="NaN%" headers="d7028e2519 ">
<p>String</p>
</td>
<td class="cellrowborder" valign="top" width="NaN%" headers="d7028e2525 ">
<p>Specifies a description for the component
that is read by the screen reader.</p>
</td>
</tr>
<tr>
<td class="cellrowborder" valign="top" width="NaN%" headers="d7028e2513 ">
<p>
<samp class="codeph">forceSimple</samp>
</p>
</td>
<td class="cellrowborder" valign="top" width="NaN%" headers="d7028e2519 ">
<p>Boolean</p>
</td>
<td class="cellrowborder" valign="top" width="NaN%" headers="d7028e2525 ">
<p>Hides the children of a component from a
screen reader when set to <samp class="codeph">true</samp>. The default value is <samp class="codeph">false</samp>. </p>
</td>
</tr>
<tr>
<td class="cellrowborder" valign="top" width="NaN%" headers="d7028e2513 ">
<p>
<samp class="codeph">name</samp>
</p>
</td>
<td class="cellrowborder" valign="top" width="NaN%" headers="d7028e2519 ">
<p>String</p>
</td>
<td class="cellrowborder" valign="top" width="NaN%" headers="d7028e2525 ">
<p>Specifies a description of the component
that is read by the screen reader. When accessible objects do not
have a specified name, a screen reader uses a generic word, such
as <em>Button</em>.</p>
</td>
</tr>
<tr>
<td class="cellrowborder" valign="top" width="NaN%" headers="d7028e2513 ">
<p>
<samp class="codeph">shortcut</samp>
</p>
</td>
<td class="cellrowborder" valign="top" width="NaN%" headers="d7028e2519 ">
<p>String</p>
</td>
<td class="cellrowborder" valign="top" width="NaN%" headers="d7028e2525 ">
<p>Indicates a keyboard shortcut associated
with this display object.</p>
</td>
</tr>
<tr>
<td class="cellrowborder" valign="top" width="NaN%" headers="d7028e2513 ">
<p>
<samp class="codeph">silent</samp>
</p>
</td>
<td class="cellrowborder" valign="top" width="NaN%" headers="d7028e2519 ">
<p>Boolean</p>
</td>
<td class="cellrowborder" valign="top" width="NaN%" headers="d7028e2525 ">
<p>Hides a component from a screen reader when
set to <samp class="codeph">true</samp>. The default value is <samp class="codeph">false</samp>. </p>
</td>
</tr>
</tbody>
</table>
</div>
<p>Modifying these properties has no effect by itself. You must
also use the <samp class="codeph">Accessibility.updateProperties()</samp> method
to inform screen reader users of Flash Player content changes. Calling
this method causes Flash Player to reexamine all accessibility properties,
update property descriptions for the screen reader, and, if necessary,
send events to the screen reader that indicate changes occurred.</p>
<p>When updating the accessibility properties of multiple objects
at once, you must include only a single call to the <samp class="codeph">Accessiblity.updateProperties()</samp> method.
(Excessive updates to the screen reader can cause some screen readers to
become too verbose and can impact your application's performance.)</p>
</div>
<div class="nested2" id="WS2db454920e96a9e51e63e3d11c0bf6399c-7fef_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf6399c-7fef_verapache"><!-- --></a>
<h3 class="topictitle3">Implementing screen reader detection
with the Accessibility.isActive() method</h3>
<div>
<p>To
create content that behaves in a specific way if a screen reader
is active, you can use the ActionScript <a href="https://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/accessibility/Accessibility.html#active" target="_blank">Accessibility.active</a> property,
which is set to a value of <samp class="codeph">true</samp> if a screen reader
is present, and <samp class="codeph">false</samp> 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.</p>
<p>For example, you could use the <samp class="codeph">Accessibility.active</samp> property
to decide whether to include unsolicited animation. <em>Unsolicited animation</em> means animation
that happens without the screen reader doing anything. This can
be very confusing for screen readers.</p>
<p>For more information on the <a href="https://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/accessibility/Accessibility.html" target="_blank">Accessibility</a> class,
see the <em>
<a href="https://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/" target="_blank">ActionScript 3.0 Reference for the Adobe
Flash Platform</a>
</em>. </p>
</div>
</div>
</div>
<div class="nested1" id="WSaa0aa854ca84f61622f85eff1221e9fba3a-8000_verapache"><a name="WSaa0aa854ca84f61622f85eff1221e9fba3a-8000_verapache"><!-- --></a>
<h2 class="topictitle2">Creating a custom accessibility implementation</h2>
<div>
<p>Flex component developers need to be able to provide their
own accessibility implementations for custom components. Flash Player
provides the flash.accessibility.AccessibilityImplementation class
as a base class for creating custom accessibility implementations
for Flex and Flash UI components in ActionScript 3. In Flex, this
class is extended by mx.accessibility.AccImpl which serves as the base
class for accessibility implementations in Flex components. </p>
<p>You create a new accessibility implementation by extending mx.accessibility.AccImpl
for each new component. The methods of the flash.accessibility.AccessibilityImplementation
class are a subset of the IAccessible interface, adapted slightly
to make life easier. The Flash Player's IAccessible interface for
a scripted movie clip passes most calls from MSAA through to the
flash.accessibility.AccessibilityImplementation subclass instance
for that component. Accessibility implementations must also send
event notifications to MSAA in a variety of situations. Event notifications
are sent by using the <samp class="codeph">flash.accessibility.Accessibility.sendEvent()</samp> method.</p>
<p>The way in which an accessibility implementation implements the
IAccessible interface and the events that it sends depend on the
kind of component being implemented. Consider two primary forms
of guidance: First, the MSAA documentation has a list of guidelines
for accessible object implementations according to component type.
Second, an accessibility implementations's behavior should match
as closely as possible the behavior exhibited by the equivalent
form element (if any such element exists) in an HTML page inside Internet
Explorer or Firefox or in the Windows operating system. This behavior can
be examined using the AccExplorer, Inspect32, and AccEvent tools,
available in the Microsoft Active Accessibility 2.0 SDK. </p>
<p>Collectively, these two forms of guidance constitute an MSAA
model for IAccessible implementations. This model is loosely specified.
The only definitive test of an IAccessible implementation is to
test it with the latest versions of screen readers.</p>
<p>This article explains how to define a custom accessibility implementation
for a component. For this example, we'll add an accessibility implementation
to the mx.controls.PopUpButton and, by extension, the mx.controls.PopUpMenuButton
class. First, create a new Flex project named "PopUpMenuButton."
Be sure to enable accessibility in the project using one of the
methods explained in <a href="flx_accessible_ac.html#WS2db454920e96a9e51e63e3d11c0bf69084-7da1_verapache">Configuring
Flex applications for accessibility</a>. Follow along with the
article to create a new implementation.</p>
<p>For an overview of the PopUpButton and PopUpMenuButton controls,
see <a href="flx_controls_ctr.html#WS2db454920e96a9e51e63e3d11c0bf69084-7b18_verapache">PopUpButton
control</a> and <a href="flx_menucontrols_mc.html#WS2db454920e96a9e51e63e3d11c0bf69084-7b20_verapache">PopUpMenuButton
control</a>. See also mx.controls.PopUpButton and mx.controls.PopUpMenuButton
in the <em>
<a href="https://flex.apache.org/asdoc/" target="_blank">ActionScript 3.0 Reference for Apache Flex</a></em>.</p>
</div>
<div class="nested2" id="WSaa0aa854ca84f616-780093ac1221ea64754-7fff_verapache"><a name="WSaa0aa854ca84f616-780093ac1221ea64754-7fff_verapache"><!-- --></a>
<h3 class="topictitle3">Add accessibility mix-ins to component
class definition</h3>
<div>
<p>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.</p>
<p>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:</p>
<div class="p">
<pre class="codeblock">[AccessibilityClass(implementation="mx.accessibility.PopUpButtonAccImpl")]</pre>
</div>
<p>The<samp class="codeph"> [AccessibilityClass]</samp> 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 <samp class="codeph">createAccessibilityImplementation()</samp> method
at line 244, just before the PopUpButton constructor:</p>
<div class="p">
<pre class="codeblock">…
//---------------------------------------------------------------------- ----
//
// Class mixins
//
//---------------------------------------------------------------------- ----
/**
* Placeholder for mixin by PopUpButtonAccImpl.
*/
mx_internal static var createAccessibilityImplementation:Function;
…</pre>
</div>
<p>This <samp class="codeph">createAccessibilityImplementation()</samp> 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 <samp class="codeph">initializeAccessibility()</samp> method: </p>
<div class="p">
<pre class="codeblock">/**
* @inheritDoc
*/
override protected function initializeAccessibility():void
{
if (PopUpButton.createAccessibilityImplementation != null)
PopUpButton.createAccessibilityImplementation(this);
}</pre>
</div>
<p>The <samp class="codeph">initializeAccessibility()</samp> method is invoked
by the <samp class="codeph">UIComponent.initialize()</samp> method to initialize
accessibility for a component instance at runtime.</p>
</div>
</div>
<div class="nested2" id="WSaa0aa854ca84f616-6dccd11f1221eb61a30-8000_verapache"><a name="WSaa0aa854ca84f616-6dccd11f1221eb61a30-8000_verapache"><!-- --></a>
<h3 class="topictitle3">Create the accessibility implementation
class definition</h3>
<div>
<p>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 <samp class="codeph">import</samp> statement
block to import the PopUpButton, Menu, AccessibilityProperties and Rectangle
classes:</p>
<div class="p">
<pre class="codeblock">...
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;
...</pre>
</div>
<p>At line 61 in the code, update the class definition to read: </p>
<div class="p">
<pre class="codeblock">...
public class PopUpButtonAccImpl extends AccImpl
...</pre>
</div>
<p>At line 93 in the code update the <samp class="codeph">hookAccessibility</samp> method
to read: </p>
<div class="p">
<pre class="codeblock">...
private static function hookAccessibility():Boolean
{
PopUpButton.createAccessibilityImplementation =
createAccessibilityImplementation;
return true;
}
...</pre>
</div>
<p>The <samp class="codeph">hookAccessibility()</samp> method defines the PopUpButton
class's static <samp class="codeph">createAccessibilityImplementation()</samp> 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 <samp class="codeph">accessibilityHooked</samp> property.Replace
the <samp class="codeph">createAccessibilityImplementation()</samp> method
at line 149 with the following: </p>
<div class="p">
<pre class="codeblock">...
mx_internal static function createAccessibilityImplementation(
component:UIComponent):void
{
component.accessibilityImplementation = new PopUpButtonAccImpl(component);
}
...</pre>
</div>
<p>The <samp class="codeph">createAccessibilityImplementation()</samp> method
assigns a new PopUpButtonAccImpl instance to the <samp class="codeph">accessibilityImplementation</samp> property
of a given component instance.Add the following four static state
and role constants at line 122: </p>
<div class="p">
<pre class="codeblock">...
/**
* 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;
...</pre>
</div>
<p>System roles and states are predefined for all components in
MSAA. The hexidecimal values for the constants can be found in the <em>
<a href="https://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/" target="_blank">ActionScript 3.0 Reference for the Adobe
Flash Platform</a>
</em> 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. </p>
<pre class="codeblock">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.<em>nnnnnn</em>/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.<em>nnnnnn</em>/welcome/welcome.html - Adobe Flash Builder" : window : sizeable,moveable,focusable "Desktop" : client : normal "Desktop" : window : normal
[ No Parent ]</pre>
<p>The Inspect32 tool reveals that the pop‑up button should have
the role <samp class="codeph">split button</samp> and one child named <samp class="codeph">Open</samp> with
the role <samp class="codeph">drop down button</samp>. When you mouse over
the control or give it keyboard focus, the control's state is <samp class="codeph">hot tracked</samp>.
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 <samp class="codeph">has popup</samp>.</p>
<p>Update the PopUpButtonAccImpl constructor function at line 199
to read:</p>
<div class="p">
<pre class="codeblock">...
//---------------------------------------------------------------------- --- -
//
// Constructor
//
//--------------------------------------------------------------------- - ----
/**
* Creates a new PopUpButtonAccImpl instance for the specified PopUpButton component .
*
* &lt;p&gt;Direct calls to the AccImpl subclass constructors are unneccessary.
* When a Flex project is compiled with Generate accessible SWF file set to
* &lt;code&gt;true&lt;/code&gt;,
* the compiler instantiates the accessibility implementations for the components
* used in the project that have them by calling the static
* &lt;code&gt;enableAccessibility()&lt;/code&gt; method. &lt;/p &gt;
*
* @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;
}
...</pre>
</div>
<p>The constructor function defines the <samp class="codeph">role</samp> property
for the PopUpButtonAccImpl as <samp class="codeph">ROLE_SYSTEM_SPLITBUTTON</samp> (0x3e).
Update the <samp class="codeph">eventsToHandle()</samp> 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, <samp class="codeph">"click"</samp> and <samp class="codeph">"labelChanged"</samp>.</p>
<div class="p">
<pre class="codeblock">...
//----------------------------------
// eventsToHandle
//----------------------------------
/**
* @inheritDoc
*/
override protected function get eventsToHandle():Array
{
return super.eventsToHandle.concat([ "click", "labelChanged" ]);
}
...</pre>
</div>
<p>Update the <samp class="codeph">get_accRole()</samp> method at line 247
to read as follows:</p>
<div class="p">
<pre class="codeblock">...
/**
* IAccessible method for returning system role for the component.
* System roles are predefined for all the components in MSAA.
* &lt;p&gt;A PopUpButton component, ( &lt;code&gt;childID == 0&lt;/code&gt; ), reports
* the role &lt;code&gt;ROLE_SYSTEM_SPLITBUTTON&lt;/code&gt; (0x3E).
* The PopUpButton's drop down arrow ( &lt;code&gt;childID == 1&lt;/code&gt; )
* reports the role &lt;code&gt;ROLE_SYSTEM_BUTTONDROPDOWN&lt;/code&gt; (0x3B).&lt;/p&gt;
*
* @param childID An unsigned integer corresponding to one of the component's child
* elements as defined by
* &lt;code&gt;&lt;a href="#getChildIDArray()"&gt;getChildIDArray()&lt;/a&gt;&lt;/code&gt;.
*
* @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;
}
...</pre>
</div>
<p>The <samp class="codeph">get_accRole()</samp> method should return the appropriate
role constant for the master component or for one of its children.
The PopUpButtonAccImpl returns <samp class="codeph">ROLE_SYSTEM_SPLITBUTTON</samp> (0x3e),
while its child drop-down button returns <samp class="codeph">ROLE_SYSTEM_BUTTONDROPDOWN</samp> (0x38).Add
the following <samp class="codeph">get_accValue()</samp> method override at
line 272:</p>
<div class="p">
<pre class="codeblock">...
/**
* 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
* &lt;code&gt;&lt;a href="#getChildIDArray()"&gt;getChildIDArray()&lt;/a&gt;&lt;/code&gt;.
*
* @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
&amp;&amp; popUpButton.popUp is Menu
&amp;&amp; label != null
&amp;&amp; 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 &amp;&amp; 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;
}
...</pre>
</div>
<p>The <samp class="codeph">get_accValue()</samp> method returns the appropriate
value for the component or for one of its child elements. If the
PopUpButton component's <samp class="codeph">label</samp> property is equal
to the label of the <samp class="codeph">selectedItem</samp> in its popUp menu, the <samp class="codeph">get_accValue()</samp> method
should return the value of the <samp class="codeph">label</samp> property. Update
the <samp class="codeph">get_accState()</samp> method at line 321 to read: </p>
<div class="p">
<pre class="codeblock">...
/**
* 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
* &lt;code&gt;&lt;a href="#getChildIDArray()"&gt;getChildIDArray()&lt;/a&gt;&lt;/code&gt;.
*
* @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 &gt;= bounds.x
&amp;&amp; mouseX &lt;= (bounds.x + bounds.width)
&amp;&amp; mouseY &gt;= bounds.y
&amp;&amp; mouseY &lt;= (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;
}
...</pre>
</div>
<p>The <samp class="codeph">get_accState() method</samp> should return the
appropriate state constant or state constants for the master component
or for one of its children. If the PopUpButton has a <samp class="codeph">popUp</samp> property,
its child drop‑down button should have the state <samp class="codeph">STATE_SYSTEM_HASPOPUP</samp> (0x40000000).
If the popUp is showing, the drop‑down button should also have the
state <samp class="codeph">STATE_SYSTEM_PRESSED</samp> (0x00000008). If the
PopUpButton itself is selected, it should have the state <samp class="codeph">STATE_SYSTEM_PRESSED</samp> (0x00000008).
Both the PopUpButton and its child drop‑down button should have
the state <samp class="codeph">STATE_SYSTEM_HOTTRACKED</samp> (0x00000080)
when a user mouses over the PopUpButton or when it has keyboard
focus.Add the following <samp class="codeph">getChildIDArray()</samp> method
override at line 398: </p>
<div class="p">
<pre class="codeblock">...
/**
* 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;
}
...</pre>
</div>
<p>The <samp class="codeph">getChildIDArray</samp>() 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 <samp class="codeph">getChildIDArray()</samp> 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 <samp class="codeph">get_accDefaultAction()</samp> 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."</p>
<div class="p">
<pre class="codeblock">...
/**
* 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
* &lt;code&gt;&lt;a href="#getChildIDArray()"&gt;getChildIDArray()&lt;/a&gt;&lt;/code&gt;.
*
* @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";
}
...</pre>
</div>
<p>Update the <samp class="codeph">addDoDefaultAction()</samp> method at line
439 to read as follows:</p>
<div class="p">
<pre class="codeblock">...
/**
* 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
* &lt;code&gt;&lt;a href="#getChildIDArray()"&gt;getChildIDArray()&lt;/a&gt;&lt;/code&gt;.
*
* @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();
}
}
}
...</pre>
</div>
<p>The <samp class="codeph">accDoDefaultAction()</samp> 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:</p>
<div class="p">
<pre class="codeblock">...
/**
* 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
* &lt;code&gt;&lt;a href="#getChildIDArray()"&gt;getChildIDArray()&lt;/a&gt;&lt;/code&gt;.
*
* @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 &amp;&amp; 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 &amp;&amp; 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 &amp;&amp; label != "" ? label : "";
}
...</pre>
</div>
<p>The <samp class="codeph">getName()</samp> 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 <samp class="codeph">accLocation()</samp> method at line 498: </p>
<div class="p">
<pre class="codeblock">...
/**
* 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
* &lt;code&gt;&lt;a href="#getChildIDArray()"&gt;getChildIDArray()&lt;/a&gt;&lt;/code&gt;.
*
* @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;
}
...</pre>
</div>
<p>The <samp class="codeph">accLocation()</samp> 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 <samp class="codeph">eventHandler()</samp> 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, <samp class="codeph">"click"</samp> and <samp class="codeph">"labelChanged"</samp>.</p>
<div class="p">
<pre class="codeblock">...
/**
* 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;
}
}
}
...</pre>
</div>
<p>The <samp class="codeph">eventHandler()</samp> method handles events from
the master component and sends the appropriate object or system
event to MSAA using the <samp class="codeph">flash.accessibility.Accessibility.sendEvent()</samp> 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.</p>
</div>
</div>
<div class="nested2" id="WSaa0aa854ca84f616-6dccd11f1221eb61a30-7fff_verapache"><a name="WSaa0aa854ca84f616-6dccd11f1221eb61a30-7fff_verapache"><!-- --></a>
<h3 class="topictitle3">Testing the accessibility implementation</h3>
<div>
<p>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 <samp class="codeph">selectedItem</samp> in
the popUp menu when the menu is opened and closed, which allows
you to test the <samp class="codeph">PopUpButtonAccImpl.get_accValue()</samp> method.</p>
<div class="p">
<pre class="codeblock">&lt;?xml version="1.0"?&gt;
&lt;!-- m enus/Pop U pMenuButton Control.mxml - - &gt;
&lt;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"&gt;
&lt;fx:Script&gt;
&lt;![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;
}
]]&gt;
&lt;/fx:Script&gt;
&lt;fx:XML format="e4x" id="dp2"&gt;
&lt;root&gt;
&lt;editItem label="Cut"/&gt;
&lt;editItem label="Copy"/&gt;
&lt;editItem label="Paste"/&gt;
&lt;separator type="separator"/&gt;
&lt;editItem label="Delete"/&gt;
&lt;/root&gt;
&lt;/fx:XML&gt;
&lt;mx:PopUpMenuButton id="pb2"
dataProvider="{dp2}"
labelField="@label"
showRoot="false"
creationComplete="initData();" /&gt;
&lt;/s:Application&gt;</pre>
</div>
<p>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:</p>
<div class="p">
<pre class="codeblock">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 ]</pre>
</div>
<p>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."</p>
<p>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.</p>
<p>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. </p>
<p>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.</p>
<p>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. </p>
<p>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 <samp class="codeph">PopUpButton.keyDownHandler()</samp> method
at line 907 in the PopUpButton class file for the PopUpMenuButton
Flex project to read:</p>
<div class="p">
<pre class="codeblock">...
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 &amp;&amp; event.keyCode == Keyboard.DOWN)
|| (event.keyCode == Keyboard.DOWN &amp;&amp;!showingPopUp))
{
openWithEvent(event);
event.stopPropagation();
}
else if ((event.ctrlKey &amp;&amp; event.keyCode == Keyboard.UP) ||
(event.keyCode == Keyboard.ESCAPE))
{
closeWithEvent(event);
event.stopPropagation();
}
else if (event.keyCode == Keyboard.ENTER &amp;&amp;mp; showingPopUp)
{
// Redispatch the event to the popup
// and let its keyDownHandler() handle it.
_popUp.dispatchEvent(event);
closeWithEvent(event);
event.stopPropagation();
}
else if (showingPopUp &amp;&amp;
(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();
}
}
...</pre>
</div>
<p>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 <samp class="codeph">PopUpButtonAccImpl.getName()</samp> method.</p>
<p>Update the <samp class="codeph">getName()</samp> method at line 463 in the
PopUpButtonAccImpl class definition to read: </p>
<div class="p">
<pre class="codeblock">...
/**
* 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
* &lt;code&gt;&lt;a href="#getChildIDArray()"&gt;getChildIDArray()&lt;/a&gt;&lt;/code&gt;.
*
* @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 &amp;&amp; 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 &amp;&amp; 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 &amp;&amp; label != "" ? label + " Split Button" : "Split Button";
}
...</pre>
</div>
</div>
</div>
</div>
<div class="nested1" id="WS2db454920e96a9e51e63e3d11c0bf6399c-7fee_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf6399c-7fee_verapache"><!-- --></a>
<h2 class="topictitle2">Accessibility for hearing-impaired
users</h2>
<div>
<p>To provide accessibility for hearing-impaired
users, you can include captions for audio content that is integral
to the comprehension of the material presented. A video of a speech,
for example, would probably require captions for accessibility, but
a quick sound associated with a button probably would not require
a caption.</p>
</div>
</div>
<div class="nested1" id="WS2db454920e96a9e51e63e3d11c0bf6399c-7fed_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf6399c-7fed_verapache"><!-- --></a>
<h2 class="topictitle2">Testing accessible content</h2>
<div>
<p>When
you test your accessible applications, follow these recommendations:</p>
<ul>
<li>
<p>Ensure that you have enabled accessibility. For more
information, see <a href="flx_accessible_ac.html#WS2db454920e96a9e51e63e3d11c0bf69084-7da1_verapache">Configuring
Flex applications for accessibility</a>.</p>
</li>
<li>
<p>Test and verify that users can navigate your interactive
content effectively by using only the keyboard. This can be an especially
challenging requirement, because different screen readers work in
different ways when processing input from the keyboard, which means
that your content might not receive keystrokes as you intended.
Ensure that you test all keyboard shortcuts.</p>
</li>
<li>
<p>Ensure
that graphic content has alternative representation by checking
for tool tips on every image.</p>
</li>
<li>
<p>Ensure that your content is resizable or sized to work with
screen magnifiers. It should clearly present all material at smaller
sizes.</p>
</li>
<li>
<p>Ensure that any substantive audio is captioned. To test for
content loss, try using your application with your sound muted or
wearing headphones that pipe in unrelated music.</p>
</li>
<li>
<p>Ensure that you use a clean and simple interface to help
screen readers and users with cognitive impairments navigate through
your application. Give your application to people who have never
seen it before and watch while they try to perform key tasks without
any assistance or documentation. If they fail, consider modifying
your interface.</p>
</li>
<li>
<p>Test your application with a screen reader, or have it tested
by users of screen readers.</p>
</li>
</ul>
</div>
<div>
<p><strong>Navigation</strong></p>
<p><a href="index.html">Using Flex</a> &raquo; <a href="flx_p6_enhancing_usability.html">Enhancing usability</a></p>
</div>
<p>Adobe, Adobe Flash, Adobe Flash Builder, Adobe Flash Platform and Adobe Flash Player are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries and are used by permission from Adobe. No other license to the Adobe trademarks are granted.</p>
</div>
</body>
</html>