Elemento con Focus Annidato
Non togliere il focus a un elemento padre cliccabile rendendo un elemento figlio focalizzabile
Cosa Controlliamo
Gli elementi focalizzabili non dovrebbero essere annidati all'interno di elementi padre cliccabili. Quando un elemento figlio non interattivo è focalizzabile, la tecnologia assistiva si concentra su di esso invece che sul padre cliccabile, il che significa che il ruolo interattivo dell'elemento non viene mai annunciato.
Questa regola controlla tutti i controlli di accessibilità focalizzabili che non sono interattivi di per sé. Se un tale controllo è contenuto all'interno di un elemento padre cliccabile, è intrinsecamente interattivo, ma non annuncerà un ruolo. L'elemento sarà segnalato come una violazione dell'accessibilità.
Esempio di Fallimento ❌
La scheda è cliccabile, ma l'immagine del profilo al suo interno è a parte focalizzabile.
TalkBack non annuncia il ruolo della scheda o il suggerimento "Tocca due volte per attivare", e invece si concentra su e annuncia l'elemento interno.
Gli utenti non sanno che la scheda è interattiva, e l'elemento con focus non è cliccabile.
Esempio di Successo ✅
L'elemento interno non è più a parte focalizzabile.
TalkBack si concentra sulla scheda stessa e ne annuncia il contenuto, il ruolo, e il "Tocca due volte per attivare".
Gli utenti comprendono che la scheda è interattiva e possono attivarla.
In Sintesi
- Questa regola ha un impatto critico per gli utenti di TalkBack e Voice Access
- Quando un elemento figlio ruba il focus a un elemento padre cliccabile, si perde il ruolo interattivo
- TalkBack non annuncerà "Tocca due volte per attivare" se l'elemento focalizzato non è di per sé cliccabile
- La soluzione è sempre quella di rimuovere la focalizzazione dall'elemento annidato, non di aggiungergli un ruolo
- Le viste contenitore che non hanno azioni non dovrebbero essere lasciate cliccabili — questo evita falsi positivi
Impatto sugli Utenti
Quando la tecnologia assistiva non annuncia un ruolo, gli utenti ciechi o ipovedenti che si affidano a TalkBack non sapranno di poter attivare un'azione. Ad esempio, TalkBack si concentra su un elemento interno e ne annuncia solo il testo (ad esempio "Tema"). Non annuncia che è un pulsante o che l'utente deve toccare due volte per attivare. Gli utenti non ricevono il contesto necessario per interagire con lo schermo.
Conferma del Problema di Elemento con Focus Annidato
- Attiva TalkBack
- Concentrati sull'elemento e ciascuno dei suoi discendenti
- Si verificherà uno dei seguenti:
- Inaccessibile: TalkBack legge il testo ma non annuncia un ruolo o la capacità di interazione
- Accessibile: TalkBack legge tutto il testo e annuncia anche un ruolo e/o come interagire con l'elemento
Correggi i Problemi
Rimuovi la focalizzazione dagli elementi annidati in modo che il padre cliccabile possa acquisire il focus e annunciare il suo ruolo. Non aggiungere proprietà focalizzabili ai discendenti non interattivi di una vista cliccabile.
Per evitare un falso positivo, assicurati che gli elementi contenitore che non fanno nulla quando vengono toccati non siano lasciati cliccabili. I nostri strumenti non possono determinare se un elemento cliccabile ha un'azione programmata associata, quindi dobbiamo presumere che lo sia per segnalare un comportamento potenzialmente inaccessibile.
Esamina gli elementi contenitore circostanti, come Frame Layout, Card View o Drawers, per assicurarti che qualsiasi elemento senza un'azione associata non sia impostato come cliccabile.
XML
Nell'esempio seguente, il MaterialCardView è cliccabile, ma se uno dei figli - LinearLayout o TextView - ha focusable="true" TalkBack si concentrerà su quello invece che sulla scheda. Nello stato predefinito la proprietà focusable di entrambi LinearLayout e TextView è falsa. Assicurati che non sia impostata su true, in modo che la scheda possa acquisire il focus e annunciare il suo ruolo interattivo.
<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>Compose
In questo esempio, il Card è cliccabile, ma se uno dei figli - Row o Text - ha un attributo .focusable(), TalkBack si concentrerà su di esso invece. Assicurati che il Row o il Text non abbiano un attributo .focusable(), in modo che il Card possa acquisire il focus, annunciare il contenuto testuale e trasmettere il suo ruolo interattivo (ad esempio, "Tocca due volte per attivare").
Card(
modifier = Modifier
.clickable {
openContact(context)
}
) {
Row(
modifier = Modifier
.padding(10.dp),
horizontalArrangement = Arrangement.spacedBy(10.dp, Alignment.CenterHorizontally)
) {
Text("Sarah Anderson")
}
}.NET MAUI
Nell'esempio seguente, la scheda contatto Grid ha un TapGestureRecognizer per aprire il contatto. Se un elemento figlio all'interno del Grid è indipendentemente focalizzabile, TalkBack si concentrerà su di esso invece che sulla scheda. Assicurati che nessun elemento figlio abbia AutomationProperties.IsInAccessibleTree="true" impostato esplicitamente, in modo che il Grid mantenga il focus e possa annunciare "Tocca due volte per attivare".
<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 questo esempio, la scheda contatto è un TouchableOpacity con proprietà di accessibilità impostate direttamente su di essa. Le proprietà accessible={true} e accessibilityRole="button" assicurano che TalkBack annunci la scheda come un elemento interattivo. Eventuali viste figlio al suo interno non dovrebbero avere accessible={true} impostato indipendentemente, cosa che altrimenti causerebbe loro di rubare il focus alla scheda.
<TouchableOpacity
accessible={true}
accessibilityRole="button"
style={styles.contactCard}
onPress={() => openContact("sarah-anderson")}
>
<Text>Sarah Anderson</Text>
<Text>sarah@example.com</Text>
</TouchableOpacity>Flutter
In questo esempio, la scheda contatto è un Card con un InkWell che gestisce il tap. Se un widget figlio all'interno del Card ha il proprio Semantics wrapper con button: true o onTap impostati, TalkBack si concentrerà su di esso invece che sulla scheda. Mantieni il gestore tap sul InkWell e assicurati che nessun widget discendente reclami il focus in modo indipendente.
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"),
],
),
),
),
)Posso Ignorare Questa Regola?
Elemento con Focus Annidato ha un impatto critico per gli utenti, e raccomandiamo fortemente di correggere questo problema. Quando il focus cade su un elemento non interattivo all'interno di un elemento padre cliccabile, gli utenti di TalkBack non hanno modo di sapere che l'elemento può essere attivato. Ignorare questa regola significa che quegli utenti non possono effettivamente interagire con l'elemento interessato. Scopri di più su ignorare le regole.
Risorse
Pagine del Corso Deque University
Nota: L'accesso completo alle risorse di Deque University richiede un abbonamento.
Altre risorse
- Linee guida per l'accessibilità dei contenuti web (WCAG) 2.1, Raccomandazione W3C
- Documenti di comprensione WCAG 2.1