Schakelaarnaam

Wat We Controleren

Elk Switch-element moet een toegankelijke naam hebben die zijn doel beschrijft voor ondersteunende technologieën zoals TalkBack en Voice Access.

Fout Voorbeeld ❌

Schakelaar heeft geen toegankelijke naam.

TalkBack leest "Off, Switch."

Voice Access — gebruiker heeft geen zichtbaar label om aan te spreken om de schakelaar te activeren.

Goed Voorbeeld ✅

Schakelaar is gelabeld met zichtbare tekst via labelFor of groepering.

TalkBack leest "Dark Mode, Off, Switch."

Voice Access — gebruiker zegt "Donkere Modus" om de schakelaar te activeren.

In Één Oogopslag

• Deze regel heeft een cruciale impact voor gebruikers
• Elke schakelaar heeft een toegankelijke naam nodig die beschrijft wat hij bedient
• Een naam zoals "Donkere Modus" is veel nuttiger dan helemaal geen naam
• De naam moet, indien mogelijk, komen van een zichtbaar label, door gebruik van labelFor of groeperingstechnieken
• Vermijd het direct instellen van een inhoudsbeschrijving op de schakelaar tenzij de status (bijv. 'aan'/'uit') behouden blijft

Impact op Gebruikers

Mensen die blind zijn, slechtziend, of schakeltoegang gebruiken, zijn afhankelijk van de toegankelijke naam om te begrijpen wat een schakelaar doet voordat ze ermee interactie hebben. Zonder een naam kondigt TalkBack enkel 'aan' of 'uit' aan — wat gebruikers geen context biedt over wat ze aan het besturen zijn.

Bevestig Schakelaar Naamprobleem

1. Zet TalkBack aan
2. Probeer je te concentreren op een Switch-element
3. Een van de volgende dingen zal gebeuren:
   • Ontoegankelijk: TalkBack kondigt alleen 'aan' of 'uit' aan.
   • Toegankelijk: TalkBack kondigt de naam van de schakelaar en 'aan' of 'uit' aan.

Los Problemen op

Een schakelaar heeft een toegankelijke naam nodig zodat ondersteunende technologie kan aankondigen wat de schakelaar bedient. De beste aanpak is om het label en de schakelaar te groeperen of te koppelen zodat ze als één toegankelijk element worden behandeld.

XML

U kunt een label in het naburige element geven of de schakelaar met zijn label omhullen. U kunt ook de contentDescription manipuleren, maar zorg ervoor dat de 'aan' en 'uit' status voor TalkBack-aankondigingen behouden blijft.

layouts/activity.xml
<TextView
     android:id="@+id/label"
     android:text="@string/label_text"
     android:labelFor="@+id/switch">
<Switch
     android:id="@+id/switch"/>

...

strings.values/
<string name="label_text">Dark Mode</string>

Compose

Groepeer een Text en Switch in een samengevoegde layout zoals een Rij. Pas de schakelaarrol en toggelbare modifier toe op de Text, en wis semantiek op de Switch met behulp van Modifier.clearAndSetSemantics { }. Op deze manier zal TalkBack zich richten op het label, in plaats van rechtstreeks op het schakelaarelement.

val (isSwitchChecked, setSwitchState) = remember { 
    mutableStateOf(true) 
}

Row(modifier = Modifier.semantics(mergeDescendants = true) { }) {
    Text(
        text = "Get Emails",
        modifier = Modifier
            .toggleable(
                value = isSwitchChecked,
                onValueChange = { 
                    setSwitchState(!isSwitchChecked) 
                },
                role = Role.Switch
            )
    )

    Switch(
        checked = isSwitchChecked,
        onCheckedChange = { 
            setSwitchState(!isSwitchChecked) 
        },
        modifier = Modifier
            .clearAndSetSemantics { }
    )
}

React Native

Om een schakelaar en label in React Native te combineren, omhul beide componenten binnen een TouchableOpacity-component:

<TouchableOpacity
   onPress={() => {
     setSwitchOn(!switchOn)
     Alert.alert("Switch on : " + !switchOn)}}
   style={styles.subContainer}
   accessible={true}
   accessibilityLabel={"Subscribe"}
   accessibilityRole='switch'>
      <Text style={{ fontSize: 22 }}>
         Subscribe
      </Text>
      <Switch
         importantForAccessibility='no-hide-descendants'
         onValueChange={() => {
            setSwitchOn(!switchOn)
            Alert.alert("Switch on : " + !switchOn)} }
        value={switchOn}
   />
</TouchableOpacity>

Om ervoor te zorgen dat dit correct werkt voor alle gebruikers:

• Stel accessible={true} in op de TouchableOpacity zodat de groep samen gefocust is
• Zorg ervoor dat de accessibilityLabel eigenschap van de TouchableOpacity exact overeenkomt met het zichtbare tekstlabel
• Stel de accessibilityRole in op switch om het juiste bestuurdtype te communiceren
• Stel importantForAccessibility='no-hide-descendants' in op het Switch-element zodat het niet individueel kan worden gefocust
• Voeg een onPress-actie toe voor het afhandelen van het gedrag van de schakelaar wanneer deze geactiveerd wordt

Kan ik Deze Regel Negeren?

Schakelaar Naam heeft een Kritische impact voor gebruikers. Een schakelaar zonder toegankelijke naam kan niet worden begrepen of gebruikt door schermlezergebruikers. We raden ten zeerste aan om dit probleem in alle gevallen te herstellen. Leer meer over regels negeren.

Bronnen

Deque University Cursus Pagina's

• Zie Native Mobile Android onder 4.1.2 Naam, Rol, Waarde (A)

Opmerking: Volledige toegang tot Deque University bronnen vereist een abonnement.

Andere Bronnen

• Web Content Accessibility Guidelines (WCAG) 2.0, W3C Aanbeveling - Succescriterium 4.1.2 - Naam, Rol, Waarde
• WCAG 2.1 Begrijpende Documentatie - Begrijpen 4.1.2 A - Naam, Rol, Waarde