Tratti Contraddittori

This page is not available in the language you requested. You have been redirected to the English version of the page.
Link to this page copied to clipboard

Non assegnare tratti di accessibilità contraddittori allo stesso elemento

Not for use with personal data
Best Practice Impact - Critical

Cosa Controlliamo

Ogni vista - un elemento interattivo come un pulsante, un'etichetta o un controllo personalizzato - può essere assegnato a tratti di accessibilità. Questi metadati dicono a VoiceOver che tipo di elemento è e come interagire con esso. Questa regola verifica che nessuna vista venga assegnata a tratti che si contraddicono tra loro o interferiscono con la navigazione di VoiceOver.

Questa regola impone una buona pratica definita nei Tratti di Accessibilità di UIKit di Apple. Puoi disattivare questa regola dal Dashboard Mobile o ignorando la regola nei test scritti per iOS.

Esempio Errato ❌

An iOS phone screen showing a 'Read article' button. A VoiceOver bar at the bottom reads 'Read article, Button, Link' — two conflicting roles announced for a single element

A un pulsante viene assegnato both the button and link traits

VoiceOver annuncia two conflicting roles contemporaneamente:
„Leggi articolo, Pulsante, Link“

Questo è confuso e fuorviante — un singolo elemento non dovrebbe mai avere due ruoli contraddittori

Esempio Corretto ✅

An iOS phone screen showing a 'Read article' button. A VoiceOver bar at the bottom reads 'Read article, Link' — a single correct role for the element

All'elemento viene assegnato only the link trait

VoiceOver annuncia un solo ruolo chiaro:
„Leggi articolo, Link“

I gesti di navigazione funzionano come previsto per il ruolo assegnato

Panoramica

  • Questa regola ha un impatto critico per gli utenti
  • I tratti di accessibilità dicono a VoiceOver che cos'è un elemento e come interagire con esso - i tratti in conflitto producono un comportamento confuso o errato
  • Conflitti comuni: tratti di ruolo come "pulsante" + "link", o tratti di navigazione come "intestazione" + "regolabile"

Impatto sugli Utenti

Le persone che utilizzano VoiceOver e Switch Control sono le più impattate. Quando un elemento ha tratti contrastanti, VoiceOver potrebbe annunciare due ruoli simultaneamente (ad esempio, "Pulsante, Link"), il che è confuso e fuorviante. Alcune combinazioni di tratti - come "intestazione" e "regolabile" - possono anche interrompere i gesti di navigazione di VoiceOver, rendendo alcune parti dello schermo inaccessibili.

Confermare Problema di Tratti Contraddittori

  1. Attiva VoiceOver
  2. Concentrati sull'elemento
  3. Si verificherà uno dei seguenti:
    • Inaccessibile: VoiceOver annuncia due ruoli contrastanti (come "Pulsante" e "Link")
    • Inaccessibile: Un gesto di navigazione di VoiceOver smette di funzionare (ad esempio, utilizzando "intestazione" e "regolabile" insieme)
    • Accessibile: Tutti i ruoli sono distinti e i gesti di navigazione funzionano come previsto

Correggi Problemi

Per risolvere un problema di Tratti Contraddittori, assicurati che ogni elemento abbia solo un tratto di ruolo e che tutti i tratti assegnati siano compatibili tra loro.

UIKit

Per correggere nello Storyboard:

  1. Seleziona l'elemento con tratti di accessibilità contrastanti.
  2. Assicurati che il pannello dell'Ispettore sia visibile.
  3. Seleziona il Ispettore Identità.
  4. Sotto Accessibilità, trova la categoria Tratti e deseleziona il tratto in conflitto.

Per correggere nel codice, rimuovi il tratto in conflitto. Per esempio, se a un pulsante vengono assegnati erroneamente sia .button che .link:

button.accessibilityTraits = [.button, .link]

Mantieni solo il tratto che riflette il reale comportamento dell'elemento. Se l'elemento si comporta come un link, rimuovi il tratto pulsante:

button.accessibilityTraits = .link

SwiftUI

Usa .accessibility(addTraits:) e .accessibility(removeTraits:) insieme per assicurarti che l'elemento abbia solo i tratti che riflettono accuratamente il suo comportamento. Ad esempio, se un pulsante imita un link, rimuovi il tratto pulsante predefinito e aggiungi il tratto link:

var body: some View {
    Button(action: { openLink() },
           label: {
        Text("Visit the website").padding()
    })
    .accessibility(addTraits: .isLink)
    .accessibility(removeTraits: .isButton)
}

React Native

È improbabile che questa regola venga attivata su elementi di React Native, poiché accessibilityRole accetta solo un valore. Usa il valore accessibilityRole che descrive più accuratamente il comportamento previsto dell'elemento:

<Button
  title={'Learn more about axeDevTools'}
  accessible={true}
  accessibilityRole='link'
  onPress={goToLink}
/>

Posso ignorare questa regola?

Conflitti di tratti ha un Impatto critico per gli utenti, e raccomandiamo di prendere provvedimenti per risolvere questo problema. Anche se questa regola applica una buona prassi di Apple, ha un impatto notevole. Se un controllo presenta tratti in conflitto, gli utenti di VoiceOver potrebbero non riuscire a interagire affatto con esso. Tuttavia, è possibile disattivare questa regola dalla Dashboard mobile o ignorare singoli risultati nei tuoi test iOS. Scopri di più su ignorando le regole.

Risorse