ImageView Naam

Waar We Naar Kijken

Focusbare afbeeldingelementen moeten een toegankelijke naam hebben, zodat VoiceOver zinvolle informatie over de afbeelding kan aankondigen. Afbeeldingen die informatie overbrengen hebben een toegankelijkheidslabel nodig; puur decoratieve afbeeldingen mogen helemaal geen focus ontvangen.

In Één Oogopslag

• Deze regel heeft een kritieke impact voor gebruikers
• Informatieve afbeeldingen moeten een accessibilityLabel hebben die nauwkeurig beschrijft wat de afbeelding overbrengt
• Decoratieve afbeeldingen mogen geen focus krijgen — verborgen houden voor ondersteunende technologie
• Vermijd vage beschrijvingen zoals „afbeelding“ of „icoon“ — beschrijf de betekenis of het doel van de afbeelding
• VoiceOver leest de accessibilityLabel voor; als deze ontbreekt, blijft de afbeelding stil voor schermlezergebruikers

Fout Voorbeeld ❌

name = {none}

VoiceOver kondigt alleen de rol aan
„Afbeelding“

Gebruiker ontvangt de informatie die door de afbeelding wordt overgebracht niet

Correct Voorbeeld ✅

name = „Skyline van de binnenstad bij zonsondergang“

VoiceOver kondigt aan the name and role

Gebruiker wordt geïnformeerd over de inhoud van de afbeelding

Impact op Gebruikers

Mensen die VoiceOver gebruiken worden het meest getroffen door problemen die door deze regel worden gevonden. Wanneer een afbeelding visueel informatie overbrengt maar geen toegankelijke naam heeft, zal VoiceOver niets aankondigen. Gebruikers die afhankelijk zijn van schermlezers zullen die informatie volledig missen.

Decoratieve afbeeldingen die ten onrechte focus ontvangen, kunnen een storende ervaring creëren, door ruis te veroorzaken tijdens het navigeren zonder enige betekenisvolle communicatie.

Informatieve afbeeldingen moeten accessibilityLabel gebruiken om de benodigde context en details via VoiceOver te bieden.

Bevestig ImageView Naam Probleem

1. Zet VoiceOver aan
2. Veeg naar rechts om naar de afbeelding te navigeren, of sleep uw vinger over het scherm om door aanraking te verkennen
3. Een van de volgende dingen zal gebeuren:
   • Voor informatieve afbeeldingen:
     • Ontoegankelijk: Het element ontvangt focus, maar VoiceOver kondigt niets betekenisvols aan, of alleen een bestandsnaam
     • Toegankelijk: Ontvangt focus en kondigt een betekenisvolle beschrijving aan
   • Voor decoratieve afbeeldingen:
     • Ontoegankelijk: De afbeelding ontvangt individueel focus en VoiceOver kondigt niets nuttigs aan
     • Toegankelijk: Ontvangt niet individueel focus (binnen een groep is geaccepteerd)

Los Problemen Op

Om ImageView Naam problemen op te lossen, biedt een accessibilityLabel voor afbeeldingen die informatie overbrengen en verwijder de focus van puur decoratieve afbeeldingen. De beschrijving moet dezelfde informatie overbrengen als een ziende gebruiker van de afbeelding krijgt. Als beste praktijk beschrijf je de betekenis van de afbeelding in context, niet alleen zijn visuele verschijning.

UIKit

Een probleem dat door deze regel wordt gevonden, wordt veroorzaakt door het niet gebruiken van accessibilityLabel of door onjuist een afbeelding als toegankelijke element te markeren.

In storyboard:

1. Navigeer naar de afbeelding
2. Controleer of het Inspectors-paneel zichtbaar is
3. Selecteer de Identity Inspector
4. Als de afbeelding informatie overbrengt die de gebruiker nodig heeft, schrijf dan de informatie in het tekstveld "Label" onder "Toegankelijkheid"
5. Als de afbeelding geen informatie overbrengt die de gebruiker nodig heeft, deselecteer dan het selectievakje "Ingeschakeld" onder "Toegankelijkheid"

In code:

Als de afbeelding informatie overbrengt die de gebruiker nodig heeft, geef hem dan een beschrijvende accessibilityLabel om die informatie over te brengen.

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

Voor decoratieve afbeeldingen die geen betekenis overbrengen, markeer isAccessibilityElement als 'false' zodat het niet focusbaar zal zijn.

image.isAccessibilityElement = false

SwiftUI

Als een afbeelding informatie overbrengt die de gebruiker nodig heeft, stel dan .accessibility(label: Text("<meaningful description>")) in op de afbeelding. Gebruik alternatief de Image initializer, die de labelparameter bevat.

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

Als de afbeelding geen informatie overbrengt die de gebruiker nodig heeft - wanneer het decoratief is, of een achtergrond, bijvoorbeeld - verberg het dan voor ondersteunende technologie.

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

React Native

Als een afbeelding informatie overbrengt die de gebruiker nodig heeft, markeer deze 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!"
/>

Markeer decoratieve afbeeldingen die geen betekenis overbrengen als accessible={false} zodat het niet focusbaar zal zijn.

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

.NET MAUI

Afbeeldingen die in .NET MAUI geen inhoudsomschrijving hebben gekregen, worden automatisch gemarkeerd als niet belangrijk voor toegankelijkheid. Dit betekent dat elke afbeelding die niet opzettelijk een omschrijving heeft gekregen, slaagt in axe DevTools Mobile als een decoratieve afbeelding, terwijl het misschien niet bedoeld was als decoratieve afbeelding. Zorg ervoor dat alle afbeeldingen die informatie of context overbrengen worden voorzien van een passende beschrijving.

Als de afbeelding de gebruiker van informatie voorziet, stel dan een beschrijvende SemanticProperties.Description in om die informatie over te brengen.

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

Geef alternatief 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

Omvat zinvolle afbeeldingen in een Semantics-element met image: true en een beschrijvende label zodat de schermlezer kan aankondigen wat de afbeelding uitdrukt.

  // 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 kritische impact voor gebruikers, en we raden sterk aan om alle gevonden problemen te verhelpen. Een informatieve afbeelding zonder een toegankelijke naam is volledig onzichtbaar voor VoiceOver-gebruikers, en zij ontvangen geen informatie over wat de afbeelding communiceert. Negeer deze regel alleen wanneer u hebt geverifieerd dat de afbeelding echt decoratief is en geen onafhankelijke focus krijgt. Leer meer over regels negeren.

Middelen

Deque University Cursus Pagina's

• 1.1.1 Niet-tekstuele inhoud (A)

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

Andere Middelen

• Web Content Accessibility Guidelines (WCAG) 2.0, W3C Aanbeveling
  • Succescriterium 1.1.1 - Niet-tekstuele inhoud
• WCAG 2.0 Begrijpen Docs
  • Begrijpen 1.1.1 A - Niet-tekstuele inhoud