Name der Bildansicht

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

Fokussierbare Bildelemente sollten einen aussagekräftigen, zugänglichen Namen bereitstellen, der für unterstützende Technologien wie TalkBack und Voice Access verfügbar ist.

Auswirkung

Menschen, die TalkBack verwenden, sind am stärksten von den gefundenen Problemen betroffen. Wenn ein ImageView Element Benutzern mit Sehbehinderung Informationen bereitstellt, aber keinen Namen angibt, wird TalkBack nichts vorlesen und diese Informationen fehlen für die Benutzererfahrung mit TalkBack.

Informative Bilder sollten contentDescription nutzen, um den erforderlichen Kontext und alle erforderlichen Details über TalkBack bereitstellen.

Bestätigung

TalkBack aktivieren
Führen Sie eine „Berühren zum Erkunden“-Geste auf der Steuerung aus
Für informative Bilder:
- Zugänglich: Erhält den Fokus und liest eine aussagekräftige Beschreibung vor.
Für dekorative Bilder:
- Zugänglich: Erhält nicht individuell den Fokus. Wird innerhalb einer Gruppe akzeptiert.

So beheben Sie das Problem

Natives 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 fügt vielen Elementen die Barrierefreiheitsrolle nicht automatisch hinzu. Vergewissern Sie sich, accessibilityRole="image" zu allen Bildern hinzuzufügen, die für unterstützende Technologien verfügbar sein sollen. Die axe Accessibility Linter VSCode Extension und axe DevTools Linter umfassen jetzt React Native-Unterstützung, die Ihnen helfen kann, derartige Fehler vor dem UI-Test zu erkennen.

Wenn das Bild Informationen darstellt, die der Benutzer benötigt, geben Sie ihm ein beschreibendes Label accessibilityLabel um diese Informationen weiterzugeben, und setzen Sie das zugängliche Attribut auf „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."
/>

Wenn das Bild keine eindeutigen Informationen enthält, z. B. einen Hintergrund oder ein dekoratives Bild, machen Sie es nicht fokussierbar:

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

.NET MAUI

Bilder, die in .NET MAUI keine Inhaltsbeschreibung erhalten haben, werden automatisch als für die Barrierefreiheit nicht wichtig gekennzeichnet. Dies bedeutet, dass jedes Bild, dem nicht absichtlich eine Beschreibung zugewiesen wurde, in axe DevTools Mobile als dekoratives Bild durchgeht, obwohl es möglicherweise nicht als dekoratives Bild gedacht war. Stellen Sie sicher, dass alle Bilder, die Informationen oder Kontext vermitteln, mit einer entsprechenden Beschreibung versehen sind.

Option 1: Wenn das Bild Informationen darstellt, die der Benutzer benötigt, geben Sie ihm ein beschreibendes Label SemanticProperties.Description um diese Informationen zu übermitteln.

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

Option 2: Wenn das Bild Informationen darstellt, die der Benutzer benötigt, stellen Sie einen Link Label unter dem Element Image zur Verfügung, um diese Informationen zu übermitteln.

<StackLayout
    HorizontalOptions="FillAndExpand"
    VerticalOptions="StartAndExpand">        
    <Image
        BindingContext="{x:Reference imageLabel}"
        SemanticProperties.Description="{Binding Path=Text}"
        ...
    /> 

    <Label
         x:Name="imageLabel"
         Text="Ein Formular, bei dem das Namensfeld in einem roten Feld hervorgehoben ist und darunter die Fehlermeldung „Ungültiger Name: Sonderzeichen werden nicht akzeptiert“ angezeigt wird."
         ...
    />
</StackLayout>