Actieve Controlenaam

Elke interactieve weergave moet een toegankelijke naam hebben voor hulpmiddelen zoals VoiceOver en Voice Control.

Impact

Mensen die VoiceOver gebruiken, worden het meest getroffen. Een besturingselement zonder naam zal de volledige context of het doel niet doorgeven aan de persoon die met de besturingselementen omgaat.

Bevestiging

1. Zet VoiceOver aan
2. Focus op de besturing
3. Een van de volgende dingen zal gebeuren:
   • Ontoegankelijk: Het zal zijn naam niet aankondigen, alleen zijn rol en waarde indien aanwezig.
   • Toegankelijk: Het zal zijn naam aankondigen in VoiceOver.

Hoe te repareren

UIKit

Om een probleem te verhelpen dat door deze regel is gevonden, voegt u een accessibilityLabel toe aan de controle.

button.accessibilityLabel = "Deque Systems Website"

SwiftUI

Zorg ervoor dat de tekst van de controle betekenisvol is of geef een accessibilityLabel als meer context nodig is.

Gebruikscasus: Knop met een afbeelding als label

Zorg ervoor dat de afbeelding een betekenisvolle naam heeft. Weet dat dit geen optie is bij ondersteuning van meerdere talen. Als de naam niet haalbaar is, stel een accessibilityLabel in op de afbeelding.

Combineer eventueel de controle en zijn subweergaven tot één element. Als er geen betekenisvolle tekst beschikbaar is, stel een accessibilityLabel in voor de hele weergave zoals hieronder wordt getoond.

var body: some View {
    HStack(alignment: .center, spacing: 10,
           content: {
        Text("axe DevTools for iOS")
        Spacer()
        Button(action: { openLink() },
               label: {
            Image(systemName: "arrow.up.forward.app")
                .accessibilityHidden(true)
                .frame(minWidth: 50, minHeight: 50)
        })
        .accessibility(removeTraits: .isStaticText)
        .accessibility(removeTraits: .isButton)
        .accessibility(addTraits: .isLink)
    }).padding(16)
        .accessibilityElement(children: .combine)
}

React Native

Om een probleem te verhelpen dat door deze regel is gevonden, voegt u een accessibilityLabel toe aan de besturingscomponent.

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

Wanneer elementen gegroepeerd zijn binnen een omvattende weergave, voeg het accessible prop, en de accessibilityLabel prop toe aan de omvattende weergave:

<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>