Genest Element met Focus

Waar We Op Letten

Focusbare elementen mogen niet genest zijn binnen klikbare ouder-elementen. Wanneer een niet-interactief kind-element focusbaar is, richt assistieve technologie zich daarop in plaats van op de klikbare ouder — waardoor de interactieve rol van het element nooit wordt aangekondigd.

Deze regel controleert alle toegankelijkheids-focusbare bedieningen die zelf niet interactief zijn. Als zo'n bedieningselement zich binnen een klikbare ouder bevindt, is het inherent interactief, maar zal het geen rol aankondigen. Het element wordt gemarkeerd als een schending van toegankelijkheid.

Voorbeeld van een Fout ❌

De kaart is klikbaar, maar de profielfoto erin is afzonderlijk focusbaar.

TalkBack kondigt de rol van de kaart of de hint "Dubbel tikken om te activeren" niet aan, en richt de focus in plaats daarvan op en kondigt het innerlijke element aan.

Gebruikers weten niet dat de kaart interactief is, en het gefocuste element is niet klikbaar.

Voorbeeld van Succes ✅

Het innerlijke element is niet langer afzonderlijk focusbaar.

TalkBack richt de focus op de kaart zelf en kondigt de inhoud, rol en "Dubbel tikken om te activeren" aan.

Gebruikers begrijpen dat de kaart interactief is en kunnen deze activeren.

In een Oogopslag

• Deze regel heeft een Kritische impact voor gebruikers van TalkBack en Voice Access
• Wanneer een kind-element focus steelt van een klikbare ouder, gaat de interactieve rol verloren
• TalkBack zal niet "Dubbel tikken om te activeren" aankondigen als het gefocuste element niet zelf klikbaar is
• De oplossing is altijd om de focusbaarheid van het genestelde element te verwijderen en niet om er een rol aan toe te voegen
• Containerviews die geen actie hebben, moeten niet klikbaar worden gelaten — dit voorkomt valse positieven

Impact voor Gebruikers

Wanneer assistieve technologie geen rol aankondigt, weten blinde of slechtziende gebruikers die op TalkBack vertrouwen niet dat ze een actie kunnen uitvoeren. Bijvoorbeeld, TalkBack richt zich op een innerlijk element en kondigt alleen de tekst aan (bijvoorbeeld "Thema"). Het kondigt niet aan dat het een knop is of dat de gebruiker dubbel moet tikken om te activeren. Gebruikers hebben niet de context die ze nodig hebben om met het scherm te communiceren.

Bevestig Genest Focusbaar Element Issue

1. Schakel TalkBack in
2. Focus op het element en ieder van zijn afstammelingen
3. Een van de volgende zaken zal gebeuren:
   • Onafdwingbaar: TalkBack leest de tekst, maar kondigt geen rol of de mogelijkheid om te interageren aan
   • Toegankelijk: TalkBack leest alle tekst en kondigt ook een rol aan en/of hoe te interageren met het element

Los Problemen Op

Verwijder de focusbaarheid van geneste elementen zodat de klikbare ouder focus kan krijgen en zijn rol kan aankondigen. Voeg geen focusbare eigenschappen toe aan niet-interactieve afstammelingen van een klikbare view.

XML

In het onderstaande voorbeeld is de MaterialCardView klikbaar, maar als een van de kinderen - LinearLayout of TextView - een focusable="true" heeft, zal TalkBack zich daarop richten in plaats van op de kaart. In de standaardinstelling is de focusable eigenschap van zowel LinearLayout als TextView false. Zorg ervoor dat deze niet wordt ingesteld op true, zodat de kaart focus kan krijgen en zijn interactieve rol kan aankondigen.

<com.google.android.material.card.MaterialCardView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:clickable="true">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="10dp">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/contact_name"/>

    </LinearLayout>

</com.google.android.material.card.MaterialCardView>

Samenstellen

In dit voorbeeld is de Card klikbaar, maar als een van de kinderen - Row of Text - een .focusable() attribuut heeft, zal TalkBack zich daarop richten. Zorg ervoor dat de Row of Text geen .focusable() attribuut heeft, zodat de Card focus kan krijgen, zijn tekstinhoud kan aankondigen en zijn interactieve rol kan overbrengen (bijv. "Dubbel tikken om te activeren").

Card(
    modifier = Modifier
        .clickable {
            openContact(context)
        }
) {
    Row(
        modifier = Modifier
            .padding(10.dp),
        horizontalArrangement = Arrangement.spacedBy(10.dp, Alignment.CenterHorizontally)
    ) {
        Text("Sarah Anderson")
    }
}

.NET MAUI

In het onderstaande voorbeeld heeft de contactkaart Grid een TapGestureRecognizer om het contact te openen. Als een onderliggend element in de Grid zelfstandig focusbaar is, zal TalkBack zich daarop richten in plaats van op de kaart. Zorg ervoor dat geen onderliggend element AutomationProperties.IsInAccessibleTree="true" expliciet heeft ingesteld, zodat de Grid focus behoudt en "Dubbel tikken om te activeren" kan aankondigen.

<Grid
    HorizontalOptions="FillAndExpand"
    RowDefinitions="Auto,Auto"
    RowSpacing="10"
    VerticalOptions="FillAndExpand">

    <Grid.GestureRecognizers>
        <TapGestureRecognizer Command="{Binding OpenContactCommand}"/>
    </Grid.GestureRecognizers>

    <Label
        Grid.Row="1"
        FontAttributes="Bold"
        FontSize="16"
        HorizontalOptions="CenterAndExpand"
        VerticalOptions="FillAndExpand">
        <Label.FormattedText>
            <FormattedString>
                <Span Text="Sarah Anderson"/>
            </FormattedString>
        </Label.FormattedText>
    </Label>
</Grid>

React Native

In dit voorbeeld is de contactkaart een TouchableOpacity met toegankelijkheidseigenschappen die er direct op zijn ingesteld. De eigenschappen accessible={true} en accessibilityRole="button" zorgen ervoor dat TalkBack de kaart als een interactief element aankondigt. Alle onderliggende weergaven binnenin mogen niet zelfstandig accessible={true} hebben ingesteld, wat ervoor zou zorgen dat ze focus stelen van de kaart.

<TouchableOpacity
    accessible={true}
    accessibilityRole="button"
    style={styles.contactCard}
    onPress={() => openContact("sarah-anderson")}
>
    <Text>Sarah Anderson</Text>
    <Text>sarah@example.com</Text>
</TouchableOpacity>

Flutter

In dit voorbeeld is de contactkaart een Card met een InkWell die de tik afhandelt. Als een kind-widget binnen de Card zijn eigen Semantics wrapper heeft met button: true of onTap ingesteld, zal TalkBack zich daarop richten in plaats van op de kaart. Houd de tik-handler op de InkWell en zorg ervoor dat geen onderliggende widget zelfstandig focus claimt.

Card(
  child: InkWell(
    onTap: () => openContact(context, "sarah-anderson"),
    child: const Padding(
      padding: EdgeInsets.all(16.0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text("Sarah Anderson"),
          Text("sarah@example.com"),
        ],
      ),
    ),
  ),
)

Kan Ik Deze Regel Negeren?

Genest Focusbaar Element heeft een Kritieke impact voor gebruikers, en we raden sterk aan dit probleem op te lossen. Wanneer de focus landt op een niet-interactief element binnen een klikbare ouder, hebben TalkBack-gebruikers geen idee dat het element kan worden geactiveerd. Het negeren van deze regel betekent dat die gebruikers effectief niet kunnen interageren met het betreffende element. Meer informatie over regels negeren.

Bronnen

Deque University Cursuspagina's

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

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

Andere Bronnen

• Richtlijnen Toegankelijkheid van Webinhoud (WCAG) 2.1, W3C Aanbeveling
  • Succescriterium 4.1.2 - Naam, Rol, Waarde
• WCAG 2.1 Begrijpendocs
  • Begrip 4.1.2 A - Naam, Rol, Waarde