Visioni che si Scontrano

Scopri come stiamo usando l'intelligenza artificiale per questa regola!

Cosa Controlliamo

Una vista è qualsiasi elemento visibile dell'interfaccia utente sullo schermo, come un'etichetta di testo, un'immagine o un pulsante. Le viste che contengono informazioni non dovrebbero intersecarsi con un'altra vista, né parzialmente né completamente. Le sovrapposizioni possono rendere il contenuto illeggibile o completamente nascosto, specialmente quando il Dynamic Type aumenta la dimensione del testo.

Questa regola applica una buona pratica stabilita dalle Linee Guida per l'Interfaccia Umana di Apple. È possibile disattivare questa regola dal Dashboard Mobile o ignorando la regola nei test scritti per iOS.

Esempio di Fallimento ❌

Esempio di Successo ✅

In Sintesi

• Questa regola ha un impatto minore sugli utenti
• Le viste (elementi visibili dell'interfaccia utente come etichette di testo e immagini) non dovrebbero sovrapporsi tra loro
• Il Dynamic Type può aumentare la dimensione del testo durante l'esecuzione, causando la collisione di elementi precedentemente separati

Impatto sugli Utenti

Gli utenti vedenti sono maggiormente colpiti, in particolare quelli che utilizzano impostazioni del Dynamic Type maggiori. Quando le viste informative si sovrappongono, il contenuto può diventare parzialmente o completamente illeggibile. Gli utenti che si affidano a dimensioni di testo maggiori sono più propensi a incontrare questo problema, anche se il layout appare corretto con le dimensioni predefinite.

Conferma Problema di Visioni Sovrapposte

1. Guarda i confini di ciascuna vista informativa sullo schermo.
2. Si applicherà uno dei seguenti casi:
   • Inaccessibile: I confini di una vista si intersecano con un'altra vista.
   • Accessibile: Nessuna vista informativa ha confini sovrapposti.
3. Se lo schermo contiene elementi di testo, aumenta la dimensione del Dynamic Type nelle Impostazioni e ripeti il controllo per confermare che le viste non inizino a sovrapporsi a dimensioni maggiori.

Risolvi Problemi

Le viste sovrapposte sono causate più comunemente da vincoli di layout mancanti o insufficienti che non tengono conto del Dynamic Type. La soluzione esatta varia in base al layout, ma l'obiettivo è garantire che gli elementi informativi abbiano sempre abbastanza spazio tra di loro.

UIKit

Assicurati che i vincoli tra elementi informativi vicini forniscano uno spazio adeguato. Se non esiste un vincolo tra due elementi che si trovano vicini, aggiungine uno in modo che non possano sovrapporsi quando il Dynamic Type aumenta la loro dimensione.

SwiftUI

Assicurati che ogni vista abbia modificatori di layout che impediscano che i suoi confini si sovrappongano a quelli delle viste vicine. Usa HStack e VStack come contenitori genitori per permettere al sistema di layout di gestire automaticamente lo spazio. Evita di usare ZStack come genitore per le viste che contengono testo, poiché sovrappone gli elementi.

React Native

Assicurati che le viste contenenti testo o altri contenuti scalabili non abbiano un maxHeight impostato, il che può causare il taglio del contenuto o il suo spostamento in elementi adiacenti man mano che la dimensione del testo aumenta. Quando si utilizza un layout flessibile, considera di aggiungere un valore per la proprietà gap per mantenere uno spazio costante tra gli elementi.

Posso Ignorare Questa Regola?

Visioni Sovrapposte ha un impatto minore sugli utenti e applica una buona pratica di Apple piuttosto che un rigido requisito WCAG. Puoi disattivare completamente questa regola dal Dashboard Mobile, o ignorare singoli risultati nei tuoi test iOS. Scopri di più su ignorare le regole.

Risorse

• Linee Guida per l'Interfaccia Umana di Apple
  • Tipografia