Nombre del ImageView

Qué Verificamos

Los elementos de imagen enfocables deben tener un nombre accesible para que VoiceOver pueda anunciar información significativa sobre la imagen. Las imágenes que transmiten información necesitan una etiqueta de accesibilidad; las imágenes puramente decorativas no deben recibir enfoque.

A Simple Vista

• Esta regla tiene un impacto crítico para los usuarios
• Las imágenes informativas deben tener un accessibilityLabel que describa con precisión lo que transmite la imagen
• Las imágenes decorativas no deben recibir enfoque — escóndalas de la tecnología asistida
• Evite descripciones vagas como "image" o "icon" — describa el significado o propósito de la imagen
• VoiceOver lee el accessibilityLabel en voz alta; si falta, la imagen está en silencio para los usuarios de lectores de pantalla

Ejemplo Fallido ❌

name = {none}

VoiceOver solo anuncia el rol
"Image"

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

Ejemplo Aprobado ✅

name = "Horizonte del centro al atardecer"

VoiceOver anuncia the name and role

El usuario está informado sobre el contenido de la imagen

Impacto para los Usuarios

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

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

Las imágenes informativas deben usar accessibilityLabel para proporcionar el contexto y los detalles necesarios a través de VoiceOver.

Confirmar Problema de Nombre de ImageView

1. Active VoiceOver
2. Deslice a la derecha para navegar a la imagen, o arrastre su dedo por la pantalla para explorar por tacto
3. Ocurrirá una de las siguientes situaciones:
   • Para imágenes informativas:
     • Inaccesible: El elemento recibe enfoque pero VoiceOver no anuncia nada significativo, o solo anuncia un nombre de archivo
     • Accesible: Recibe enfoque y anuncia una descripción significativa
   • Para imágenes decorativas:
     • Inaccesible: La imagen recibe enfoque individualmente y VoiceOver no anuncia nada útil
     • Accesible: No recibe enfoque individualmente (dentro de un grupo es aceptable)

Solucionar Problemas

Para resolver los problemas de Nombre de ImageView, proporcione un accessibilityLabel para 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 un usuario vidente obtiene de la imagen. Como mejor práctica, describa el significado de la imagen en contexto, no solo su apariencia visual.

UIKit

Un problema encontrado por esta regla es causado por no usar accessibilityLabel, o por marcar incorrectamente una imagen como un elemento de accesibilidad.

En storyboard:

1. Navegue hasta la imagen
2. Confirme que el Panel de Inspectores esté visible
3. Seleccione el Inspector de Identidad
4. Si la imagen transmite información que el usuario necesita, bajo "Accesibilidad", escriba la información en el campo de texto "Etiqueta"
5. Si la imagen no transmite información que el usuario necesita, bajo "Accesibilidad", deseleccione la casilla "Activado"

En código:

Si la imagen transmite información que el usuario necesita, dé una accessibilityLabel descriptiva para comunicar esa información.

image.accessibilityLabel = "Promotional banner: Ask your travel agent about our latest deals!"

Para imágenes decorativas que no transmiten significado, marque isAccessibilityElement como 'false' para que no sea enfocada.

image.isAccessibilityElement = false

SwiftUI

Si una imagen transmite información que el usuario necesita, establezca .accessibility(label: Text("<meaningful description>")) en la imagen. Alternativamente, use el inicializador Image, que incluye el parámetro de etiqueta.

Image("format_info", label: Text("Promotional banner: Ask your travel agent about our latest deals!"))

Si la imagen no transmite la información que necesita el usuario, como cuando es decorativa o un fondo, por ejemplo, escóndala de la tecnología de asistencia.

Image("background_blue")
    .accessibility(hidden: true)

React Native

Si una imagen transmite la información que necesita el usuario, 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!"
/>

Marca las imágenes decorativas que no transmiten significado como accessible={false} para que no sean enfocables.

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

.NET MAUI

Las imágenes que no se les haya 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 intencionadamente una descripción pasa en axe DevTools Mobile como una imagen decorativa, cuando puede que no se pretendiera que fuese decorativa. Asegúrate de que todas las imágenes que transmiten información o contexto tengan una descripción adecuada.

Si la imagen proporciona al usuario información, establece un SemanticProperties.Description descriptivo para comunicar esa información.

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

Alternativamente, proporciona 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

Envuelve 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 la imagen transmite.

  // 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úyelas 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 nombre de ImageView tiene un Impacto crítico para los usuarios, y recomendamos encarecidamente remediar todos los problemas encontrados. Una imagen informativa sin un nombre accesible es totalmente invisible para los usuarios de VoiceOver, y no reciben ninguna información sobre lo que la imagen comunica. Ignora esta regla solo cuando hayas verificado que la imagen es realmente decorativa y no recibe enfoque independiente. Aprende más sobre ignorando reglas.

Recursos

Páginas del curso 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

• Pautas de Accesibilidad para el 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
  • Comprendiendo 1.1.1 A - Contenido no textual