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 VoiceOver und Voice Control verfügbar ist.

Auswirkung

Am stärksten betroffen sind Benutzer von VoiceOver. Wenn VoiceOver auf informative Bilder fokussiert, sollten der Kontext, die Informationen oder der Zweck vorgelesen werden.

Bestätigung

VoiceOver aktivieren
Versuche, das Bild zu fokussieren
Eines der folgenden Ereignisse wird eintreten:
- Nicht zugänglich: Obwohl das Bild fokussierbar ist, gibt es keinen Namen in VoiceOver bekannt.
- Zugänglich: Da das Bild keine eindeutigen Informationen darstellt, ist es nicht fokussierbar.
- Zugänglich: Bild ist fokussierbar und hat einen namen.

So beheben Sie das Problem

UIKit

Ein durch diese Regel gefundenes Problem wird durch die Nichtverwendung von accessibilityLabel oder durch die fälschliche Kennzeichnung eines Bildes als Zugänglichkeitselement verursacht.

Im Storyboard:

Navigieren Sie zum Bild
Bestätigen Sie, dass das Inspektorenfenster sichtbar ist
Wählen Sie den Identitätsinspektor
Wenn das Bild Informationen darstellt, die der Benutzer benötigt, schreiben Sie die Informationen unter „Zugänglichkeit“ in das Textfeld „Label“.
Wenn das Bild nicht die Informationen darstellt, die der Benutzer benötigt, deaktivieren Sie unter „Zugänglichkeit“ das Kontrollkästchen „Enabled“.

Im Code:

Wenn das Bild Informationen darstellt, die der Benutzer benötigt, geben Sie ihm eine Beschreibung, einen Titel accessibilityLabel um diese Informationen zu vermitteln:

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

Wenn das Bild nicht die Informationen enthält, die der Benutzer benötigt (z. B. ein Hintergrund oder ein dekoratives Bild), stellen Sie sicher, dass es nicht fokussierbar ist:

image.isAccessibilityElement = false

tip

In UIKit-Apps ist ein Bild ohne accessibilityLabel mit unterstützender Technologie standardmäßig nicht fokussierbar.

Die Eigenschaften, die wir zur Überprüfung der Fokussierbarkeit aus Apple verwenden, können ungenau sein, wenn für das Bild ein accessibilityIdentifier festgelegt ist. Aufgrund dieses unerwarteten Verhaltens werden Ergebnisse für Probleme mit ImageView-Namen in UIKit-Apps als „Benötigt Überprüfung“ gemeldet. Ein Fehlerbericht wurde bei Apple eingereicht.

SwiftUI

Wenn ein Bild Informationen enthält, die der Benutzer benötigt, können Sie entweder den View-Modifier .accessibility(label: Text("Accessibility Label Here")) für das Bild festlegen oder den Image-Initializer verwenden, der den Label-Parameter enthält.

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

Wenn das Bild keine Informationen enthält, die der Benutzer möglicherweise benötigt, z. B. ein Hintergrund- oder Dekorationsbild, verbergen Sie es mit dem folgenden Ansichtsmodifikator:

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

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 nicht die Informationen enthält, die der Benutzer benötigt (z. B. ein Hintergrund oder ein dekoratives Bild), stellen Sie sicher, dass es nicht fokussierbar ist:

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