Genest Element met Focus
Elementen die focus krijgen, mogen niet genest zijn binnen klikbare ouder-elementen, omdat ze hun rol niet goed zullen aankondigen aan toegankelijkheidstechnologieën zoals TalkBack en Voice Access.
Over deze Regel
De regel over Genest Element met Focus controleert alle toegankelijkheidsfocusbare besturingselementen die niet interactief zijn. Als zo'n besturingselement zich binnen een klikbare ouder bevindt, is het inherent interactief, maar zal niet aankondigen dat het een rol heeft. Daarom wordt dit element aangemerkt als een toegankelijkheidsprobleem.
Impact voor Gebruikers
Wanneer toegankelijkheidstechnologieën geen rol aankondigen, weten blinde of slechtziende gebruikers die afhankelijk zijn van technologieën zoals TalkBack niet dat ze een actie kunnen uitvoeren. Bijvoorbeeld, TalkBack focust op een intern element en kondigt alleen de tekst "Start een Toast" aan, en niets meer. Het kondigt niet aan dat dit een knop is of dat de gebruiker het element moet dubbelklikken om te activeren.
Bevestiging
- Schakel TalkBack / schermlezer in.
- Focus op de weergave en elk van zijn afstammelingen.
- Een van de volgende zaken zal gebeuren:
- Ontoegankelijk: TalkBack leest de tekst voor maar kondigt geen rol of interactiemogelijkheden aan.
- Toegankelijk: TalkBack leest alle tekst. Het kondigt ook een rol aan en/of geeft aan hoe met het element kan worden omgegaan.
Hoe te Herstellen
Nest geen focusbaar, niet-interactief besturingselement binnen een klikbare ouder. Zorg ervoor dat het geneste besturingselement geen eigenschappen heeft ingesteld waardoor het focusbaar wordt. Op deze manier kan het interactieve ouder-element focus krijgen en zijn rol aankondigen. Zie specifieke voorbeelden hieronder.
Om een onterecht positief toegankelijkheidsprobleem te voorkomen, zorg ervoor dat containerviews die niets doen bij tikken niet klikbaar zijn. Onze hulpmiddelen kunnen niet bepalen of een klikbare weergave een geprogrammeerde actie heeft, dus we moeten aannemen dat dat wel zo is om mogelijk ontoegankelijk gedrag te markeren.
Onderzoek omliggende containerviews - zoals Frame Layouts, Kaarten of Laden - om ervoor te zorgen dat elke weergave die geen actie zou moeten hebben niet als klikbaar is ingesteld.
XML
Foutief Voorbeeld
In dit voorbeeld is de MaterialCardView klikbaar, maar het kind LinearLayout krijgt in plaats daarvan focus. Wanneer gebruikers van toegankelijkheidstechnologieën met de LinearLayoutinterageren, activeert het de klikactie van de kaart maar kondigt niet aan dat het klikbaar is. Dit resulteert in een ervaring die niet toegankelijk is met toegankelijkheidstechnologie, omdat de rol of omschrijving niet aangeven dat er een actie is of wat de interactie zal doen.
<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:focusable="true"
android:layout_margin="10dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/launch_a_toast"/>
</LinearLayout>
</com.google.android.material.card.MaterialCardView>Herstellingsrichtlijn: Maak LinearLayout:focusable False
Zorg ervoor dat de LinearLayout geen eigenschap heeft ingesteld die focusbaar op true zet. In zijn standaardtoestand is het false.
<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/launch_a_toast"/>
</LinearLayout>
</com.google.android.material.card.MaterialCardView>Samenstellen
Foutief Voorbeeld
In dit voorbeeld is de Card klikbaar, maar het kind Row heeft in plaats daarvan focus. Wanneer gebruikers van toegankelijkheidstechnologieën met de Rowinterageren, activeert dit de klikactie van de kaart maar kondigt niet aan dat deze klikbaar is. Dit resulteert in een ervaring die niet toegankelijk is met toegankelijkheidstechnologie, omdat de rol of rolomschrijving niet aangeven dat er een actie is of wat de interactie zal doen.
Card(
modifier = Modifier
.clickable {
launchToast(context)
}
) {
Row(
modifier = Modifier
.focusable()
.padding(10.dp),
horizontalArrangement = Arrangement.spacedBy(10.dp, Alignment.CenterHorizontally)
) {
Text(stringResource(R.string.launch_a_toast))
}
}Herstellingsrichtlijn: Verwijder de Focusmogelijkheid van het Nestelde Element
Hier is de mogelijkheid tot focus verwijderd van de Row element. De Card zal nu tekst om uit te spreken hebben, omdat het informatie zal krijgen van de Text. De Card zal nu met toegankelijkheidstechnologie focus kunnen krijgen en zal de tekstinhoud aankondigen. De kaart zal aan de gebruiker overbrengen dat deze klikbaar is via een rolomschrijving zoals "Dubbelklikken om te activeren", resulterend in een toegankelijke ervaring voor de gebruiker.
Card(
modifier = Modifier
.clickable {
launchToast(context)
}
) {
Row(
modifier = Modifier
.padding(10.dp),
horizontalArrangement = Arrangement.spacedBy(10.dp, Alignment.CenterHorizontally)
) {
Text(stringResource(R.string.launch_a_toast))
}
}.NET MAUI
Foutief Voorbeeld
In dit voorbeeld is de lay-out klikbaar; echter, het is verborgen in de toegankelijkheidsboom. Door deze weergave te verwijderen, hebben we de context ontnomen dat deze weergave functioneert als een knop, en gebruikers van toegankelijkheidstechnologieën zullen niet weten hoe ze met deze weergave kunnen interageren.
<Grid
HorizontalOptions="FillAndExpand"
RowDefinitions="Auto,Auto"
RowSpacing="10"
VerticalOptions="FillAndExpand"
AutomationProperties.IsInAccessibleTree="false">
<Grid.GestureRecognizers>
<TapGestureRecognizer Command="{Binding Function}"/>
</Grid.GestureRecognizers>
<Label
Grid.Row="1"
FontAttributes="Bold"
FontSize="16"
HorizontalOptions="CenterAndExpand"
VerticalOptions="FillAndExpand">
<Label.FormattedText>
<FormattedString>
<Span Text="Text with a clickable parent"/>
</FormattedString>
</Label.FormattedText>
</Label>
</Grid>Herstellingsrichtlijn: Gebruik SemanticProperties.Hint Eigenschap
Toegankelijkheidsproblemen kunnen op twee manieren worden opgelost. De meest voor de hand liggende manier is om het AutomationProperties.IsInAccessibleTree="false" element uit de rasterweergave te verwijderen. Als dat conflicteert met andere functionaliteit in de app, is een andere manier om gebruikers de klikacties te bieden door de SemanticProperties.Hint eigenschap in te stellen met nuttige context over het type weergave waarmee een gebruiker interageert - zoals "Knop" of "Schakelaar". Dit zal toegankelijkheidstechnologie in staat stellen om de "Dubbelklikken om te activeren" hint correct aan zijn voorlezing toe te voegen en de gebruikers de feedback te geven die ze nodig hebben om met de weergave te interageren.
<Grid
HorizontalOptions="FillAndExpand"
RowDefinitions="Auto,Auto"
RowSpacing="10"
VerticalOptions="FillAndExpand">
<Grid.GestureRecognizers>
<TapGestureRecognizer Command="{Binding Function}"/>
</Grid.GestureRecognizers>
<Label
Grid.Row="1"
FontAttributes="Bold"
FontSize="16"
HorizontalOptions="CenterAndExpand"
VerticalOptions="FillAndExpand">
<Label.FormattedText>
<FormattedString>
<Span Text="Text with a clickable parent"/>
</FormattedString>
</Label.FormattedText>
</Label>
</Grid>React Native
Foutief Voorbeeld
In dit voorbeeld is de TouchableOpacity klikbaar, maar het geneste View heeft accessible={true}, wat voorkomt dat de ouder toegankelijkheidsfocus krijgt. De View zal focus ontvangen in plaats van de klikbare TouchableOpacity, maar zal niet aankondigen dat het interactief is. Gebruikers van hulpmiddelen zullen de productinformatie horen, maar zullen niet weten dat ze erop kunnen tikken om details te bekijken.
<TouchableOpacity
accessibilityRole="button"
style={styles.productCard}
onPress={() => navigateTo("product")}
>
<View accessible={true}>
<Text>Product Price</Text>
<Text>$10.00</Text>
</View>
</TouchableOpacity>Herstelrichtlijnen: Voeg Toegankelijkheidseigenschappen toe
In dit herstelde voorbeeld, TouchableOpacity heeft de juiste toegankelijkheidseigenschappen direct ingesteld. De eigenschappen accessible={true} en accessibilityRole="button" zorgen ervoor dat hulpmiddelen aankondigen dat het een interactief element is, zodat gebruikers de inhoud begrijpen en weten dat deze actiegericht is.
<TouchableOpacity
accessible={true}
accessibilityRole="button"
style={styles.productCard}
onPress={() => navigateTo("product")}
>
<Text>Product Price</Text>
<Text>$10.00</Text>
</TouchableOpacity>Flutter
Foutvoorbeeld
In het onderstaande voorbeeld, fungeert de GestureDetector als een klikbare ouderwrapper voor de Card maar kan op zichzelf geen focus krijgen. De Card fungeert als de container voor zijn kinderen, waardoor het focus krijgt en alle inhoud van de kindknooppunten aankondigt. Wanneer gebruikers van hulpmiddelen focussen op de Card, zal het niet "Dubbel tikken om te activeren" aan de gebruiker aankondigen, aangezien de Card zelf niet klikbaar is, hoewel de ouder GestureDetector dat wel is.
GestureDetector(
onTap: () => ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(
content: Text("Card clicked"),
behavior: SnackBarBehavior.floating,
)
),
child: const Card(
child: Padding(
padding: EdgeInsets.all(16.0),
child: Text(
"Card with clickable parent"
),
),
),
);Herstelrichtlijnen: Gebruik geen GestureDetector wrapper
Hier werkt de InkWell als een klikbaar kind van de Card en zal dezelfde afmetingen innemen als de Card. De InkWell dient nu als de container die alle tekstinhoud presenteert aan gebruikers van hulpmiddelen. Het resultaat is één klikbaar element dat "Dubbel tikken om te activeren" aankondigt om aan te geven dat het interactief is.
Card(
child: InkWell(
onTap: () => ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(
content: Text("Card clicked"),
behavior: SnackBarBehavior.floating,
)
),
child: const Padding(
padding: EdgeInsets.all(16.0),
child: Text(
"Text with clickable parent"
),
),
),
)