• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1
2page.title=Developing Accessible Applications
3parent.title=Implementing Accessibility
4parent.link=index.html
5
6trainingnavtop=true
7next.title=Developing an Accessibility Service
8next.link=service.html
9
10@jd:body
11
12
13
14
15<div id="tb-wrapper">
16<div id="tb">
17
18<h2>This lesson teaches you to</h2>
19<ol>
20  <li><a href="#contentdesc">Add Content Descriptions</a></li>
21  <li><a href="#focus">Design for Focus Navigation</a></li>
22  <li><a href="#events">Fire Accessibility Events</a></li>
23  <li><a href="#testing">Test Your Application</a></li>
24</ol>
25
26<!-- other docs (NOT javadocs) -->
27<h2>You should also read</h2>
28<ul>
29  <li><a href="{@docRoot}guide/topics/ui/accessibility/apps.html">Making
30    Applications Accessible</a></li>
31</ul>
32
33
34</div>
35</div>
36
37<p>Android has several accessibility-focused features baked into the platform,
38which make it easy to optimize your application for those with visual or
39physical disabilities.  However, it's not always obvious what the correct
40optimizations are, or the easiest way to leverage the framework toward this
41purpose.  This lesson shows you how to implement the strategies and platform
42features that make for a great accessibility-enabled Android application.</p>
43
44<h2 id="contentdesc">Add Content Descriptions</h2>
45<p>A well-designed user interface (UI) often has elements that don't require an explicit
46label to indicate their purpose to the user.  A checkbox next to an item in a
47task list application has a fairly obvious purpose, as does a trash can in a file
48manager application.  However, to your users with vision impairment, other UI
49cues are needed.</p>
50
51<p>Fortunately, it's easy to add labels to UI elements in your application that
52can be read out loud to your user by a speech-based accessibility service like <a
53href="https://play.google.com/store/apps/details?id=com.google.android.marvin.talkback">TalkBack</a>
54.
55If you have a label that's likely not to change during the lifecycle of the
56application (such as "Pause" or "Purchase"), you can add it via the XML layout,
57by setting a UI element's <a
58
59href="{@docRoot}reference/android/view/View.html#attr_android:contentDescription"
60>{@code android:contentDescription}</a> attribute, like in this
61example:</p>
62<pre>
63&lt;Button
64    android:id=”@+id/pause_button65    android:src=”@drawable/pause66    android:contentDescription=”@string/pause”/&gt;
67</pre>
68
69<p>However, there are plenty of situations where it's desirable to base the content
70description on some context, such as the state of a toggle button, or a piece
71selectable data like a list item.  To edit the content description at runtime,
72use the {@link android.view.View#setContentDescription(CharSequence)
73setContentDescription()} method, like this:</p>
74
75<pre>
76String contentDescription = "Select " + strValues[position];
77label.setContentDescription(contentDescription);
78</pre>
79
80<p>This addition to your code is the simplest accessibility improvement you can make to your
81application, but one of the most useful.  Try to add content descriptions
82wherever there's useful information, but avoid the web-developer pitfall of
83labelling <em>everything</em> with useless information.  For instance, don't set
84an application icon's content description to "app icon".  That just increases
85the noise a user needs to navigate in order to pull useful information from your
86interface.</p>
87
88<p>Try it out!  Download <a
89href="https://play.google.com/store/apps/details?id=com.google.android.marvin.talkback">TalkBack</a>
90(an accessibility service published by Google) and enable it in <strong>Settings
91  &gt; Accessibility &gt; TalkBack</strong>.  Then navigate around your own
92application and listen for the audible cues provided by TalkBack.</p>
93
94<h2 id="focus">Design for Focus Navigation</h2>
95<p>Your application should support more methods of navigation than the
96touch screen alone.  Many Android devices come with navigation hardware other
97than the touchscreen, like a D-Pad, arrow keys, or a trackball.  In addition,
98later Android releases also support connecting external devices like keyboards
99via USB or bluetooth.</p>
100
101<p>In order to enable this form of navigation, all navigational elements that
102the user should be able to navigate to need to be set as focusable.  This
103modification can be
104done at runtime using the
105{@link android.view.View#setFocusable View.setFocusable()} method on that UI
106control, or by setting the <a
107  href="{@docRoot}reference/android/view/View.html#attr_android:focusable">{@code
108  android:focusable}</a>
109attrubute in your XML layout files.</p>
110
111<p>Also, each UI control has 4 attributes,
112<a href="{@docRoot}reference/android/view/View.html#attr_android:nextFocusUp">{@code
113  android:nextFocusUp}</a>,
114<a
115  href="{@docRoot}reference/android/view/View.html#attr_android:nextFocusDown">{@code
116  android:nextFocusDown}</a>,
117<a
118  href="{@docRoot}reference/android/view/View.html#attr_android:nextFocusLeft">{@code
119  android:nextFocusLeft}</a>,
120and <a
121  href="{@docRoot}reference/android/view/View.html#attr_android:nextFocusRight">{@code
122  android:nextFocusRight}</a>,
123which you can use to designate
124the next view to receive focus when the user navigates in that direction.  While
125the platform determines navigation sequences automatically based on layout
126proximity, you can use these attributes to override that sequence if it isn't
127appropriate in your application. </p>
128
129<p>For instance, here's how you represent a button and label, both
130focusable, such that pressing down takes you from the button to the text view, and
131pressing up would take you back to the button.</p>
132
133
134<pre>
135&lt;Button android:id="@+id/doSomething"
136    android:focusable="true"
137    android:nextFocusDown=”@id/label138    ... /&gt;
139&lt;TextView android:id="@+id/label"
140    android:focusable=”true”
141    android:text="@string/labelText"
142    android:nextFocusUp=”@id/doSomething143    ... /&gt;
144</pre>
145
146<p>Verify that your application works intuitively in these situations.  The
147easiest way is to simply run your application in the Android emulator, and
148navigate around the UI with the emulator's arrow keys, using the OK button as a
149replacement for touch to select UI controls.</p>
150
151<h2 id="events">Fire Accessibility Events</h2>
152<p>If you're using the view components in the Android framework, an
153{@link android.view.accessibility.AccessibilityEvent} is created whenever you
154select an item or change focus in your UI.  These events are examined by the
155accessibility service, enabling it to provide features like text-to-speech to
156the user.</p>
157
158<p>If you write a custom view, make sure it fires events at the appropriate
159times. Generate events by calling {@link
160android.view.View#sendAccessibilityEvent(int)}, with a parameter representing
161the type of event that occurred.  A complete list of the event types currently
162supported can be found in the {@link
163android.view.accessibility.AccessibilityEvent} reference documentation.
164
165<p>As an example, if you want to extend an image view such that you can write
166captions by typing on the keyboard when it has focus, it makes sense to fire an
167{@link android.view.accessibility.AccessibilityEvent#TYPE_VIEW_TEXT_CHANGED}
168event, even though that's not normally built into image views.  The code to
169generate that event would look like this:</p>
170<pre>
171public void onTextChanged(String before, String after) {
172    ...
173    if (AccessibilityManager.getInstance(mContext).isEnabled()) {
174        sendAccessibilityEvent(AccessibilityEvent.TYPE_VIEW_TEXT_CHANGED);
175    }
176    ...
177}
178</pre>
179
180<h2 id="testing">Test Your Application</h2>
181<p>Be sure to test the accessibility functionality as you add it to your
182application.  In order to test the content descriptions and Accessibility
183events, install and enable an accessibility service.  One option is <a
184href="https://play.google.com/store/apps/details?id=com.google.android.marvin.talkback">Talkback</a>
185,
186a free, open source screen reader available on Google Play.  With the service
187enabled, test all the navigation flows through your application and listen to
188the spoken feedback.</p>
189
190<p>Also, attempt to navigate your application using a directional controller,
191instead of the touch screen.  You can use a physical device with a d-pad or
192trackball if one is available.  If not, use the Android emulator and it's
193simulated keyboard controls.</p>
194
195<p>Between the service providing feedback and the directional navigation through
196your application, you should get a sense of what your application is like to
197navigate without any visual cues.  Fix problem areas as they appear, and you'll
198end up with with a more accessible Android application.</p>
199