ImageView-naam

Waar We Op Controleren

Focusbare afbeeldingselementen moeten een toegankelijke naam hebben zodat TalkBack zinvolle informatie over de afbeelding kan aankondigen. Afbeeldingen die informatie overbrengen hebben een inhoudsbeschrijving nodig; puur decoratieve afbeeldingen mogen helemaal geen focus krijgen.

In één Oogopslag

• Deze regel heeft een cruciale impact voor gebruikers
• Informatieve afbeeldingen moeten een contentDescription hebben die nauwkeurig beschrijft wat de afbeelding overbrengt
• Decoratieve afbeeldingen mogen niet individueel focus krijgen — verberg ze voor ondersteunende technologie
• Vermijd vage beschrijvingen zoals „afbeelding“ of „icoon“ — beschrijf de betekenis of het doel van de afbeelding
• TalkBack leest de contentDescription voor; als dit ontbreekt, blijft de afbeelding stil voor gebruikers van schermlezers

Voorbeeld van een Fout ❌

name = {geen}

TalkBack kondigt alleen de rol aan
„Afbeelding“

De gebruiker ontvangt de informatie die de afbeelding overbrengt niet

Voorbeeld van een Succès ✅

name = "Skyline van de binnenstad bij zonsondergang"

TalkBack kondigt aan the name and role

Gebruiker wordt geïnformeerd over de inhoud van de afbeelding

Impact voor Gebruikers

Mensen die TalkBack gebruiken worden het meest getroffen door problemen die door deze regel worden geconstateerd. Wanneer een ImageView visueel informatie overbrengt maar geen toegankelijke naam heeft, zal TalkBack niets aankondigen. Gebruikers die op schermlezers vertrouwen, missen die informatie volledig.

Decoratieve afbeeldingen die ten onrechte focus krijgen, kunnen een storende ervaring veroorzaken, omdat ze lawaai creëren tijdens het navigeren zonder iets zinvols te communiceren.

Informatieve afbeeldingen moeten contentDescription gebruiken om eventuele noodzakelijke context en details via TalkBack te bieden.

Bevestig het ImageView Naam Probleem

1. Zet TalkBack aan
2. Voer een „aanraken om te verkennen“-gebaar uit op de afbeelding
3. Een van de volgende dingen zal gebeuren:
   • Voor informatieve afbeeldingen:
     • Niet Toegankelijk: Het element krijgt focus, maar TalkBack kondigt niets zinvols aan, of kondigt alleen een bestandsnaam aan
     • Toegankelijk: Krijgt focus en kondigt een zinvolle beschrijving aan
   • Voor decoratieve afbeeldingen:
     • Niet Toegankelijk: De afbeelding krijgt individueel focus en TalkBack kondigt niets nuttigs aan
     • Toegankelijk: Krijgt niet individueel focus (binnen een groep is geaccepteerd)

Problemen Oplossen

Om ImageView Naamproblemen op te lossen, geef een contentDescription voor afbeeldingen die informatie overbrengen, en verwijder focus van puur decoratieve afbeeldingen. De beschrijving moet dezelfde informatie overbrengen die een ziende gebruiker van de afbeelding krijgt. Als beste praktijk beschrijft u de betekenis van de afbeelding binnen de context, niet alleen het visuele uiterlijk.

XML

Voor informatieve afbeeldingen, stel contentDescription direct in uw lay-out in.

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

Voor decoratieve afbeeldingen, stel importantForAccessibility="no" in om ze voor TalkBack te verbergen.

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

Voor programmatische associatie, gebruik setContentDescription in code:

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

Compose

Voor informatieve afbeeldingen, stel een beschrijvende contentDescription in op Image.

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

Voor decoratieve, stel de contentDescription op Image in als null om ze voor TalkBack te verbergen.

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

Native Android

Stel een contentDescription in op informatieve afbeeldingen om hun doel te beschrijven.

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

React Native

Als een afbeelding de informatie bevat die de gebruiker nodig heeft, markeer het dan als accessible={true} en geef een beschrijvende waarde voor de accessibilityLabel.

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

Als de afbeelding decoratief is en geen unieke informatie overbrengt, markeer het dan als accessible={false} zodat het niet focusbaar zal zijn.

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

.NET MAUI

Afbeeldingen die geen inhoudsbeschrijving hebben gekregen in .NET MAUI worden automatisch als niet belangrijk voor toegankelijkheid gemarkeerd. Dit betekent dat elke afbeelding zonder opzettelijke beschrijving slaagt in axe DevTools Mobile als een decoratieve afbeelding, terwijl het mogelijk niet de bedoeling was om een decoratieve afbeelding te zijn. Zorg ervoor dat alle afbeeldingen die informatie of context overbrengen een passende beschrijving krijgen.

Als de afbeelding informatie overbrengt, stel een beschrijvende SemanticProperties.Description in om die informatie te communiceren.

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

Geef eventueel een zichtbaar Label-element onder het Image-element om die informatie over te brengen.

<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

Wikkel betekenisvolle afbeeldingen in een Semantics-element, met image: true en een beschrijvende label zodat de schermlezer kan aankondigen wat de afbeelding overbrengt.

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

Voor decoratieve afbeeldingen die geen betekenis overbrengen, sluit ze volledig uit van de toegankelijkheidsboom, zodat schermlezers ze overslaan:

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

Kan ik deze regel negeren?

ImageView Naam heeft een Kritieke impact voor gebruikers, en we raden sterk aan om alle gevonden problemen te verhelpen. Een informatieve afbeelding zonder toegankelijke naam is volledig onzichtbaar voor TalkBack-gebruikers, en zij ontvangen geen informatie over wat de afbeelding communiceert. Negeer deze regel alleen als je hebt geverifieerd dat de afbeelding echt decoratief is en geen zelfstandige focus ontvangt. Meer informatie over regels negeren.

Middelen

Deque University Cursuspagina's

• 1.1.1 Niet-tekstuele Inhoud (A)

Opmerking: Volledige toegang tot de bronnen van Deque University vereist een abonnement.

Andere Bronnen

• Web Content Accessibility Guidelines (WCAG) 2.0, W3C Aanbeveling
  • Succescriterium 1.1.1 - Niet-tekstuele Inhoud
• WCAG 2.0 Begrip Documenten
  • Begrip 1.1.1 A - Niet-tekstuele Inhoud