Alt text ensures mobile apps are accessible by describing images and visual elements for users relying on screen readers. Writing effective alt text can improve user navigation, boost accessibility compliance, and enhance the overall app experience. Here's what you need to know:

  • Keep it concise: Use 50–125 characters to describe the image's purpose, not its appearance. Avoid phrases like "Image of."
  • Focus on function: Describe what the image does (e.g., "Search button") instead of unnecessary visual details.
  • Decorative images: Use alt="" for non-essential visuals to prevent screen readers from announcing them.
  • Context matters: Tailor descriptions to the image's role in the app (e.g., "Add to cart" vs. "View cart (3 items)").
  • Simple language: Avoid jargon or overly technical terms; clarity is key.
  • Multimedia: Provide alt text for videos, charts, and interactive elements, ensuring all users can access the content.
  • Test with screen readers: Use tools like VoiceOver or NVDA to confirm alt text works as intended.
  • Follow guidelines: Adhere to WCAG standards and platform-specific rules for accessibility.
  • Localization: Translate and adjust alt text for different languages, adapting to local norms.

Alt text isn't just about compliance - it's about improving usability for everyone. Clear, functional descriptions make your app more user-friendly while meeting accessibility standards.

How to add alt text to photos in iOS

1. Write Short and Clear Alt Text

Step 1: Focus on short, clear descriptions. Alt text should be concise because screen readers announce every word. Stick to what’s essential.

Aim for 50–125 characters. This keeps the message clear without overwhelming users. Instead of detailing every visual element, describe the image’s function. For example, say "Submit button" rather than providing a long explanation.

Screen reader users often navigate quickly, so your description needs to be immediate and to the point. A phrase like "Chart showing quarterly sales data" is perfect for fast comprehension.

Context is key when deciding what to include. Take a profile picture in a social media app: "John Smith's profile photo" is far more useful than "Man wearing glasses and a blue shirt." The priority is identifying the person, not their appearance.

Avoid unnecessary phrases like "Image of" or "Picture showing." Screen readers already identify the element as an image, so skip straight to the meaningful part. For instance, use "Shopping cart icon" instead of "Image of a shopping cart icon."

To test your alt text, read it aloud. If the description alone communicates the image’s purpose, you’ve nailed it. The goal is to highlight the function of the image, not just its appearance.

2. Describe Purpose, Not Visual Details

Focus on what it does. When writing alt text, prioritize describing the image's function rather than its appearance. For screen reader users, understanding the image's role within the app is far more important than visual details.

Take, for example, a navigation icon in a mobile banking app. Instead of mentioning its color or shape, describe what it does: "Next step button" or "Continue to account summary." These descriptions provide the essential context for navigation, which is what matters most to users who rely on screen readers. This principle applies to all app elements.

Match the description to the image's role. The purpose of an image dictates how it should be described. A product photo in an e-commerce app, for instance, is meant to inform users about the item for sale. In this case, you might say: "Nike Air Max sneakers in white." Mentioning the brand and color helps users make informed choices. On the other hand, decorative background images don’t need descriptions because they don’t serve a functional purpose.

For profile pictures in a messaging app, a simple description like "Sarah Johnson's profile picture" gives users the necessary context without unnecessary details. Avoid adding anything that doesn’t help with navigation or understanding.

Think about what the user wants to achieve. In a food delivery app, users are more interested in knowing "Add to cart button" or "Five-star rating" than hearing about the visual design of buttons or icons. The descriptions should support their actions or decisions.

When it comes to icons, always describe their function. For example, a magnifying glass icon should be labeled as "Search" rather than "Magnifying glass icon." Screen reader users benefit most from clear, functional descriptions - what the icon does, not what it looks like.

3. Skip Unnecessary Phrases

Screen readers already announce images. When creating alt text, avoid redundant phrases like "Image of" or "Picture of." Screen readers automatically indicate the presence of an image, so including these phrases only adds unnecessary repetition and slows down navigation.

Think about how this sounds to someone using a screen reader. For instance, if your alt text says "Image of Allyant logo", the screen reader will say, "Image: Image of Allyant logo." This repetition can be confusing and wastes time. Instead, simply write "Allyant logo", so the screen reader announces, "Image: Allyant logo" - clear and straight to the point.

Your alt text should focus on what’s most important about the image. For example, in a mobile banking app, rather than saying "Picture of a deposit check button", just write "Deposit check button." This ensures users get the information they need quickly.

Here’s a comparison to illustrate the difference:

Alt Text Version User Experience Impact
"Image of Allyant logo" Redundant, slower navigation
"Allyant logo" Clear, efficient
"Picture of a deposit check button" Redundant, less concise
"Deposit check button" Direct, concise

When the image type matters, include it. In some cases, specifying the type of image adds useful context. For example, for screenshots or illustrations, you might write "Screenshot of login screen" or "Illustration of heart anatomy." This provides clarity about what users are encountering and helps them understand the image's purpose.

Keep it short and to the point. Experts suggest keeping alt text under 120 characters. By cutting out unnecessary filler, you ensure users can quickly grasp the essential details of an image without extra effort.

4. Handle Decorative Images Correctly

After addressing concise alt descriptions for functional images, it's equally important to treat decorative images appropriately.

You should only include alt text when an image provides essential information. If the image doesn't add meaningful content, it should be marked as decorative. To decide if an image is decorative, ask yourself: Does removing this image affect the understanding of the page or its functionality? If the answer is no, the image should be marked as decorative with an empty alt attribute (alt="").

"An image is decorative if users can complete all tasks and understand all information on the page without it." – Emma Cionca and Tanner Kohler, NN/g

Using alt="" ensures that screen readers skip over the image entirely, preventing unnecessary interruptions for users who rely on assistive technology. On the other hand, if an image lacks an alt attribute altogether, screen readers might read the file name aloud, which can be distracting or confusing.

Practical examples from real-world applications show how this works. For instance, Sesame Street's character page and Rolling Loud's hero image both use empty alt attributes for decorative visuals to simplify navigation for screen reader users.

Image Type Example Alt Text Approach
Hero banners Rolling Loud hero image alt="" – purely aesthetic
Ornamental elements Stanley borders alt="" – no task-related content
Redundant icons CA.gov gear with "Settings" label alt="" – text already explains

The key is understanding the purpose of the image. The W3C points out that deciding whether an image is informative or decorative requires considering its role on the page. In mobile apps, this means evaluating whether the image supports user goals or simply adds to the visual design.

Always assign an alt attribute to every image. For decorative ones, use alt="" to help screen readers skip over them seamlessly.

5. Match Alt Text to Context

Images in your mobile app often serve different purposes depending on the screen. For example, a shopping cart icon might act as a navigation tool on one screen but show the order status on another. Your alt text should reflect these varying roles rather than simply describing the image's appearance.

The context of an image determines what users need to know. When creating alt text, consider the image's role within the app and tailor the description accordingly. This ensures that users understand the specific function of each image.

Take a star icon as an example. On a product review page, the alt text might be "Rate this product", while on a favorites list, it could say "Remove from favorites." A generic description like "star icon" doesn’t convey the action users can take in either scenario. These examples highlight how context shapes the way alt text should be written.

Ask yourself: What unique information does this image provide in its specific context? For instance, in a university news app, an image of four women training on a track could be described as "Runners training." However, a more meaningful alt text would be "Four women training for a meet", as it ties the image directly to the story.

Weather apps also illustrate this principle well. Instead of using "sun icon" for an image showing current conditions, opt for "Sunny, 75°F." This gives users the essential weather details they need at a glance.

Avoid redundancy by not repeating information already visible on the screen. For example, if a button displays "Submit Order", the alt text shouldn’t repeat that phrase. Instead, focus on any additional context the image provides. If the surrounding text fully explains the purpose, an empty alt attribute may be more appropriate.

Image Context Generic Alt Text Context-Specific Alt Text
Search button "Magnifying glass" "Search products"
Shopping cart with items "Shopping cart" "View cart (3 items)"
Weather display "Sun icon" "Sunny, 75°F"

Context changes the meaning of an image. For example, "iPhone 15 Pro" might work as alt text on a category page, but on a detailed product page, users need more information: "iPhone 15 Pro, $999, in stock."

It’s also important to revisit and update alt text as your app evolves. When screens or features change, adjust the alt text to align with the new context and user needs. Experts at Zee Palm emphasize this context-aware approach in every mobile app project, ensuring accessibility and a user-centered design throughout the app.

sbb-itb-8abf120

6. Use Simple, Direct Language

When writing alt text, keep it natural and easy to understand. Screen reader users process information quickly, so using clear, everyday language ensures they can navigate your app without confusion. Avoid complex words, technical jargon, or overly descriptive phrases, as these can make it harder for users relying on assistive technology.

Stick to descriptions that are 50–125 characters long whenever possible. Screen readers read continuously, so concise descriptions help focus on what’s important about each image.

"Avoid technical jargon and abbreviations unless users are certain to understand them." - NN/G

Replace complicated words with simpler ones. For example, use "use" instead of "utilize" or "help you move around the app" instead of "facilitate navigation." The goal is instant understanding, not flashy vocabulary. Structure your description so the main point is clear right away.

Objective language is key. Skip subjective words like "beautiful" or "amazing", as they don’t help users understand the image’s purpose. Instead, describe the image’s function or content directly.

Avoid mentioning personal characteristics like race, gender, or age unless they’re directly relevant to the image’s context. For example, in a fitness app showing exercise routines, focus on the action being demonstrated rather than details about the person performing it.

"Mention identity only if it's relevant. If the race, ethnicity, gender, religion, or cultural identifiers of the people pictured aren't part of the reason the image was included, don't mention them." - NN/G

Lead with the most important information. Screen reader users need to grasp the main point immediately, especially since longer descriptions might get cut off. Start with the action or main content, and add supporting details only if space allows.

For technical terms, define abbreviations the first time you use them or avoid them altogether. While terms like "GPS" are widely understood, others like "API" or "SDK" may confuse general users. When in doubt, spell it out or use plain alternatives. This approach benefits everyone, including those using assistive technologies.

Opt for simple, straightforward words to ensure your alt text works for users with varying needs. What feels simple to you might be challenging for someone else.

Effective alt text should blend seamlessly into the user experience, providing clear, efficient information without drawing unnecessary attention to itself.

7. Make All Media Content Accessible

Alt text isn’t just for images - it’s essential for all types of multimedia content, including videos, infographics, charts, animations, and interactive elements. Each format requires a specific approach to ensure that users with disabilities can access the information effectively.

For video content, include descriptions that go beyond the audio. Highlight the video's purpose and any critical visuals not covered by the narration. For instance: "Trainer demonstrates proper squat form." This ensures users can grasp visual details that are otherwise inaccessible.

When it comes to infographics and data visualizations, provide detailed descriptions that communicate the same insights as the visuals. Instead of being vague, extract and share the key data. For example: "Bar chart showing a 25% sales increase from January to March, with February reaching a peak of $50,000." This ensures screen reader users receive meaningful information.

Interactive elements like buttons, sliders, and touch zones also require clear and precise labels. For example, instead of labeling a progress bar as "Progress bar," use something more informative, like "Video progress: 2 minutes 30 seconds of 10 minutes." This level of detail helps users navigate interactive content with confidence.

For animations, describe both the key visuals and their movement. For instance, a loading animation could be labeled as "Spinning circle: loading content." This tells users what’s happening and sets expectations.

When multimedia is part of a larger context, such as within an app or website, consider context switching. For example, if a user moves from a product list to a video review, the alt text should clarify this transition: "Customer review video for the running shoes you selected." This helps users stay oriented.

Audio-only content, like podcasts or voice messages, should include text alternatives. You can provide transcripts or summaries, such as: "Voice message from Sarah, 45 seconds."

Testing multimedia accessibility is crucial. Try turning off your device’s sound and screen while using assistive technology. This exercise can reveal gaps in how visual or audio information is conveyed, ensuring your content doesn’t overly rely on a single sense.

Also, pay attention to file formats. Choose formats that support accessibility features, and always include fallback descriptions to ensure no user is left out.

Finally, remember that alt text for multimedia content often needs to be more detailed than for static images. While an image might need just 50–125 characters, videos or complex visuals might require several sentences to fully convey the necessary information.

8. Test with Screen Readers

Writing alt text is just the beginning - testing it with screen readers is where you’ll find out if your descriptions actually work. Nearly 20 million Americans have visual impairments, and about one million are legally blind. This number is projected to grow by 21% every decade. Screen readers can uncover issues that automated tools simply can’t.

Screen readers are software designed to convert text into speech or Braille, helping users with visual impairments, cognitive disabilities, or learning challenges navigate content. While sighted users can quickly scan a page with a mouse, screen reader users rely on keyboard navigation and shortcuts to experience content in a linear manner. Understanding how this works is key to evaluating how your alt text performs in real-world scenarios.

To get reliable feedback, start by testing with some of the most commonly used screen readers. For example:

  • JAWS: A powerful tool, though its cost is often over $1,000.
  • VoiceOver: Free and built into Mac and iOS devices.
  • NVDA: Free for Windows users.

Testing with at least two different screen readers can help you identify a range of issues.

Common Issues Uncovered During Testing

Testing often reveals problems that can disrupt the user experience. For instance:

  • Missing alt attributes: Without these, screen readers default to reading out image file names, leading to awkward announcements like "IMG_screenshot_final.png".
  • Decorative images without empty alt attributes: If these images lack alt="", users may hear unnecessary descriptions that add no value.
  • Redundant phrases: Alt text that includes phrases like "picture of" repeats what the screen reader already announces, creating a frustrating experience.
  • Repetitive information: Alt text that echoes details already provided in surrounding text or captions can feel redundant and tiresome.
  • Alt text length: Descriptions longer than 125 characters may be cut off, while overly short descriptions might leave users unsure about the image’s purpose.
  • Focus on appearance over function: For functional images like buttons, alt text should explain the action (e.g., "Submit form") rather than just describing the button’s appearance.

Testing Reading Order and Layout Issues

Pay close attention to how the reading order flows, especially in complex layouts. In mobile apps with inline images, improper tag structures can cause screen readers to read all the text first and then all the alt text at the end. This disrupts the logical flow, making it harder for users to follow.

For interactive elements like buttons, testing ensures the alt text communicates the intended action clearly. For example, rather than saying "blue button with arrow", the description should focus on the action, like "Go to next page".

The Importance of Real User Feedback

Whenever possible, include screen reader users in your testing process. In 2023, 10.1% of WebAIM survey respondents reported using screen readers even without a specific disability, but users with visual impairments can offer insights that sighted testers might overlook. Their feedback is invaluable for refining your alt text and ensuring it meets user needs.

While automated tools can flag missing alt attributes, they can’t evaluate whether your descriptions provide a good user experience. That’s why human testing remains essential.

Lastly, don’t forget to test across multiple devices and browsers. Screen readers can behave differently depending on the platform. For example, what works smoothly on iOS with VoiceOver might pose challenges on Android with TalkBack. Thorough testing ensures your app is accessible to everyone, no matter how they access it.

9. Follow Platform Guidelines

Every mobile platform comes with its own set of accessibility standards to ensure apps function effectively with assistive technologies. For most mobile apps, WCAG 2.1 Level AA is the benchmark, including those that need to comply with ADA requirements for state and local government apps. The newer WCAG 2.2 introduces additional criteria tailored specifically for mobile environments.

Under WCAG's "Perceivable" principle, all non-text content must have text alternatives, allowing it to be converted into formats like large print, braille, or audio. For instance, WCAG Success Criterion 1.1.1 requires that every informative image include a text alternative that conveys the same purpose or meaning. These guidelines create a solid foundation for implementing accessibility standards across different platforms.

Integrating WCAG with Platform-Specific Guidelines

WCAG

To ensure your app meets accessibility standards, start by aligning WCAG principles with the specific requirements of the platform you're working on. Both Apple's Accessibility Guidelines for iOS and Google's Material Design Accessibility guidelines for Android build upon WCAG's framework. For example, terms like "web page" in WCAG are adapted to mobile contexts as "screen" or "view".

It’s also vital to check programmatic determinability - this means ensuring that accessible APIs can clearly communicate your app's structure and content relationships to assistive technologies.

Platform-Specific Implementation

Each platform has its own best practices for accessibility:

  • For iOS: Use Apple's guidelines to ensure screen readers like VoiceOver provide accurate and meaningful alt text for all content.
  • For Android: Follow Google's Material Design Accessibility guidelines to create context-aware alt text and properly tag decorative elements to avoid unnecessary clutter for users relying on assistive tools.

10. Adapt Alt Text for Different Languages

Following platform guidelines is a good start, but tailoring alt text for different languages takes accessibility to the next level. It’s not just about translating words - it’s about ensuring the descriptions resonate with users in their local context. This means considering both linguistic accuracy and cultural relevance so that users everywhere can fully understand and connect with the content.

Here’s why this matters: The World Bank reports that over 60% of the global population speaks more than one language, emphasizing the importance of multilingual accessibility in digital products. Yet, a 2022 WebAIM survey revealed that 18% of screen reader users encountered alt text in a language they didn’t understand, creating a frustrating experience.

Localize Beyond Translation

Direct translations often fall short when it comes to cultural nuances. For instance, symbols like a "thumbs up" might mean approval in the US but could be offensive in other parts of the world. Localizing alt text involves adapting both the language and the cultural context to make descriptions clear and relevant.

Google’s Material Design team showcased this in 2023 by updating their accessibility guidelines to require localized alt text for multi-language apps. In one example, their weather app displayed an image of a thermometer. The alt text read "Thermometer showing 72°F" in US English, "Termómetro mostrando 22°C" in Spanish, and "Thermomètre affichant 22°C" in French. Notice how they not only translated the text but also adjusted the measurement units to align with local norms.

Real-World Success Stories

The BBC News app offers another great example. In April 2022, they enhanced accessibility across their international editions by adapting image descriptions for different audiences. A photo of a UK Parliament session, for example, was described as "Members of Parliament debate in the House of Commons" in English, "Miembros del Parlamento debaten en la Cámara de los Comunes" in Spanish, and "Députés débattent à la Chambre des communes" in French. Each version maintained accuracy while addressing the linguistic needs of its audience.

Google reported a 30% increase in user retention when alt text was localized to reflect language and cultural nuances.

Practical Implementation Tips

For US English, stick with imperial units (like 72°F or 5 miles), MM/DD/YYYY date formats, and American spelling (e.g., 'color'). Use attributes like Android’s contentDescription or iOS’s accessibilityLabel to link alt text to localization files, allowing for automatic updates.

Start by extracting all app strings from your codebase and implementing automated checks to catch any untranslated content. For example, in November 2024, Zee Palm localized 300 app strings for Qualoo by creating a custom lint tool to detect unlocalized strings in Flutter codebases. This ensured every piece of user-facing content was covered and aligned with accessibility standards.

Finally, always test your localized alt text with screen readers in each target language. This step helps catch issues like pronunciation errors or unclear phrasing that might not be obvious during the translation process. It’s a crucial part of delivering an accessible experience for users everywhere.

Conclusion

Alt text plays a crucial role in making mobile apps accessible and user-friendly. The numbers tell a clear story: 89% of visually impaired users depend on assistive technology to understand screen elements, and 72% of users abandon a service when image descriptions are incomplete or missing. These statistics highlight how essential well-crafted alt text is - not just for accessibility but also for retaining users and driving business success.

Quality alt text doesn't just help users with visual impairments. It can improve task completion rates by up to 27% for users with learning differences, enhance voice navigation, and even contribute to better app store ratings, with an average increase of 0.4 stars. These benefits align with both user experience goals and legal requirements, creating a win-win scenario.

From a legal standpoint, proper alt text ensures compliance with regulations like Section 508, WCAG 2.1, and the ADA. Considering the CDC reports that 1 in 4 adults in the United States has some form of disability, prioritizing accessibility is not just ethical - it's essential for reaching a broader audience and avoiding legal pitfalls.

Alt text also impacts search visibility, with 10% of app-related queries originating from image objects. By optimizing alt text, apps can improve both accessibility and discoverability.

The best practices outlined earlier form a strong framework for creating accessible mobile apps. Whether you're describing a simple button or localizing content for global users, the key is consistency and a focus on user needs. By implementing these strategies, every screen element becomes an opportunity to enhance the user experience and make your app more inclusive.

For development teams - such as those at Zee Palm, known for their expertise in AI, SaaS, and custom app development - embedding accessibility principles from the start saves time, reduces costs, and ensures a seamless user experience.

The 2023 WebAIM Million report revealed that only 60% of home pages included proper alt text for images. This shows there’s still significant room for improvement. By following these practices and regularly testing with screen readers, your app can stay inclusive, functional, and easy to navigate for all users.

FAQs

Why is it important to adapt alt text for different languages and cultural contexts in mobile apps?

Ensuring that alt text is tailored to different languages and cultural contexts allows users from various backgrounds to fully engage with and understand your app. The alt text you provide should be clear, relevant to the cultural setting, and linguistically precise to effectively describe images or multimedia for all users, including those relying on assistive technologies.

Cultural subtleties, idiomatic phrases, and regional differences in interpretation play a significant role in how alt text is perceived. By customizing alt text to fit the user's language and cultural expectations, you not only enhance accessibility but also create a better user experience. This approach makes your app more welcoming and usable for a global audience.

What are the best ways for developers to write concise and meaningful alt text for screen reader users?

When crafting alt text for screen readers, aim to highlight the key details of an image or multimedia element. Keep it short and to the point, ensuring it effectively communicates the purpose of the visual content without unnecessary repetition.

Focus on what matters most in the given context. For instance, describe only the details that are relevant to the user’s understanding. If an image is purely decorative and doesn’t contribute meaningful information, it’s better to leave the alt text empty (alt="") to prevent unnecessary distractions for screen reader users.

What mistakes should I avoid when writing alt text for images and multimedia in mobile apps?

When crafting alt text for mobile apps, steer clear of these frequent missteps:

  • Being too vague or generic: Descriptions like "image" or "photo" don’t provide any useful context for users.
  • Including unnecessary details: Stick to concise descriptions that focus on the image's purpose.
  • Overlooking the image's role: Highlight what’s significant about the image within the app’s context.
  • Using redundant phrases like "image of" or "picture of": Screen readers already inform users that it’s an image, so there’s no need to repeat it.
  • Leaving alt text blank: Skipping alt text for key images or multimedia can create accessibility challenges.

Avoiding these mistakes helps create a more inclusive and user-friendly experience for everyone.

Related Blog Posts