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