ImageView Name

What We Check For

Focusable image elements must have an accessible name so that TalkBack can announce meaningful information about the image. Images that convey information need a content description; purely decorative images should not receive focus at all.

At a Glance

• This rule has a critical impact for users
• Informative images must have a contentDescription that accurately describes what the image conveys
• Decorative images should not receive focus individually — hide them from assistive technology
• Avoid vague descriptions like "image" or "icon" — describe the meaning or purpose of the image
• TalkBack reads the contentDescription aloud; if it's missing, the image is silent to screen reader users

Impact to Users

People using TalkBack are most affected by issues found by this rule. When an ImageView conveys information visually but has no accessible name, TalkBack will announce nothing. Users who rely on screen readers will miss that information entirely.

Decorative images that incorrectly receive focus can create a disruptive experience, creating noise during navigation without communicating anything meaningful.

Informative images should use contentDescription to provide any necessary context and details through TalkBack.

Confirm ImageView Name Issue

1. Turn on TalkBack
2. Perform a "touch to explore" gesture on the image
3. One of the following will happen:
   • For informative images:
     • Inaccessible: The element receives focus but TalkBack announces nothing meaningful, or announces only a file name
     • Accessible: Receives focus and announces a meaningful description
   • For decorative images:
     • Inaccessible: The image receives focus individually and TalkBack announces nothing useful
     • Accessible: Does not receive focus individually (within a group is accepted)

Fix Issues

To resolve ImageView Name issues, provide a contentDescription for images that convey information, and remove focus from purely decorative images. The description should convey the same information a sighted user gets from the image. As a best practice, describe the image's meaning in context, not only its visual appearance.

XML

For informational images, set contentDescription directly in your layout.

  <ImageView
      android:id="@+id/promo_banner"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:contentDescription="Promotional banner: Ask your travel agent about our latest deals!"
      android:src="@drawable/promo_banner" />

For decorative images, set importantForAccessibility="no" to hide them from TalkBack.

  <ImageView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:importantForAccessibility="no"
      android:src="@drawable/background" />

For programmatic association, use setContentDescription in code:

  ImageView image = findViewById(R.id.promo_banner);
  image.setContentDescription("Promotional banner: Ask your travel agent about our latest deals!");

Compose

For informative images, set a descriptive contentDescription on Image.

  Image(
      painter = painterResource(id = R.drawable.promo_banner),
      contentDescription = "Promotional banner: Ask your travel agent about our latest deals!"
  )

For decorative, set the contentDescription on Image as null to hide them from TalkBack.

  Image(
      painter = painterResource(id = R.drawable.background),
      contentDescription = null
  )

Native Android

Set a contentDescription on informative images to describe their purpose.

ImageView image = .......;
image.setContentDescription("Promotional banner: Ask your travel agent about our latest deals!");

React Native

If an image conveys information the user needs, mark it as accessible={true} and provide a descriptive value for the accessibilityLabel.

<Image
    ...
    accessible={true}
    accessibilityRole="image"
    accessibilityLabel="Promotional banner: Ask your travel agent about our latest deals!"
/>

If the image is decorative and does not convey unique information, mark it as accessible={false} so that it will not be focusable.

<Image
    ...
    accessible={false}
/>

.NET MAUI

Images that have not been given a content description in .NET MAUI are automatically marked as not important for accessibility. This means that any image not intentionally given a description passes in axe DevTools Mobile as a decorative image, when it may not have been intended to be a decorative image. Ensure all images that convey information or context are provided an appropriate description.

If the image conveys information, set a descriptive SemanticProperties.Description to communicate that information.

<Image
    ...
    SemanticProperties.Description="Promotional banner: Ask your travel agent about our latest deals!"
/> 

Alternatively, provide a visible Label element below the Image element to relay that information.

<StackLayout
    HorizontalOptions="FillAndExpand"
    VerticalOptions="StartAndExpand">        
    <Image
        BindingContext="{x:Reference imageLabel}"
        SemanticProperties.Description="{Binding Path=Text}"
        ...
    /> 

    <Label
         x:Name="imageLabel"
         Text="Promotional banner: Ask your travel agent about our latest deals!"
         ...
    />
</StackLayout>

Flutter

Wrap meaningful images in a Semantics element, with image: true and a descriptive label so the screen reader can announce what the image conveys.

  // Failing — image has no accessible name
  Semantics(
    image: true,
    child: Image.asset('assets/company_logo.png'),
  )

  // Passing — descriptive label provided
  Semantics(
    label: 'Deque company logo',
    image: true,
    child: Image.asset('assets/company_logo.png'),
  )

For decorative images that don't convey meaning, exclude them from the accessibility tree entirely so screen readers skip them:

ExcludeSemantics(
    child: Image.asset('assets/decorative_divider.png'),
)

Can I Ignore This Rule?

ImageView Name has a Critical impact for users, and we strongly recommend remediating all issues found. An informative image without an accessible name is entirely invisible to TalkBack users, and they receive no information about what the image communicates. Ignore this rule only when you have verified that the image is truly decorative and receives no independent focus. Learn more about ignoring rules.

Resources

Deque University Course Pages

• 1.1.1 Non-text Content (A)

Note: Full access to Deque University resources requires a subscription.

Other Resources

• Web Content Accessibility Guidelines (WCAG) 2.0, W3C Recommendation
  • Success Criterion 1.1.1 - Non-text Content
• WCAG 2.0 Understanding Docs
  • Understanding 1.1.1 A - Non-text Content