Sinnvoller barrierefreier Name

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

Stellen Sie sicher, dass barrierefreie Namen nicht redundant sind

Not for use with personal data
Best Practice Impact - Minor

Worauf wir achten

Der barrierefreie Name eines Elements sollte seinen Zugänglichkeitsmerkmal nicht enthalten. VoiceOver gibt das Merkmal automatisch wieder, sodass es im Namen zwei Mal vorgelesen wird, wenn es enthalten ist.

Diese Regel setzt eine bewährte Praxis durch, die von Apples Human Interface Guidelines vorgegeben wird. Sie können diese Regel im Mobiles Dashboard ausschalten oder indem Sie Ignorieren der Regel in Tests für iOS.

Fehlendes Beispiel ❌

An iOS phone screen with an article preview buttons to Like, Share, or Save. The Like button has a red focus ring. VoiceOver speech bubble displays the announcement with the element name and trait: 'Like button, Button'.

VoiceOver announces: „Gefällt mir Button, Button“

Das Wort „Button“ ist im barrierefreien Namen enthalten and und wird nochmals als Merkmal angesagt, was zu einer redundanten Ansage führt, die Benutzer von Screenreadern verwirren kann

Gelungenes Beispiel ✅

An iOS phone screen with an article preview buttons to Like, Share, or Save. The Like button has a green focus ring. VoiceOver speech bubble displays the announcement with the element name and trait - 'Like this article, button'

VoiceOver announces: „Gefällt mir dieser Artikel, Button“

Der barrierefreie Name – „Gefällt mir dieser Artikel“ – enthält nicht das Merkmal des Elements

VoiceOver fügt das Merkmal automatisch hinzu, sodass Benutzer jedes Informationsstück genau einmal hören

Auf einen Blick

  • Diese Regel hat eine geringe Auswirkung für Benutzer
  • Der barrierefreie Name eines Elements sollte sein Zugänglichkeitsmerkmal nicht wiederholen – VoiceOver gibt das Merkmal automatisch wieder
  • Ein Beispiel: Ein Button mit dem Namen „Weiter Button“ führt zu einer redundanten Ansage von VoiceOver: „Weiter Button, Button“

Auswirkung auf Benutzer

VoiceOver-Benutzer sind am meisten betroffen. Wenn ein barrierefreier Name das Merkmal des Elements enthält, gibt VoiceOver das Merkmal zwei Mal wieder – zum Beispiel „Weiter Button, Button“ statt „Weiter, Button“. Dies ist redundant und kann für Benutzer von Screenreadern verwirrend oder ablenkend sein.

Sinnvoller barrierefreier Name bestätigen

  1. VoiceOver einschalten
  2. Auf das Element fokussieren
  3. Eines der folgenden wird geschehen:
    • Nicht zugänglich: VoiceOver gibt das Zugänglichkeitsmerkmal des Elements zwei Mal wieder – als Teil des barrierefreien Namens und dann nochmals als Merkmal (z. B. „Weiter Button, Button“)
    • Zugänglich: VoiceOver gibt den barrierefreien Namen wieder, gefolgt vom Merkmal (z. B. „Weiter, Button“)

Probleme beheben

Um ein Problem mit einem sinnvollen barrierefreien Namen zu beheben, stellen Sie sicher, dass der barrierefreie Name das Zugänglichkeitsmerkmal des Elements nicht enthält. VoiceOver fügt das Merkmal automatisch hinzu, wenn es im Namen enthalten ist, führt das zu einer redundanten Ansage.

UIKit

Im Storyboard beheben:

  1. Wählen Sie das Element mit einem MeaningfulAccessibleName Problem aus.
  2. Stellen Sie sicher, dass das Inspektor-Panel sichtbar ist.
  3. Wählen Sie den Identitätsinspektor.
  4. Geben Sie unter Barrierefreiheit ein Label ein, das dem sichtbaren Text entspricht und nicht das Zugänglichkeitsmerkmal des Elements enthält.

Um es im Code zu beheben, stellen Sie sicher, dass der Wert des Zugänglichkeitslabels mit dem gesamten sichtbaren Text auf dem Element übereinstimmt oder diesen enthält und nicht dessen Zugänglichkeitsmerkmal:

button.title = "Next"
button.accessibilityTraits = .button

SwiftUI

Setzen Sie ein Zugänglichkeitslabel, das den sichtbaren Text enthält und nicht das Zugänglichkeitsmerkmal des Elements:

Button(action: {
    openMenu()
}) {
    Text("Next")
}.accessibility(label: Text("Next"))

React Native

Stellen Sie sicher, dass der accessibilityLabel des Elements nicht den accessibilityRole Wert des Elements enthält:

<Button title='Order now' accessibilityLabel='order now' accessibilityRole='button'/>

Flutter

Barrierefreie Namen müssen den Zweck des Elements beschreiben. Vermeiden Sie generische Namen wie „Button“ oder „Bild“ und nehmen Sie die Rolle nicht in den Namen auf. Der Screenreader gibt die Rolle separat wieder.

  // Failing — name includes the role, screen reader says "Search button, button"
  IconButton(
    icon: const Icon(Icons.search),
    tooltip: 'Search button',
    onPressed: () {},
  )

  // Passing — name describes the action, screen reader says "Search, button"
  IconButton(
    icon: const Icon(Icons.search),
    tooltip: 'Search',
    onPressed: () {},
  )

Kann ich diese Regel ignorieren?

Sinnvoller barrierefreier Name hat eine Geringe Auswirkung für Benutzer und setzt eine von Apple empfohlene bewährte Vorgehensweise um, anstatt eine strikte WCAG-Anforderung. Sie können diese Regel vollständig im Mobiles Dashboard ausschalten, oder einzelne Ergebnisse in Ihren iOS-Tests ignorieren. Mehr erfahren über Regeln ignorieren.

Ressourcen

Weitere Ressourcen