ImageView-Name

Was wir überprüfen

Fokussierbare Bildelemente müssen einen zugänglichen Namen haben, damit VoiceOver sinnvolle Informationen über das Bild ansagen kann. Bilder, die Informationen vermitteln, benötigen ein Zugänglichkeitslabel; rein dekorative Bilder sollten überhaupt keinen Fokus erhalten.

Auf einen Blick

• Diese Regel hat eine kritische Auswirkung für die Benutzer
• Informative Bilder müssen ein accessibilityLabel haben, das genau beschreibt, was das Bild vermittelt
• Dekorative Bilder sollten keinen Fokus erhalten — verstecken Sie sie vor unterstützenden Technologien
• Vermeiden Sie vage Beschreibungen wie „Bild“ oder „Icon“ — beschreiben Sie die Bedeutung oder den Zweck des Bildes
• VoiceOver liest das accessibilityLabel laut vor; wenn es fehlt, bleibt das Bild für Screenreader-Nutzer stumm

Fehlerhaftes Beispiel ❌

name = {none}

VoiceOver kündigt nur die Rolle an
„Bild“

Der Benutzer erhält die durch das Bild vermittelte Information nicht

Bestandenes Beispiel ✅

name = „Skyline der Innenstadt bei Sonnenuntergang“

VoiceOver kündigt the name and role

Der Benutzer wird über den Inhalt des Bildes informiert

Auswirkung auf die Benutzer

Menschen, die VoiceOver nutzen, sind am stärksten von Problemen betroffen, die durch diese Regel gefunden werden. Wenn ein Bild visuell Informationen vermittelt, aber keinen zugänglichen Namen hat, wird VoiceOver nichts ansagen. Benutzer, die auf Screenreader angewiesen sind, werden diese Informationen vollständig verpassen.

Dekorative Bilder, die fälschlicherweise fokussiert werden, können eine störende Erfahrung schaffen, indem sie Lärm während der Navigation erzeugen, ohne etwas Sinnvolles zu kommunizieren.

Informative Bilder sollten accessibilityLabel verwenden, um jeglichen notwendigen Kontext und Details durch VoiceOver bereitzustellen.

ImageView-Problem bestätigen

1. VoiceOver einschalten
2. Wischen Sie nach rechts, um zum Bild zu navigieren, oder ziehen Sie Ihren Finger über den Bildschirm, um es durch Berührung zu erkunden
3. Eines der folgenden Dinge wird passieren:
   • Für informative Bilder:
     • Nicht zugänglich: Das Element erhält Fokus, aber VoiceOver kündigt nichts Sinnvolles an oder nur einen Dateinamen
     • Zugänglich: Erhält Fokus und kündigt eine sinnvolle Beschreibung an
   • Für dekorative Bilder:
     • Nicht zugänglich: Das Bild erhält einzeln Fokus und VoiceOver kündigt nichts Nützliches an
     • Zugänglich: Erhält nicht einzeln Fokus (innerhalb einer Gruppe ist akzeptiert)

Probleme beheben

Um ImageView-Name-Probleme zu beheben, geben Sie ein accessibilityLabel für Bilder an, die Informationen vermitteln, und entfernen Sie den Fokus von rein dekorativen Bildern. Die Beschreibung sollte dieselbe Information vermitteln, die ein sehender Benutzer vom Bild erhält. Als Best Practice beschreiben Sie die Bedeutung des Bildes im Kontext, nicht nur sein visuelles Erscheinungsbild.

UIKit

Ein von dieser Regel gefundenes Problem wird dadurch verursacht, dass accessibilityLabel nicht benutzt wird oder ein Bild fälschlicherweise als Zugänglichkeitselement markiert wird.

Im Storyboard:

1. Navigieren Sie zum Bild
2. Bestätigen Sie, dass das Inspektoren-Panel sichtbar ist
3. Wählen Sie den Identitätsinspektor aus
4. Wenn das Bild Informationen vermittelt, die der Nutzer braucht, schreiben Sie unter „Zugänglichkeit“ die Informationen in das Textfeld „Label“
5. Wenn das Bild keine Informationen vermittelt, die der Nutzer braucht, deaktivieren Sie unter „Zugänglichkeit“ das Kontrollkästchen „Aktiviert“

Im Code:

Wenn das Bild Informationen vermittelt, die der Nutzer braucht, geben Sie ihm ein beschreibendes accessibilityLabel, um diese Informationen zu vermitteln.

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

Für dekorative Bilder, die keine Bedeutung vermitteln, markieren Sie isAccessibilityElement als 'false', damit sie nicht fokussierbar sind.

image.isAccessibilityElement = false

SwiftUI

Wenn ein Bild Informationen vermittelt, die der Nutzer braucht, setzen Sie .accessibility(label: Text("<meaningful description>")) auf das Bild. Alternativ verwenden Sie den Image Initialisierer, der den Label-Parameter beinhaltet.

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

Wenn das Bild keine Informationen vermittelt, die der Benutzer benötigt – wenn es beispielsweise dekorativ oder ein Hintergrund ist –, verbergen Sie es vor unterstützenden Technologien.

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

React Native

Wenn ein Bild Informationen vermittelt, die der Benutzer benötigt, markieren Sie es als accessible={true} und geben Sie einen beschreibenden Wert für den accessibilityLabel an.

<Image
    ...
    accessible={true}
    accessibilityRole="image"
    accessibilityLabel="Promotional banner: Ask your travel agent about our latest deals!"
/>

Markieren Sie dekorative Bilder, die keine Bedeutung vermitteln, als accessible={false}, damit sie nicht fokussierbar sind.

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

.NET MAUI

Bilder, die in .NET MAUI nicht mit einer Inhaltsbeschreibung versehen wurden, werden automatisch als nicht wichtig für die Barrierefreiheit markiert. Das bedeutet, dass jedes Bild, dem nicht absichtlich eine Beschreibung gegeben wurde, im Axe DevTools Mobile als dekoratives Bild durchgeht, auch wenn es nicht als dekoratives Bild gedacht war. Stellen Sie sicher, dass alle Bilder, die Informationen oder Kontext vermitteln, eine geeignete Beschreibung erhalten.

Wenn das Bild dem Benutzer Informationen liefert, legen Sie eine beschreibende SemanticProperties.Description fest, um diese Informationen zu kommunizieren.

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

Alternativ stellen Sie ein sichtbares Label-Element unter dem Image-Element bereit, um diese Informationen weiterzugeben.

<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

Wickeln Sie bedeutungsvolle Bilder in ein Semantics-Element mit image: true und einem beschreibenden label, damit der Bildschirmleser ankündigen kann, was das Bild vermittelt.

  // 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'),
  )

Für dekorative Bilder, die keine Bedeutung vermitteln, schließen Sie sie vollständig aus dem Barrierefreiheitsbaum aus, damit Bildschirmleser sie überspringen:

ExcludeSemantics(
    child: Image.asset('assets/decorative_divider.png'),
)

Kann ich diese Regel ignorieren?

Der Name von ImageView hat ein Kritische Auswirkungen für Benutzer, und wir empfehlen dringend, alle gefundenen Probleme zu beheben. Ein informatives Bild ohne einen zugänglichen Namen ist für VoiceOver-Benutzer völlig unsichtbar, und sie erhalten keine Informationen darüber, was das Bild kommuniziert. Ignorieren Sie diese Regel nur, wenn Sie bestätigt haben, dass das Bild wirklich dekorativ ist und keinen unabhängigen Fokus erhält. Erfahren Sie mehr über Regeln ignorieren.

Ressourcen

Deque University Kursseiten

• 1.1.1 Nicht-Text-Inhalt (A)

Hinweis: Der vollständige Zugang zu den Ressourcen der Deque University erfordert ein Abonnement.

Weitere Ressourcen

• Web Content Accessibility Guidelines (WCAG) 2.0, W3C-Empfehlung
  • Erfolgskriterium 1.1.1 - Nicht-Text-Inhalt
• WCAG 2.0 Erläuterungsdokumente
  • Verständnis 1.1.1 A - Nicht-Text-Inhalt