Bijbehorende Tekst

Wat We Controleren

Een interactief element moet zijn toegankelijke naam verkrijgen van een nabijgelegen label beschikbaar voor ondersteunende technologieën zoals VoiceOver en Voice Control.

Mislukt Voorbeeld ❌

Het veld "E-mailadres" is gefocust, maar de tekst die visueel beschikbaar is, is not announced by VoiceOver

VoiceOver kondigt aan "Text field, blank" - alleen de rol en waarde, zonder naam

Gebruikers kunnen niet zien welke informatie het veld verwacht

Geslaagd Voorbeeld ✅

Het zichtbare label "E-mailadres" komt overeen met wat wordt aangekondigd door VoiceOver

VoiceOver kondigt aan "Email address, text field, blank" - naam, rol en waarde allemaal aanwezig

Gebruikers weten precies welke informatie het veld verwacht

In Eén Oogopslag

• Deze regel heeft een serieuze tot kritieke impact, afhankelijk van of het zichtbare label focusbaar is
• Interactieve elementen moeten hun toegankelijke naam ontlenen aan het zichtbare label dat hen beschrijft
• VoiceOver kondigt alleen de rol en waarde van een element aan als zijn toegankelijke naam ontbreekt

Impact op Gebruikers

Mensen die VoiceOver gebruiken worden het meest beïnvloed. Een interactief element dat visueel gekoppeld is aan een beschrijvend label moet die relatie ook doorgeven via tekst voor ondersteunende technologie.

Wanneer een schuifregelaar, schakelaar of andere controle een nabijgelegen zichtbaar label heeft maar geen toegankelijke naam die overeenkomt met dat label, horen VoiceOver-gebruikers alleen de rol en waarde van het element, niet zijn doel. Voice Control-gebruikers kunnen ook worden beïnvloed wanneer het gesproken label niet overeenkomt met de toegankelijke naam van de bediening.

Bevestig Geassocieerd Tekst Probleem

1. Schakel VoiceOver in
2. Richt je op het interactieve element
3. Eén van de volgende dingen zal gebeuren:
   • Ongeschikt: VoiceOver zal het geassocieerde label niet als de naam van het element aankondigen - alleen zijn rol en waarde als die aanwezig zijn
   • Geschikt: VoiceOver zal het geassocieerde label als de naam van het element aankondigen

Los Problemen op

Om een Geassocieerd Tekst probleem op te lossen, wijs de tekst van het zichtbare label toe als de toegankelijke naam van het interactieve element. Dit zorgt ervoor dat VoiceOver de juiste naam aankondigt en stemt de ondersteunende technologie-ervaring af op wat ziende gebruikers kunnen waarnemen. Verberg het losstaande labelelement in de toegankelijkheidsboom om te voorkomen dat het twee keer wordt aangekondigd.

UIKit

Stel de accessibilityLabel in op het interactieve element om overeen te komen met de tekst van het nabijgelegen label, en verberg dan het label uit de toegankelijkheidsboom:

toggle.accessibilityLabel = label.text
label.isAccessibilityElement = false

SwiftUI

Gebruik de .accessibilityLabel() modifier op het interactieve element, waarbij de tekst van het zichtbare label wordt doorgegeven als de toegankelijke naam:

@State private var payment: CGFloat = 0
private let sliderLabel = "Payment"
var body: some View {
    VStack {
        Text("\(Int(payment)) \(sliderLabel)")
        Slider(value: $payment, in: 0...20).accessibilityLabel(sliderLabel)
    }
}

React Native

Zorg ervoor dat zichtbare tekst die een interactief element begeleidt, is opgenomen in de accessibilityLabel prop van de bediening:

<Text style={{ color: 'black', fontSize: 22 }}> Light Level </Text>
<Slider accessibilityLabel='Light Level'/>

Wanneer zichtbare tekst en een interactief element zijn gegroepeerd binnen een focusbare omhullende View, zorg ervoor dat de zichtbare tekst is opgenomen in de accessibilityLabel prop van de omhullende View:

<View
  accessible={true}
  accessibilityElementsHidden={false}
  accessibilityLabel='Light Level'
>
  <Text
    style={{ color: 'black', fontSize: 22 }}
    accessible={false}
  >
    Light Level
  </Text>
  <Slider accessible={false}/>
</View>

Flutter

Wikkel het zichtbare label en het interactieve element in een MergeSemantics widget zodat ze beide worden blootgesteld aan ondersteunende technologie als een enkele focusbare node. VoiceOver zal het zichtbare label aankondigen als onderdeel van de toegankelijke naam van het element:

  MergeSemantics(
    child: Row(
      children: [
        const Text('The Lights'),
        Switch(
          value: _value,
          onChanged: (v) => setState(() => _value = v),
        ),
      ],
    ),
  )

Kan Ik Deze Regel Negeren?

Geassocieerde Tekst heeft een Serieuze tot Kritieke impact voor gebruikers, en we bevelen sterk aan om dit probleem op te lossen. Omdat VoiceOver-gebruikers volledig vertrouwen op de toegankelijke naam om te begrijpen wat een interactief element doet, maakt een ontbrekende associatie deze elementen functioneel onbruikbaar voor ondersteunende technologie. Meer informatie over regels negeren.

Bronnen

Deque University Cursus Pagina's

• Succescriterium 4.1.2 - Naam, Rol, Waarde
• 4.1.2a Naam, Rol, Waarde

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

Andere Bronnen

• Web Content Accessibility Richtlijnen (WCAG) 2.0, W3C Aanbeveling
  • Succescriterium 4.1.2 - Naam, Rol, Waarde
• WCAG 2.0 Begrijpingsdocumenten
  • Begrijpen van 4.1.2 A - Naam, Rol, Waarde