Actieve Controlenaam

Wat We Controleren

Een interactief element moet een toegankelijke naam hebben voor assistieve technologieën zoals VoiceOver en Voice Control.

Mislukt Voorbeeld ❌

Geen naam (accessibilityLabel) ingesteld.

VoiceOver leest "Button"

Voice Control — gebruiker zegt „Meldingen“
Element reageert niet omdat het geen naam heeft

Geslaagd Voorbeeld ✅

accessibilityLabel=
'Notifications'

VoiceOver leest "Notifications, button"

Voice Control — gebruiker zegt „Meldingen“
Element activeert omdat zijn naam overeenkomt

In een Oogopslag

• Deze regel heeft een kritische impact op gebruikers
• Elk interactief element heeft een naam nodig: knoppen, links en invoervelden moeten allemaal een toegankelijke naam hebben die VoiceOver kan aankondigen
• Als een interactief element geen zichtbare tekst heeft, geef er expliciet een door accessibilityLabel te gebruiken om het een betekenisvolle naam te geven
• Laat VoiceOver niet zonder iets om te zeggen: een element dat alleen zijn rol of waarde aankondigt - zonder naam - geeft gebruikers geen nauwkeurige context van wat het doet
• VoiceOver zal proberen iets aan te kondigen (zoals de tekst van de knop of de naam van de afbeelding), dus is het het beste om een nauwkeurige en intentionele naam te geven

Impact op Gebruikers

Mensen die VoiceOver gebruiken worden het meest getroffen. Een interactief element zonder naam zal de volledige context of het doel niet overbrengen aan de persoon die ermee interacteert.

Wanneer een interactief element - zoals een knop, formelement of aangepaste controle - geen toegankelijke naam heeft, heeft VoiceOver niets om aan te kondigen wanneer dit element wordt gefocust. Bijvoorbeeld, je zou een knop kunnen hebben met een afbeelding van een onderlijnde pijl die laat zien dat de gebruiker kan downloaden. Zonder een toegankelijke naam zal VoiceOver alleen "Knop, dubbel tikken om te activeren" aankondigen.

Deze regel heeft ook invloed op mensen die Voice Control gebruiken. Voice Control-gebruikers die proberen het element te activeren door het zichtbare label uit te spreken, zullen merken dat het niet reageert.

Bevestig Probleem Met Actieve Controlenaam

1. Zet VoiceOver aan
2. Focus op het interactieve element
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.

Los Problemen op

Om problemen met Actieve Control op te lossen, voeg een toegankelijkheidslabel toe aan elk interactief element zodat VoiceOver een betekenisvolle naam heeft om aan te kondigen. Zorg ervoor dat de naam die je kiest het zichtbare label van het element bevat.

Zorg ervoor dat de naam die je kiest, de actie beschrijft, niet het uiterlijk. Een pictogram van een vergrootglas moet worden gelabeld als „Zoeken“, niet als „vergrootglas pictogram“.

Als het doel van een element verandert afhankelijk van de status (bijv. een Afspelen/Pauze-knop), update de naam telkens wanneer de status verandert.

UIKit

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

button.accessibilityLabel = "Deque Systems Website"

SwiftUI

Zorg ervoor dat de tekst van het element betekenisvol is of voorzie een accessibilityLabel als er meer context nodig is.

Gebruikscase: Knop met een afbeelding als label

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

Combineer eventueel een ouder element (bijv. generieke omhulling) en zijn kinderen (bijv. tekst en een knop) om één element te maken. Als er geen betekenisvolle tekst beschikbaar is, stel een accessibilityLabel in op het hele zicht zoals hieronder weergegeven.

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)
        // .accessibilityLabel("Axe DevTools for iOS") <-- Add when `Text` is missing to ensure a name is present
}

React Native

Om een probleem te verhelpen dat door deze regel is gevonden, voeg een accessibilityLabel toe aan het interactieve element.

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

Wanneer elementen zijn gegroepeerd binnen een omhullende View, voeg de accessible en de accessibilityLabel eigenschappen eraan toe:

<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

Gebruik de tooltip eigenschap op IconButton om een toegankelijke naam te geven. Dit stelt de naam in die VoiceOver aankondigt.

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

Wanneer je een zichtbaar label met een interactief element groepeert, wikkel ze in MergeSemantics zodat VoiceOver ze combineert tot één focusbaar element:

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

Kan Ik Deze Regel Negeren?

Deze regel heeft een kritische impact op gebruikers en mag niet genegeerd worden. Een naamloos interactief element is een van de meest fundamentele toegankelijkheidsfouten. VoiceOver- en Voice Control-gebruikers zullen moeite hebben om een element zonder toegankelijke naam te gebruiken. Neem maatregelen om alle gevallen van dit probleem op te lossen voordat je kwesties met een lagere prioriteit aanpakt.

Veelgestelde Vragen

Wanneer ik VoiceOver gebruik hoor ik de inhoud voorlezen nadat ik het element gefocust heb. Waarom faalt deze regel nog steeds? Als een element geen gedefinieerde naam heeft, zal de schermlezer vaak zijn waarde aankondigen. Echter, de waarde is geen vervanging voor de ontbrekende toegankelijke naam. Specifiek voor afbeeldingen in knoppen, kan VoiceOver de bestandsnaam van de afbeelding aankondigen. Zelfs als de bestandsnaam beschrijvend is, is dit geen vervanging voor het ontbrekende toegankelijke naamkenmerk.

Bronnen

Deque University Cursus Pagina's

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

  Let op: Volledige toegang tot Deque University bronnen vereist een abonnement.

Andere bronnen

• Richtlijnen voor Toegankelijkheid van Webinhoud (WCAG) 2.1
  • Begrijpen van SC 4.1.2, Naam, Rol, Waarde (Niveau A)