ImageView-Name

Was wir überprüfen

Fokussierbare Bildelemente müssen einen barrierefreien Namen haben, damit TalkBack sinnvolle Informationen über das Bild ansagen kann. Bilder, die Informationen vermitteln, benötigen eine Inhaltsbeschreibung; rein dekorative Bilder sollten überhaupt nicht fokussiert werden.

Auf einen Blick

• Diese Regel hat eine entscheidende Auswirkung für Nutzer
• Informationsbilder müssen einen contentDescription haben, der genau beschreibt, was das Bild vermittelt
• Dekorative Bilder sollten nicht einzeln fokussiert werden — verbergen Sie sie vor unterstützenden Technologien
• Vermeiden Sie vage Beschreibungen wie „Bild“ oder „Icon“ — beschreiben Sie die Bedeutung oder den Zweck des Bildes
• TalkBack liest den contentDescription laut vor; fehlt er, bleibt das Bild für Benutzer von Screenreadern stumm

Fehlendes Beispiel ❌

name = {none}

TalkBack kündigt nur die Rolle an
„Bild“

Der Benutzer erhält nicht die vom Bild vermittelten Informationen

Gültiges Beispiel ✅

name = „Skyline der Innenstadt bei Sonnenuntergang“

TalkBack kündigt the name and role

Benutzer wird über den Inhalt des Bildes informiert

Auswirkung auf die Nutzer

Personen, die TalkBack verwenden, sind am stärksten von den durch diese Regel gefundenen Problemen betroffen. Wenn ein ImageView visuell Informationen vermittelt, aber keinen barrierefreien Namen hat, wird TalkBack 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 erzeugen, indem sie während der Navigation Lärm erzeugen, ohne etwas Bedeutendes zu vermitteln.

Informationsbilder sollten contentDescription verwenden, um jeglichen notwendigen Kontext und Details über TalkBack bereitzustellen.

ImageView-Name-Problem bestätigen

1. TalkBack einschalten
2. Führen Sie eine „Zum Erkunden tippen“-Geste auf dem Bild aus
3. Eines der folgenden Dinge wird passieren:
   • Für informative Bilder:
     • Nicht barrierefrei: Das Element wird fokussiert, aber TalkBack kündigt nichts Bedeutendes an oder kündigt nur einen Dateinamen an
     • Barrierefrei: Empfängt Fokus und kündigt eine sinnvolle Beschreibung an
   • Für dekorative Bilder:
     • Nicht barrierefrei: Das Bild wird einzeln fokussiert und TalkBack kündigt nichts Nützliches an
     • Barrierefrei: Wird nicht einzeln fokussiert (innerhalb einer Gruppe ist akzeptiert)

Probleme beheben

Um ImageView-Name-Probleme zu lösen, geben Sie einen contentDescription für Bilder an, die Informationen vermitteln, und entfernen Sie den Fokus von rein dekorativen Bildern. Die Beschreibung sollte die gleichen Informationen vermitteln, die ein sehender Benutzer vom Bild erhält. Als bewährte Methode beschreiben Sie die Bedeutung des Bildes im Kontext und nicht nur sein äußeres Erscheinungsbild.

XML

Für Informationsbilder legen Sie contentDescription direkt in Ihrem Layout fest.

  <ImageView
      android:id="@+id/promo_banner"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:contentDescription="Promotional banner: Ask your travel agent about our latest deals!"
      android:src="@drawable/promo_banner" />

Für dekorative Bilder setzen Sie importantForAccessibility="no", um sie vor TalkBack zu verbergen.

  <ImageView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:importantForAccessibility="no"
      android:src="@drawable/background" />

Für programmatische Zuordnungen verwenden Sie setContentDescription im Code:

  ImageView image = findViewById(R.id.promo_banner);
  image.setContentDescription("Promotional banner: Ask your travel agent about our latest deals!");

Compose

Für informative Bilder setzen Sie einen beschreibenden contentDescription auf Image.

  Image(
      painter = painterResource(id = R.drawable.promo_banner),
      contentDescription = "Promotional banner: Ask your travel agent about our latest deals!"
  )

Für dekorative setzen Sie den contentDescription auf Image als null, um sie vor TalkBack zu verbergen.

  Image(
      painter = painterResource(id = R.drawable.background),
      contentDescription = null
  )

Native Android

Setzen Sie einen contentDescription auf informative Bilder, um ihren Zweck zu beschreiben.

ImageView image = .......;
image.setContentDescription("Promotional banner: Ask your travel agent about our latest deals!");

React Native

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

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

Wenn das Bild dekorativ ist und keine einzigartigen Informationen vermittelt, markieren Sie es als accessible={false}, damit es nicht fokussierbar ist.

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

.NET MAUI

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

Sollte das Bild Informationen vermitteln, setzen Sie eine beschreibende SemanticProperties.Description, um diese Informationen zu kommunizieren.

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

Alternativ können Sie ein sichtbares Label-Element unterhalb des Image-Elements bereitstellen, 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

Umgeben Sie aussagekräftige Bilder mit einem Semantics-Element, versehen Sie es mit image: true und einer beschreibenden label, damit der Screenreader ansagen 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'),
  )

Bei dekorativen Bildern, die keine Bedeutung vermitteln, schließen Sie sie vollständig aus dem Baum für die Barrierefreiheit aus, damit Screenreader sie überspringen:

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

Kann ich diese Regel ignorieren?

ImageView Name hat eine kritischer Einfluss für Benutzer, und wir empfehlen dringend, alle gefundenen Probleme zu beheben. Ein informatives Bild ohne zugänglichen Namen ist für TalkBack-Nutzer völlig unsichtbar, und sie erhalten keine Informationen darüber, was das Bild vermittelt. Ignorieren Sie diese Regel nur, wenn Sie sicher gestellt 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: Vollständiger Zugriff auf die Ressourcen von Deque University erfordert ein Abonnement.

Weitere Ressourcen

• Richtlinien für barrierefreie Webinhalte (WCAG) 2.0, W3C-Empfehlung
  • Erfolgskriterium 1.1.1 - Nicht-Text-Inhalt
• WCAG 2.0 Verständnis-Dokumente
  • Verständnis 1.1.1 A - Nicht-Text-Inhalt