Most people will have at least a short term disability at some time that makes it difficult to use their mobile device.
This includes someone who was born blind, or lost fine motor skills in an accident.
This also includes someone who can’t use their hands because they are carrying a wiggly child.
You may have experienced difficulties using your phone while wearing gloves when it’s cold outside.
Maybe you’ve had a hard time distinguishing items on the screen when it’s bright outside.
With so much of the population experiencing decreased vision, hearing, mobility, and cognitive function, you should do your best to give everyone the best experience in your apps that you can.
It’s a small way you can make people’s lives better.
Maybe you’ve had a hard time distinguishing items on the screen when it’s bright outside.
With so much of the population experiencing decreased vision, hearing, mobility, and cognitive function, you should do your best to give everyone the best experience in your apps that you can.
It’s a small way you can make people’s lives better.
Most people will have at least a short term disability at some time that makes it difficult to use their mobile device.
This includes someone who was born blind, or lost fine motor skills in an accident.
This also includes someone who can’t use their hands because they are carrying a wiggly child.
You may have experienced difficulties using your phone while wearing gloves when it’s cold outside.
3. WHY?
• Most people will have at least a short term
disability at some time that makes it difficult to
use their mobile device.
• This includes someone who was born blind, or
lost fine motor skills in an accident.
• This also includes someone who can’t use their
hands because they are carrying a wiggly child.
• You may have experienced difficulties using your
phone while wearing gloves when it’s cold
outside.
4. WHY…
• Maybe you’ve had a hard time distinguishing
items on the screen when it’s bright outside.
• With so much of the population experiencing
decreased vision, hearing, mobility, and
cognitive function, you should do your best to
give everyone the best experience in your
apps that you can.
• It’s a small way you can make people’s lives
better.
5. How?
Enabling accessibility tools
• There are many tools that people use to
interact with their Android devices. This
includes TalkBack, Magnification, and Switch
Access, to name a few.
6. Enabling accessibility tools
• TalkBack allows you to explore the view using
gestures, while also audibly describing what’s on the
screen.
• Magnification allows you to zoom in on parts of the
screen.
• Both TalkBack and Magnification are helpful for
people with limited visibility.
• People with limited mobility can use Switch Access to
allow them to navigate without using the touch
screen.
• You can find all the accessibility features in
Settings/Accessibility on your device.
7. Enabling accessibility tools…
• This session is going to look mainly at TalkBack, as it
incorporates both screen traversal for navigation and
screen reading to understand what is in focus.
• By using TalkBack, a user can use gestures, such as
swiping left to right, on the screen to traverse the
items shown on the screen.
• As each item is in focus, there is an audible
description given.
• This is useful for people with vision impairments that
cannot see the screen well enough to understand
what is there, or select what they need to.
8. Enabling accessibility tools…
• To turn on TalkBack, go to Settings on your
Android device. Then find Accessibility/TalkBack,
and toggle the tool on.
9. Accessibility Attributes
Content description
• You can easily improve this user experience by adding
a android:contentDescription.
• Adding a content description is something you should
do for every image or button that does not otherwise
have text for the screen reader to read.
• If the element is not important to understand what is
on the screen, the contentDescription can be set to
@null. If you do this, TalkBack, and other screen
readers will skip the element entirely, and move onto
the next thing in the view.
11. Accessibility Attributes…
Grouping
• To specify that both the elements should be in
focus at the same time, add the
android:focusable attribute with the value ”true”
the parent element of the two, the LinearLayout
with the id.
• Also add the attribute
android:focusableInTouchMode with the value
”false”, as you only want this to be focusable for
the screen reader.
13. Accessibility Attributes…
Labels
• The label is read separately from the editable
value, with nothing linking the two.
<TextView android:id="@+id/coffeeLimitLabel"
android:labelFor="@id/coffeeLimitValue"
android:text="@string/coffee_limit_label" />
14. Accessibility Attributes…
Traversal order
• android:accessibilityTraversalBefore on a
view to specify what item this should come
before.
<android.support.design.widget.FloatingActionButton
android:accessibilityTraversalBefore=“Expected ID"
android:contentDescription=“Add coffee “/>
15. Accessibility Attributes…
Announce for accessibility
• When announceForAccessibility() is called,
Android will give an audible announcement
for those using a screen reader, and do
nothing if an accessibility tool is not in use.
• You can use this to inform the user that the
value has been changed.
17. Accessibility Attributes…
Designing for accessibility
• Google recommends to make any clickable items
at least 48dp in size. That is because anything
smaller is difficult for people with vision and
motor impairments to tap accurately.
• To solve this, add the android:minHeight
attribute to that EditText. Make sure the value is
at least 48dp. Alternatively, you could set
android:height to 48dp or higher.
18. Accessibility Attributes…
• Color contrast
Figure 1: Example of low and increased contrast ratios between foreground and
background colors
19. Accessibility Attributes…
Color contrast
• The recommended contrast ratio for text size is at
least 3.0 to 1.
• Use Accessibility Scanner
Google also gives us an Accessibility Scanner that
you can download from the Play Store. After
downloading, the scanner can be turned on in the
same Accessibility settings menu you were in
before to turn on TalkBack. Navigate to
Settings/Accessibility/Accessibility Scanner, and
toggle it on.
20. Accessibility Attributes…
• Use cues other than color
Figure 2: Examples of differentiating UI elements using color only and using
color, shapes, and text
22. Build accessible custom views
• If your application requires a custom view
component, you must do some additional work to
ensure that your custom view is accessible. These
are the main tasks for ensuring the accessibility of
your view:
– Handle directional controller clicks
– Implement accessibility API methods
– Send AccessibilityEvent objects specific to your
custom view
– Populate AccessibilityEvent and
AccessibilityNodeInfo for your view
23. Build accessible custom views
- Handle clicks
- Send AccessibilityEvent objects specific to your custom view
setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
// Send an AccessibilityEvent, since the user has interacted with the view.
sendAccessibilityEvent(AccessibilityEvent.TYPE_VIEW_SELECTED);
}
});
24. Build accessible custom views
Populate AccessibilityEvent and AccessibilityNodeInfo for your
view
public void onPopulateAccessibilityEvent(AccessibilityEvent event) {
super.onPopulateAccessibilityEvent(event);
// Detect what type of accessibility event is being passed in.
int eventType = event.getEventType();
if (eventType == AccessibilityEvent.TYPE_VIEW_SELECTED ||
eventType == AccessibilityEvent.TYPE_VIEW_ACCESSIBILITY_FOCUSED) {
event.getText().add("Mode selected: " + Integer.toString(mActiveSelection + 1) + ".");
event.setItemCount(SELECTION_COUNT);
event.setCurrentItemIndex(mActiveSelection);
}
// When a user first focuses on our view, we'll also read out some simple instructions to
// make it clear that this is an interactive element.
if (eventType == AccessibilityEvent.TYPE_VIEW_ACCESSIBILITY_FOCUSED) {
event.getText().add("Tap to change.");
}
}