ImageView Naam

Focusbare afbeeldingselementen moeten een betekenisvolle toegankelijke naam bieden die beschikbaar is voor ondersteunende technologieën zoals VoiceOver en Voice Control.

Impact

Mensen die gebruik maken van VoiceOver worden het meest beïnvloed. Informatieve afbeeldingen moeten hun context, informatie of doel voorlezen wanneer ze door VoiceOver worden gefocust.

Bevestiging

1. Zet VoiceOver aan
2. Probeer de afbeelding te focussen
3. Een van de volgende situaties zal zich voordoen:
   • Niet toegankelijk: Afbeelding is focusbaar maar kondigt geen Naam aan in VoiceOver.
   • Toegankelijk: Afbeelding is niet focusbaar omdat het geen unieke informatie weergeeft.
   • Toegankelijk: Afbeelding is focusbaar en heeft een Naam.

Hoe op te lossen

UIKit

Een probleem gevonden door deze regel is veroorzaakt door het niet gebruiken van accessibilityLabel, of door een afbeelding onterecht te markeren als een toegankelijkheidselement.

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 toont die de gebruiker nodig heeft, schrijf dan onder „Toegankelijkheid“ de informatie in het tekstveld „Label“.
5. Als de afbeelding geen informatie toont die de gebruiker nodig heeft, deselecteer dan onder „Toegankelijkheid“ het selectievakje „Ingeschakeld“.

In code:

Als de afbeelding informatie toont die de gebruiker nodig heeft, geef het een beschrijvende accessibilityLabel om die informatie over te brengen:

image.accessibilityLabel = "A form highlighting the name field in a red box with an error message below that reads Invalid name: special characters are not accepted."

Als de afbeelding geen informatie toont die de gebruiker nodig heeft, zoals een achtergrond- of decoratieve afbeelding, maak het dan niet focusbaar:

image.isAccessibilityElement = false

SwiftUI

Als een afbeelding informatie biedt die de gebruiker nodig heeft, kunt u of een .accessibility(label: Text("Accessibility Label Here")) view modifier op de afbeelding instellen, of u kunt de Image-initialisator gebruiken, die de parameter label bevat.

Image("format_info", label: Text("A form highlighting the name field in a red box with an error message below that reads Invalid name: special characters are not accepted."))

Als de afbeelding geen informatie biedt die de gebruiker mogelijk nodig heeft, zoals een achtergrond- of decoratieve afbeelding, verberg deze dan met de onderstaande view modifier:

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

React Native

Als de afbeelding informatie toont die de gebruiker nodig heeft, geef het een beschrijvende accessibilityLabel om die informatie over te brengen, en stel de accessible-eigenschap in op true:

<Image
    ...
    accessible={true}
    accessibilityLabel="A form highlighting the name field in a red box with an error message below that reads Invalid name: special characters are not accepted."
/>

Als de afbeelding geen informatie toont die de gebruiker nodig heeft, zoals een achtergrond- of decoratieve afbeelding, maak het dan niet focusbaar:

<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.

Optie 1: Als de afbeelding informatie toont die de gebruiker nodig heeft, geef het een beschrijvende SemanticProperties.Description om die informatie over te brengen.

<Image
    ...
    SemanticProperties.Description="A form highlighting the name field in a red box with an error message below that reads Invalid name: special characters are not accepted."
/> 

Optie 2: Als de afbeelding informatie toont die de gebruiker nodig heeft, voorzie een Label 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="A form highlighting the name field in a red box with an error message below that reads Invalid name: special characters are not accepted."
         ...
    />
</StackLayout>