Nombre de ImageView

Qué Verificamos

Los elementos de imagen que son enfocables deben tener un nombre accesible para que TalkBack pueda anunciar información significativa sobre la imagen. Las imágenes que transmiten información necesitan una descripción de contenido; las imágenes puramente decorativas no deben recibir enfoque en absoluto.

A Simple Vista

• Esta regla tiene un impacto crítico para los usuarios
• Las imágenes informativas deben tener un contentDescription que describa con precisión lo que transmite la imagen
• Las imágenes decorativas no deben recibir enfoque individualmente — ocúltelas de la tecnología asistiva
• Evite descripciones vagas como "imagen" o "ícono" — describa el significado o propósito de la imagen
• TalkBack lee en voz alta el contentDescription; si falta, la imagen está silenciosa para los usuarios de lectores de pantalla

Ejemplo Fallido ❌

name = {none}

TalkBack anuncia solo el rol
"Imagen"

El usuario no recibe la información transmitida por la imagen

Ejemplo Exitoso ✅

name = "Horizonte del centro al atardecer"

TalkBack anuncia the name and role

El usuario está informado sobre el contenido de la imagen

Impacto en los Usuarios

Las personas que usan TalkBack son las más afectadas por los problemas encontrados por esta regla. Cuando un ImageView transmite información visualmente pero no tiene un nombre accesible, TalkBack no anuncia nada. Los usuarios que dependen de lectores de pantalla perderán esa información por completo.

Las imágenes decorativas que reciben incorrectamente enfoque pueden crear una experiencia disruptiva, creando ruido durante la navegación sin comunicar nada significativo.

Las imágenes informativas deben usar contentDescription para proporcionar cualquier contexto y detalle necesario a través de TalkBack.

Confirmar el Problema del Nombre de ImageView

1. Activa TalkBack
2. Realiza un gesto de "tocar para explorar" en la imagen
3. Una de las siguientes cosas sucederá:
   • Para imágenes informativas:
     • No accesible: El elemento recibe foco pero TalkBack no anuncia nada significativo, o solo anuncia un nombre de archivo
     • Accesible: Recibe foco y anuncia una descripción significativa
   • Para imágenes decorativas:
     • No accesible: La imagen recibe enfoque individualmente y TalkBack no anuncia nada útil
     • Accesible: No recibe enfoque individualmente (dentro de un grupo es aceptado)

Solucionar Problemas

Para resolver problemas de Nombre de ImageView, proporcione un contentDescription para las imágenes que transmiten información y elimine el enfoque de imágenes puramente decorativas. La descripción debe transmitir la misma información que obtiene un usuario vidente de la imagen. Como mejor práctica, describa el significado de la imagen en contexto, no solo su apariencia visual.

XML

Para imágenes informativas, establece contentDescription directamente en tu diseño.

  <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" />

Para imágenes decorativas, establece importantForAccessibility="no" para ocultarlas de TalkBack.

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

Para la asociación programática, usa setContentDescription en el código:

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

Componer

Para imágenes informativas, establece un contentDescription descriptivo en Image.

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

Para decorativas, establece el contentDescription en Image como null para ocultarlas de TalkBack.

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

Android Nativo

Establece un contentDescription en imágenes informativas para describir su propósito.

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

React Native

Si una imagen transmite información que el usuario necesita, márcala como accessible={true} y proporciona un valor descriptivo para el accessibilityLabel.

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

Si la imagen es decorativa y no transmite información única, márcala como accessible={false} para que no sea enfocada.

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

.NET MAUI

Las imágenes que no se les ha dado una descripción de contenido en .NET MAUI se marcan automáticamente como no importantes para la accesibilidad. Esto significa que cualquier imagen que no se le haya dado intencionalmente una descripción pasa en axe DevTools Mobile como una imagen decorativa, cuando quizás no se pretendía que fuera una imagen decorativa. Asegúrese de que todas las imágenes que transmiten información o contexto incluyan una descripción adecuada.

Si la imagen transmite información, establezca un SemanticProperties.Description descriptivo para comunicar esa información.

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

Alternativamente, proporcione un elemento Label visible debajo del elemento Image para transmitir esa información.

<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

Envuelva las imágenes significativas en un elemento Semantics, con image: true y un label descriptivo para que el lector de pantalla pueda anunciar lo que transmite la imagen.

  // 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'),
  )

Para las imágenes decorativas que no transmiten significado, exclúyalas completamente del árbol de accesibilidad para que los lectores de pantalla las omitan:

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

¿Puedo ignorar esta regla?

El elemento ImageView tiene un impacto crítico para los usuarios, y recomendamos encarecidamente corregir todos los problemas encontrados. Una imagen informativa sin un nombre accesible es completamente invisible para los usuarios de TalkBack, y no reciben ninguna información sobre lo que comunica la imagen. Ignore esta regla solo cuando haya verificado que la imagen es verdaderamente decorativa y no recibe enfoque independiente. Aprende más sobre ignorando reglas.

Recursos

Páginas de cursos de Deque University

• 1.1.1 Contenido no textual (A)

Nota: El acceso completo a los recursos de Deque University requiere una suscripción.

Otros Recursos

• Guías de Accesibilidad al Contenido Web (WCAG) 2.0, Recomendación del W3C
  • Criterio de Éxito 1.1.1 - Contenido no textual
• Documentos de Comprensión de WCAG 2.0
  • Comprensión del 1.1.1 A - Contenido no textual