Chapters
Chapters

Chapters

Hide chapters

Android Accessibility by Tutorials

Second Edition · Android 12 · Kotlin 1.6 · Android Studio Chipmunk

Before You Begin

Section 0: 4 chapters
Show chapters Hide chapters

Section I: Android Accessibility by Tutorials

Section 1: 13 chapters
Show chapters Hide chapters

Section II: Appendix

Section 2: 1 chapter
Show chapters Hide chapters

9. Understandable
Written by Victoria Gonda

Heads up... You’re accessing parts of this content for free, with some sections shown as scrambled text.

Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now

Heads up... You’re accessing parts of this content for free, with some sections shown as scrambled text.

Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now

Even when users can perceive and read your app, you shouldn’t assume they understand your app. While they may see the iconography and layout, they may not grasp the purpose behind these components. And even though a user can see or hear the text, you can’t assume that person will understand what it means. That’s why you need to consider how to make your app understandable in addition to perceivable and operable.

WCAG’s guidance for this third pillar is:

3. Understandable: Information and the operation of user interface must be understandable.

You have many options to make your work more understandable, including localization and writing to a lower reading level. Thoughtful error handling is another way to improve an app’s understandability.

You’ll work through some of these options using Taco Tuesday. Open the project you’ve been using, or get a fresh version from the starter materials for this chapter.

Increasing Readability

A substantial part of making your app understandable is making sure your content is readable.

Guideline 3.1 Readable: Make text content readable and understandable.

Here are some of the ways you can make an app more readable:

  • Internationalization (or i18n) and localization (or l10n).
  • Avoiding long blocks of text.
  • Pairing icons with text.
  • Using different fonts or allowing user-selected fonts.
  • Avoiding unusual words.
  • Explaining abbreviations.

This section will look at each of these examples in more detail.

Internationalizing an App

It’s easier to understand an app when it uses your primary language. Internationalization, sometimes called localization, is the process of preparing your app to support other locales.

Using String Resources for Translations

Android allows you to put all your strings in XML resource files. The primary benefit of this feature is that it supports different locales, device types and configurations. Before you send off an app for internationalization, you need to:

android:text="View"

android:text="@string/shared_details"

Adding Translations

To localize Taco Tuesday, you need to add translated strings files. In the real world, these might come from another team in your company that handles translations, or you could get them from a translation service. Fortunately, Taco Tuesday translations are provided for you.

Strings assets in project materials.
Ppquvxc osxuyl id rpozunn hugayeirj.

Strings files in Android Studio.
Qhhihjs tupov el Ubdveot Nfabua.

Settings screen with various translations.
Mihwohcq dqtaet qaly xivuuin wqiprtoyuetd.

Supporting Right-to-Left Layouts

To support RTL layouts, you need to:

android:supportsRtl="true"
Developer options to force RTL.
Niyukoquf idbiexb ha nivhi RTV.

Taco Tuesday forced RTL.
Riru Jaodtof wextod XVL.

Using Local Formats

People format values differently depending on where they live or what language they speak.

val currentDate = Date()
val dateFormat = DateFormat.getMediumDateFormat(context)
val formattedDate = dateFormat.format(currentDate)
binding.recipeDetailErrorView.text = requireContext().getString(
  R.string.shared_generic_error_message, formattedDate
)

Taco-bout a mess! We ran into an error when trying to do that
Aug 7, 2022

Avoiding Long Blocks of Text

Long blocks of text can be overwhelming or confusing for some and a complete turnoff for others. Assume nobody will read a long block of text unless your app is designed for consuming books, articles or other long-form content.

Recipe card with a lot of text.
Sigamo sajq nabt i hip or cesg.

app:layout_constraintDimensionRatio="2:1"

android:layout_margin="@dimen/space_normal"

android:textSize="12sp"
Recipe card with less text.
Citedu kulp sapb huvd fuvm.

Adding a Gradient

You can make another improvement: a gradient overlay on the text. You mainly need to see the title in this part of the app, and the rest of the text is a bonus preview. A thoughtfully placed gradient will direct the eyes to the image, title and description, while indicating that there is more text the user can see if they tap the details button.

<View
 android:layout_width="0dp"
 android:layout_height="0dp"
 android:background="@drawable/recipe_preview_gradient"
 app:layout_constraintBottom_toBottomOf="@id/discovery_card_recipe_description"
 app:layout_constraintEnd_toEndOf="@id/discovery_card_recipe_description"
 app:layout_constraintStart_toStartOf="@id/discovery_card_recipe_description"
 app:layout_constraintTop_toTopOf="@id/discovery_card_recipe_description" />
Recipe card with gradient.
Wucoti xipd nozw twuguomg.

Pairing Icons With Text

Icons’ meanings are not always precise. An icon could be new to a user, culturally specific or ambiguous. Be careful when choosing icons. They might not be as universal or explicit as you’d think.

Ambiguous icons.
Iykuwooat ayogy.

android:text="@string/shared_discard"

android:text="@string/shared_details"

app:iconGravity="end"
Icons with text.
Eqekv folq nosc.

Using Different Fonts

This book has already covered most of what you need to know about fonts. For example, you covered text scaling in Chapter 4, “Perceivable — Layout & Labeling”, and color contrast in Chapter 6, “Perceivable — Colors”.

Avoiding Unusual Words

When creating copy for an app, be careful with lesser-known words.

Intermittent message.
Uppogsarjadr mexxuli.

<string-array name="pop_up_alternates">
 <item>Are you enjoying the app? Rate it now in the Play Store!</item>
 <item>Victoria just tried a new recipe. What recipe are you trying this week?</item>
 <item>Jenn rated her favorite recipe 1 minute ago. Why don\'t you help others by rating yours?</item>
 <item>Ellen made tacos on Tuesday 5 weeks in a row. Beat her streak!</item>
 <item>Gabriella created her own taco recipe. Congratulate her!</item>
 <item>How are you liking this app? Let\'s talk about it. Answer this five minute survey!</item>
 <item>Let us help you find your next Taco Tuesday recipe! Swipe right on your next find.</item>
 <item>Did you find a recipe you dislike? Not your type of taco? Leave a rating on the details screen.</item>
 <item>Sorry to be all up in your grill. Do you mind taking a second to rate the app?</item>
 <item>Spectacular! You saved your first recipe. Ready to get cooking?</item>
 <item>Having issues with the app? We can talk over the phone. Contact support now.</item>
 <item>Shop for tortillas and other ingredients now so you\'re not caught without them</item>
 <item>Are you hungry? Try one of our delicious taco recipes!</item>
 <item>Have some feedback? You can tell us. We won\'t tell anyone.</item>
 <item>Try tacos on a day other than Tuesday. Tacos every day!</item>
 <item>Let\'s not waste time. You\'re our favorite customer!</item>
 <item>Take a chance on that recipe you\'re not sure about. You might end up loving it!</item>
 <item>Do you have the best taco pun? Share it with us on our forum!</item>
 <item>Taco Throw Back Thursday time! Share the best taco recipe you\'ve ever made?</item>
 <item>Ready for Taco Tuesday? How about you use one of our tried and true recipes.</item>
</string-array>

val randomIndex = Random.nextInt(options.size - 1)
val randomMessage = options[randomIndex]

// 1
binding.mainBanner.setOnClickListener {
 // 2
 AlertDialog.Builder(this@MainActivity)
   .setMessage(resources
    .getStringArray(R.array.pop_up_alternates)[randomIndex])
   .setPositiveButton(R.string.shared_dismiss, null)
   .show()
}
Dialog with alternate text.
Heitat soqs ocdudpomo tibl.

Explaining Abbreviations

Similar to difficult words or phrases, abbreviations can be a source of confusion.

Creating Predictability

The other part of making your app understandable is making it predictable.

Changing Context

It can be confusing when the context changes, but the user doesn’t expect it to. For example, after pressing a navigation button such as Close or Next, the user expects the context to change, but they might not expect a change after changing a setting or performing some other task.

Made it check box.
Rize uf nfaqm nof.

recipeDetailMadeIt.setOnCheckedChangeListener { _, _ ->
 activity?.onBackPressed()
}

Navigating Consistently

Navigation patterns should be consistent throughout the app. For example, when you have a View button that takes you to a details screen in one view, it should do the same on any other view.

Labeling Consistently

If you have two buttons that submit a form in the same way, they should have the same label, so the user knows what it does. This best practice applies to other kinds of labels too.

android:text="No thanks"

android:text="@string/shared_discard"

android:text="Save for later"

android:text="@string/shared_try_it"
Updated button text.
Udxonum mofbed qunm.

Helping With Errors

Misunderstandings happen when the user doesn’t understand what’s expected of them, and when there are errors that don’t make sense. User frustration increases when they don’t know why something went wrong. The more frustrated they are, the less likely they’ll keep using your app, which is why this WCAG guideline exists:

Announcing Detailed Errors

When there’s an error, you want to describe it, clarify if it’s related to a specific field or task and explain if and how the user can resolve it.

Error message.
Utvew yahdigi.

recipeDetailErrorView.accessibilityLiveRegion =
  ViewCompat.ACCESSIBILITY_LIVE_REGION_POLITE
Announced error message.
Ixguewzar usgay zarceca.

Writing Clear Error Messages

You should write error messages for the user. They should help the user know:

Please try again in a few minutes.
Announced error message with instruction.
Odneebwiv ovsan tevjuso xuzl ubzxsoqkais.

Providing Input Descriptions

When your app has a form or single input, you should clarify what to include in this field so the user can avoid causing errors.

Key Points

  • Making sure your app is understandable is your responsibility.
  • Internationalizing your app can bring your app to more people and can be lucrative in some markets.
  • Avoiding long blocks of text improves the user’s comprehension.
  • Using text to disambiguate icons sets your users’ expectations clearly.
  • Supporting font substitution allows your user to enjoy a custom system font in your apps.
  • Making errors avoidable and understandable reduces frustration with your product.
8. Operable — Movement & Timing
10. Robust
Have a technical question? Want to report a bug? You can ask questions and report bugs to the book authors in our official book forum here.
© 2024 Kodeco Inc.

You’re accessing parts of this content for free, with some sections shown as scrambled text. Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now