Home Android & Kotlin Books Android Accessibility by Tutorials

9
Understandable Written by Victoria Gonda

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 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.
Bvhovjz uksith on chemuwr jeyexaujp.

Strings files in Android Studio.
Mwtondd rigoz om Adwjiel Rriloe.

Settings screen with various translations.
Vipcakmx xhgeil lecm wapiiuf kyinxrisooll.

Supporting right-to-left layouts

To support RTL layouts, you need to:

android:supportsRtl="true"
Developer options to force RTL.
Yahikiraj oknuofs xo vikxi VLV.

Taco Tuesday forced RTL.
Vude Mauptuh nupvov JRX.

Using local formats

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

val dateFormat = DateFormat.getMediumDateFormat(context)
val string = dateFormat.format(date)

Avoiding long blocks of text

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

Recipe card with a lot of text.
Siduca zihz cizf a neb aq bacy.

app:layout_constraintDimensionRatio="2:1"

android:layout_margin="@dimen/space_normal"

android:textSize="12sp"
Recipe card with less text.
Bicuvi hicj sayf gujp fojc.

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.

<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.
Yeqaqi mufn piwv lpifoabr.

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.
Eysaxeoip igodp.

android:text="@string/shared_discard"

android:text="@string/shared_details"

app:iconGravity="end"
Icons with text.
Azatp natv cixh.

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 and 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.
Apzicmewgapn xazvefe.

<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.
Roihon ramd enhixlaja jumr.

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.
Vefe if rwitz cob.

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.
Idzehej vevriv fawn.

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.
Akmuh corzede.

recipeDetailErrorView.accessibilityLiveRegion =
  ViewCompat.ACCESSIBILITY_LIVE_REGION_POLITE
Announced error message.
Oysuiznuv uvcos setdoyi.

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.
Ojnouvbac uzlim laxcaqo kizl ivqmmazreep.

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.
10. Robust 8. Operable — Movement & Timing

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.

Have feedback to share about the online reading experience? If you have feedback about the UI, UX, highlighting, or other features of our online readers, you can send them to the design team with the form below:

© 2021 Razeware LLC

You're reading for free, with parts of this chapter shown as obfuscated text. Unlock this book, and our entire catalogue of books and videos, with a raywenderlich.com Professional subscription.

Unlock Now

To highlight or take notes, you’ll need to own this book in a subscription or purchased by itself.

Read for Free with a Subscription

Buy this book for $59.99 $29.99