Actieve Weergavenaam

Waar Wij Op Controleren

Een interactief element moet een toegankelijke naam hebben beschikbaar voor ondersteunende technologieën zoals TalkBack en Voice Access.

Fout Voorbeeld ❌

Geen naam ingesteld op het interactieve element

TalkBack leest "Button"

Voice Access — gebruiker zegt „Zoeken“
Element reageert niet omdat het geen naam heeft

Goed Voorbeeld ✅

`contentDescription="Search"`

TalkBack leest "Search, button"

Voice Access — gebruiker zegt „Zoeken“
Element activeert omdat de naam overeenkomt

In Eén Oogopslag

• Deze regel heeft een kritische impact voor gebruikers
• Elk interactief element heeft een naam nodig: knoppen, links, aangepaste controles, enz. vereisen een toegankelijke naam die TalkBack kan aankondigen
• Als een interactief element geen zichtbare tekst heeft, geef er dan expliciet een op met behulp van contentDescription of accessibilityLabel eigenschappen
• Laat TalkBack niet met niets achter: een element dat alleen zijn rol of waarde aankondigt — zonder naam — geeft gebruikers geen context voor wat het doet

Impact voor Gebruikers

Mensen die TalkBack gebruiken worden het meest beïnvloed. Een interactief element zonder naam zal de volledige context of het doel niet doorgeven aan de persoon die ermee interageert.

Wanneer een interactief element — zoals een knop, afbeeldingsknop of aangepaste control — geen toegankelijke naam heeft, heeft TalkBack niets om aan te kondigen wanneer dit element gefocust is. Bijvoorbeeld, je zou een knop kunnen hebben met een afbeelding van een onderstreepte pijl die aangeeft dat de gebruiker kan downloaden. Zonder een toegankelijke naam zal TalkBack alleen „Knop, dubbel tikken om te activeren.“ aankondigen.

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

Bevestig Actieve Weergave Naam Probleem

1. Schakel TalkBack in
2. Focus op het interactieve element
3. Een van de volgende dingen zal gebeuren:
   • Onafhankelijk: Het zal zijn naam niet aankondigen, alleen zijn rol en waarde indien aanwezig.
   • Toegankelijk: Het zal zijn naam aankondigen in TalkBack.

Problemen Oplossen

Om Actieve Weergave Naam problemen op te lossen, voeg een tekstlabel of inhoudsomschrijving toe aan elk interactief element zodat TalkBack een betekenisvolle naam heeft om aan te kondigen.

Zorg ervoor dat de naam die u selecteert:

• Bevat het zichtbare label van het element.
• Beschrijft de actie, niet het uiterlijk. Bijvoorbeeld, een pictogram van een vergrootglas moet „Zoeken“ worden genoemd, niet „vergrootglaspictogram“.

Als het doel van een element verandert op basis van de status (bijv. een Afspelen/Pauzeren-knop), werk de naam bij zodra de status verandert.

XML

Gebruik de tekst-eigenschap of inhoudsomschrijving van een element om ervoor te zorgen dat TalkBack nauwkeurige informatie heeft om te delen.

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

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

Componeren

Koppel afbeeldingsknoppen met een inhoudsomschrijving of tekst om het doel van het element aan te geven.

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

Niet-afbeeldingsknoppen moeten tekst bieden voor TalkBack.

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

React Native

Om een probleem gevonden door deze regel op te lossen, voeg een accessibilityLabel toe aan het interactieve element.

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

Wanneer elementen gegroepeerd zijn 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 door TalkBack wordt aangekondigd en toont ook een visuele tooltip bij langdurig indrukken.

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

Voor interactieve elementen met alleen pictogram-kinderen, stel semanticLabel direct op de Icon in:

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

Wanneer een zichtbaar label met een interactief element wordt gegroepeerd, wikkel ze in MergeSemantics zodat TalkBack ze combineert tot een enkel 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 voor gebruikers en mag niet genegeerd worden. Een naamloos interactief element is een van de meest fundamentele toegankelijkheidsfouten. TalkBack- en Voice Access-gebruikers worden feitelijk uitgesloten van het gebruik van een element zonder toegankelijke naam. Neem stappen om alle gevallen van dit probleem te verhelpen voordat u problemen met een lagere prioriteit aanpakt.

Veelgestelde Vragen

Wanneer ik TalkBack gebruik, hoor ik de inhoud luidop voorlezen na focus op het element. Waarom mislukt 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.

Bronnen

Deque University Cursus Pagina's

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

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

Andere bronnen

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