Skip to main content
Mobile Accessibility Bible
Androidtext-typographyBeginner

Handling Non-readable Content in Android

A practical guide on making emojis, special characters, and text-in-images accessible through proper content descriptions and TalkBack-compatible implementations.

🎯 Why It Matters

The impact on accessibility can be significant. Screen readers might mispronounce words, skip content, or read out nonsensical strings, leading to a frustrating and confusing experience for users with visual impairments.

💻 Implementation

Correct Code Example: Providing Text Alternatives

Demo Description

Here is an example of providing a content description for an image:

imageView.contentDescription = "Smiling face emoji"

Code Explanation

This Kotlin code sets the `contentDescription` of an `ImageView` to "Smiling face emoji," providing a textual description of the image for accessibility purposes.

Incorrect Code Example: Neglecting Emoji Descriptions

Demo Description

Here is an example of not providing a description for an emoji:

// No description for the emoji
textView.text = "I \u2764\uFE0F Android! "

Code Explanation

This Kotlin code sets the `TextView` text to "I ❤️ Android! " without adding a description for the emoji, which might affect accessibility for users relying on screen readers.

Correct Code Example: Providing Emoji Descriptions

Demo Description

Here is how to provide clear descriptions for emojis:

val text = "I \u2764\uFE0F Android!"
textView.text = text
textView.contentDescription = "I love Android!"

Code Explanation

This Kotlin code sets the text of a `TextView` and provides a `contentDescription` of "I love Android!" for accessibility purposes.

Correct Code Example: Handling Special Characters

Demo Description

Here is how to provide context for special characters or symbols:

val mathEquation = "E = mc²"
textView.text = mathEquation
textView.contentDescription = "E equals m c squared"

Code Explanation

This Kotlin code sets the `TextView` text to "E = mc²" and provides a `contentDescription` of "E equals m c squared" for accessibility, giving a detailed description of the equation.

Correct Code Example: Describing Text in Images

Demo Description

Here is how to provide thorough descriptions for text in images:

imageView.setImageResource(R.drawable.welcome_banner)
imageView.contentDescription = "Black Friday special offer. 50 percent off selected items"

Code Explanation

This Kotlin code sets an image resource (`welcome_banner`) to an `ImageView` and provides a `contentDescription` of "Black Friday special offer. 50 percent off selected items" for accessibility purposes.

✅ Best Practices

Do's

  • ✓Provide clear, descriptive text alternatives for all emojis and special characters
  • ✓Use plain language that conveys the meaning, not just the visual appearance
  • ✓Extract text from images and provide it as alternative text
  • ✓Test with screen readers to verify content is announced correctly
  • ✓Provide context for mathematical notation and symbols
  • ✓Mark purely decorative elements as inaccessible to avoid clutter

Don'ts

  • ✗Rely on emojis alone to convey critical information
  • ✗Embed important text in images without alternatives
  • ✗Use vague descriptions like "emoji" or "symbol"
  • ✗Forget to describe compound emojis or emoji sequences
  • ✗Use custom fonts without ensuring screen reader compatibility
  • ✗Assume screen readers will correctly pronounce special characters

🔍 Common Pitfalls

Missing Emoji Descriptions

Emojis without `contentDescription` are either skipped or read as character codes, leaving users confused about the content

Text Embedded in Images

Essential information in images is invisible to screen readers without proper alternative text

Vague Accessibility Labels

Generic descriptions like "image" or "icon" provide no useful context to users

Undescribed Special Characters

Mathematical symbols, currency signs, and other special characters may be mispronounced or skipped entirely

Assuming Universal Emoji Meanings

Emojis can have different cultural interpretations, so clear descriptions are essential

Over-Describing Decorative Elements

Making every visual element accessible creates unnecessary clutter for screen reader users

TalkBack

Will read the `contentDescription` attribute instead of attempting to interpret emojis or special characters. Without descriptions, TalkBack may skip content or read character codes

Switch Control

Users navigating with switches rely on clear labels to understand element content

Dynamic Type

Text alternatives should scale appropriately with the user's text size settings

🧪 Testing Steps

  1. 1Use TalkBack: Enable TalkBack in Settings → Accessibility → TalkBack
  2. 2Navigate through content: Swipe right to move between elements
  3. 3Listen to how content is read: Verify emojis, special characters, and images are announced correctly
  4. 4Test with various languages and scripts: Switch system language and retest
  5. 5Verify emoji and special character descriptions: Ensure descriptions convey accurate meaning
  6. 6Test text in images: Confirm all embedded text is properly described
  7. 7Check mathematical notation: Verify symbols are announced correctly

Become a member to read this solution, and all of Ma11y.

This resource is part of our member knowledge base. Log in or create an account to unlock:

  • Complete accessibility guidance and implementation examples
  • Curated compliance frameworks and checklists
  • Early access to new tools and features
Log in or sign upCreate account