Aktiver Ansichtsname

Was Wir Überprüfen

Ein interaktives Element sollte einen zugänglichen Namen für unterstützende Technologien wie TalkBack und Sprachzugriff verfügbar haben.

Fehlendes Beispiel ❌

Kein Name auf dem interaktiven Element gesetzt

TalkBack liest "Button"

Voice Access — Benutzer spricht „Search“
Element reagiert nicht, da es keinen Namen hat

Erfolgreiches Beispiel ✅

`contentDescription="Search"`

TalkBack liest "Search, button"

Voice Access — Benutzer spricht „Search“
Element aktiviert, weil sein Name übereinstimmt

Auf einen Blick

• Diese Regel hat eine kritische Auswirkung für Benutzer
• Jedes interaktive Element benötigt einen Namen: Schaltflächen, Links, benutzerdefinierte Steuerungen usw. erfordern einen zugänglichen Namen, den TalkBack ankündigen kann
• Wenn ein interaktives Element keinen sichtbaren Text hat, bieten Sie einen explizit mit contentDescription oder accessibilityLabel Eigenschaften an
• Lassen Sie TalkBack nicht ohne etwas zu sagen: Ein Element, das nur seine Rolle oder seinen Wert ankündigt – ohne Namen – gibt Benutzern keinen Kontext, wofür es gedacht ist

Auswirkungen auf Benutzer

Menschen, die TalkBack verwenden, sind am meisten betroffen. Ein interaktives Element ohne Namen wird der Person, die damit interagiert, nicht den vollständigen Kontext oder Zweck übermitteln.

Wenn ein interaktives Element — wie eine Schaltfläche, Bildschaltfläche oder benutzerdefinierte Steuerung — keinen zugänglichen Namen hat, hat TalkBack nichts anzukündigen, wenn dieses Element fokussiert wird. Beispielsweise könnten Sie eine Schaltfläche mit einem Bild eines unterstrichenen Pfeils haben, der anzeigt, dass der Benutzer herunterladen kann. Ohne einen zugänglichen Namen wird TalkBack nur „Schaltfläche, doppeltippen zum Aktivieren.“ ankündigen.

Diese Regel hat auch Auswirkungen auf Benutzer, die Sprachzugriff verwenden. Benutzer des Sprachzugriffs, die versuchen, das Element durch Aussprechen des sichtbaren Beschriftung zu aktivieren, werden feststellen, dass es nicht reagiert.

Bestätigen des Problems des Aktiven Ansichtsnamens

1. TalkBack einschalten
2. Das interaktive Element fokussieren
3. Eines der folgenden wird passieren:
   • Unzugänglich: Es wird seinen Namen nicht ankündigen, nur seine Rolle und seinen Wert, wenn vorhanden.
   • Zugänglich: Es wird seinen Namen in TalkBack ankündigen.

Probleme Beheben

Um Probleme mit dem Aktiven Ansichtsname zu beheben, fügen Sie jedem interaktiven Element ein Textetikett oder eine Inhaltsbeschreibung hinzu, damit TalkBack einen aussagekräftigen Namen ankündigen kann.

Stellen Sie sicher, dass der gewählte Name:

• Die sichtbare Beschriftung des Elements enthält.
• Die Aktion beschreibt, nicht das Erscheinungsbild. Zum Beispiel sollte ein Symbol einer Lupe als „Suche“ und nicht als „Lupe-Symbol“ beschriftet werden.

Wenn sich der Zweck eines Elements basierend auf dem Status ändert (z. B. eine Abspiel-/Pause-Schaltfläche), aktualisieren Sie den Namen bei jeder Statusänderung.

XML

Verwenden Sie die Texteigenschaft oder Inhaltsbeschreibung eines Elements, um sicherzustellen, dass TalkBack genaue Informationen übermitteln kann.

Button button = .......
button.setText("Button's Name");

ImageButton imageButton = .......
imageButton.setContentDescription("Button's Name");

Compose

Kombinieren Sie Bildschaltflächen mit einer Inhaltsbeschreibung oder einem Text, um die Funktion des Elements anzuzeigen.

@Composable
fun EmailIconButton() {
    IconButton(
        onClick = { … },
    ) { 
        Icon(
            painter = painterResource(id = R.drawable.email_icon),
            contentDescription = “Send an Email”
        )
    }
}

Nicht-Bildschaltflächen sollten Text für TalkBack bereitstellen.

@Composable
fun EmailButton() {
    Button(
        modifier = Modifier.semantics { this.contentDescription = “Send an Email” }
        onClick = { … },
    ) { 
        Text(
            text = “Email”
        )
    }
}

React Native

Um ein von dieser Regel gefundenes Problem zu beheben, fügen Sie dem interaktiven Element einen accessibilityLabel hinzu.

<TextInput
  ...
  accessibilityLabel="First Name"
/>

Wenn Elemente innerhalb eines enthaltenen View gruppiert werden, fügen Sie ihm die accessible und accessibilityLabel Eigenschaften hinzu:

<View
   importantForAccessibility='no-hide-descendants'
   accessible={true}
   accessibilityElementsHidden={false}
   accessibilityLabel={"Dark Mode"}
   accessibilityValue={{ text: "" + isEnabled }}
   accessibilityRole='switch'
   onPress={() => { 
      setIsEnabled(!isEnabled) 
    }}
 >            
    <Switch
      trackColor={{ false: 'lightgray', true: 'dimgray' }}
      ios_backgroundColor={'lightgray'}
      thumbColor={'white'}
      onValueChange={ () => {
         setIsEnabled(!isEnabled)
      }}
      value={isEnabled}
      accessibilityElementsHidden={true}
     />
</View>

Flutter

Verwenden Sie die tooltip-Eigenschaft auf IconButton, um einen zugänglichen Namen bereitzustellen. Dies setzt den von TalkBack angekündigten Namen und zeigt auch einen visuellen Tooltip bei langem Drücken an.

  IconButton(
    icon: const Icon(Icons.search),
    tooltip: 'Search',
    onPressed: () {},
  )

Für interaktive Elemente mit nur Symbolkindern, setzen Sie semanticLabel direkt auf Icon:

  ElevatedButton(                                                                                                                                            
    onPressed: () {},
    child: const Icon(Icons.add, semanticLabel: 'Add item'),
  )

Wenn Sie ein sichtbares Label mit einem interaktiven Element gruppieren, umgeben Sie sie mit MergeSemantics, damit TalkBack sie zu einem einzelnen fokussierbaren Element kombiniert:

  MergeSemantics(
    child: Row(
      children: [                                                                                                                                              
        const Text("Dark mode"),
        Switch(                                                                                                                                                
          value: _darkMode,                                                                                                                                  
          onChanged: (value) => setState(() => _darkMode = value),
        ),
      ],
    ),
  )

Kann ich diese Regel ignorieren?

Diese Regel hat eine kritische Auswirkung für Benutzer und sollte nicht ignoriert werden. Ein unbenanntes interaktives Element ist einer der grundlegendsten Barrierefreiheitsfehler. TalkBack- und Sprachzugriff-Benutzer sind faktisch von der Nutzung eines Elements ohne einen zugänglichen Namen ausgeschlossen. Ergreifen Sie Maßnahmen, um alle Vorkommen dieses Problems zu beheben, bevor Sie sich mit weniger dringenden Problemen befassen.

Häufig gestellte Fragen

Wenn ich TalkBack benutze, höre ich den Inhalt laut vorgelesen, nachdem ich das Element fokussiert habe. Warum schlägt diese Regel trotzdem fehl? Wenn einem Element ein definierter Name fehlt, kündigt der Screenreader oft seinen Wert an. Der Wert ist jedoch kein Ersatz für den fehlenden zugänglichen Namen.

Ressourcen

Deque University Kursseiten

• Siehe Native Mobile Android unter 4.1.2a Name, Rolle, Wert (A)

  Hinweis: Für den vollständigen Zugriff auf die Ressourcen der Deque University ist ein Abonnement erforderlich.

Weitere Ressourcen

• Richtlinien für barrierefreie Webinhalte (WCAG) 2.1
  • Verständnis von SC 4.1.2, Name, Rolle, Wert (Level A)