Skip to main content
Mobile Accessibility Bible
iOSmedia-motionBeginner

Accessible Non-Text Content

Some visual elements contain characters, emojis, or textual information that may not be self-explanatory for people using assistive technologies. Providing accurate, meaningful descriptions ensures that all users—including those who rely on screen readers—can fully understand your app’s content.

🎯 Why It Matters

Some visual elements contain characters, emojis, or textual information that may not be self-explanatory for people using assistive technologies. Providing accurate, meaningful descriptions ensures that all users—including those who rely on screen readers—can fully understand your app's content.

When screen readers encounter emojis, special characters, or text embedded in images without proper descriptions, they may:

  • Announce emojis as generic terms like "emoji" or skip them entirely
  • Read special characters or mathematical symbols incorrectly
  • Be unable to convey important information contained within images

This creates significant barriers for users who depend on assistive technologies to access your content.

💻 Implementation

Correct Code Example: Providing Emoji Descriptions

Demo Description

This snippet demonstrates how to display a text string containing emojis and then provide a separate accessibility label that clearly describes the emoji's meaning.

// SwiftUI  
 
import SwiftUI
 
struct EmojiDescriptionView: View {
    var body: some View {
        Text("I ❤️ iOS!")
            .accessibilityLabel("I love iOS!")
    }
}

Code Explanation

This SwiftUI code sets the text to "I ❤️ iOS!" and attaches the accessibilityLabel modifier with the value "I love iOS!", ensuring screen readers correctly announce the phrase rather than just reading the emoji as "heart."

Correct Code Example: Adding Context to Special Characters

Demo Description

Special characters or symbols, such as mathematical formulas or scientific notations, may not be obvious to those listening through screen readers. Here, we display Einstein's famous equation but also include a plain-language accessibility label.

// SwiftUI  
 
import SwiftUI
 
struct SpecialCharacterView: View {
    var body: some View {
        Text("E = mc²")
            .accessibilityLabel("E equals m c squared")
    }
}

Code Explanation

This snippet displays "E = mc²" visually, while the accessibilityLabel modifier with the value "E equals m c squared" gives users a complete and understandable audio representation of the formula.

Correct Code Example: Describing Text in Images

Demo Description

Essential information should generally not be embedded in images. If you must include important text in an image, provide a thorough description so screen readers can convey it to users.

// SwiftUI  
 
import SwiftUI
 
struct BannerImageView: View {
    var body: some View {
        Image("welcomeBanner") // e.g., a stored asset named "welcomeBanner"
            .resizable()
            .scaledToFit()
            .accessibilityLabel("Black Friday special offer. 50 percent off selected items.")
    }
}

Code Explanation

This code sets the image resource "welcomeBanner" and provides a clear accessibilityLabel modifier with the value "Black Friday special offer. 50 percent off selected items," ensuring the text on the banner is announced by screen readers.

✅ Best Practices

Do's

  • ✓Provide descriptive labels for all emojis that convey meaning
  • ✓Spell out special characters and mathematical symbols phonetically
  • ✓Include complete text descriptions for images containing text
  • ✓Use plain language that's easy to understand
  • ✓Test with screen readers to verify descriptions are announced correctly
  • ✓Consider cultural context when describing emojis and symbols
  • ✓Keep descriptions concise while maintaining clarity

Don'ts

  • ✗Embed critical information solely in images without alternative text
  • ✗Assume screen readers will correctly interpret emojis automatically
  • ✗Use vague descriptions like "special character" or "symbol"
  • ✗Over-describe decorative elements that don't convey information
  • ✗Forget to describe emojis used for emotional context or tone
  • ✗Leave mathematical or scientific notation without plain-language explanations
  • ✗Use technical jargon in accessibility labels when simpler language works

🔍 Common Pitfalls

Undescribed Emojis

Emojis without accessibility labels may be announced generically or skipped entirely, losing important emotional context or meaning

Technical Symbol Jargon

Using technical names for symbols (e.g., "superscript two" instead of "squared") that may confuse users unfamiliar with the terminology

Missing Image Text

Forgetting to provide alternative text for promotional banners, infographics, or screenshots containing important information

Over-Description

Providing unnecessarily long or complex descriptions for simple visual elements

Decorative vs. Meaningful

Failing to distinguish between decorative emojis (which can be hidden from screen readers) and meaningful ones that convey essential information

Context Loss

Describing only the literal symbol without explaining its meaning in context

VoiceOver/TalkBack

Screen readers will announce the accessibility label instead of attempting to interpret emojis, special characters, or image content. For emojis, VoiceOver will speak the custom label (e.g., "love" instead of "red heart"). For special characters, it will announce the phonetic description. For images with text, the entire text content will be spoken

Voice Control

Clear, descriptive labels help voice control users understand what's on screen, even if they can't see visual elements

Dynamic Type

Text-based alternatives for visual content ensure information remains accessible even when text is scaled to larger sizes

Braille Displays

Accessibility labels are converted to braille, allowing users with deafblindness to access emoji meanings, special character descriptions, and image text content

🧪 Testing Steps

  1. 1Enable VoiceOver: Settings → Accessibility → VoiceOver
  2. 2Navigate to emoji content: Swipe to elements containing emojis
  3. 3Verify emoji announcements: Ensure emojis are described meaningfully, not just as "emoji"
  4. 4Test special characters: Navigate to mathematical or scientific symbols
  5. 5Check symbol pronunciation: Verify symbols are announced in understandable language
  6. 6Review image text: Navigate to images containing text
  7. 7Confirm image descriptions: Ensure all text content in images is conveyed through accessibility labels

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