ImageView-naam

This page is not available in the language you requested. You have been redirected to the English version of the page.

Link to this page copied to clipboard

Not for use with personal data

Focusbare afbeeldingelementen moeten een betekenisvolle toegankelijke naam bieden die beschikbaar is voor ondersteunende technologieën zoals TalkBack en Voice Access.

Impact

Mensen die TalkBack gebruiken, zullen vooral worden getroffen door gevonden problemen. Als een ImageView gebruikers met zicht voorziet van informatie en geen naam geeft, zal TalkBack niets aankondigen, en die informatie ontbreekt voor gebruikerservaringen met TalkBack.

Informatieve afbeeldingen moeten contentDescription gebruiken om de nodige context en details via TalkBack te bieden.

Bevestiging

Zet TalkBack aan
Voer een "aanraking om te verkennen"-gebaar uit op de bediening
Voor informatieve afbeeldingen:
- Toegankelijk: Krijgt focus en kondigt een betekenisvolle beschrijving aan.
  
  Voor decoratieve afbeeldingen:
- Toegankelijk: Krijgt niet individueel focus. Binnen een groep is dat acceptabel.

Hoe te verhelpen

Native Android

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

React Native

important

React Native voegt niet automatisch de toegankelijkheidsrol toe aan veel elementen. Zorg ervoor dat je accessibilityRole="image" toevoegt aan alle afbeeldingen die beschikbaar moeten zijn voor ondersteunende technologie. De axe Accessibility Linter VSCode Extension en axe DevTools Linter bevatten nu ondersteuning voor React Native, wat je kan helpen om bugs zoals deze te ontdekken vóór UI-tests.

Als de afbeelding informatie weergeeft die de gebruiker nodig heeft, geef het dan een beschrijvend accessibilityLabel om die informatie over te brengen en stel de toegankelijke 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 unieke informatie weergeeft, zoals een achtergrond of decoratieve afbeelding, maak deze dan niet focusbaar:

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

Optie 1: Als de afbeelding informatie weergeeft die de gebruiker nodig heeft, geef het dan een beschrijvend SemanticProperties.Description om die informatie over te dragen.

<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 weergeeft die de gebruiker nodig heeft, geef een Label onder de Image element om die informatie over te dragen.

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