Azione inaccessibile

Una vista interattiva dovrebbe poter essere attivata tramite tecnologia assistiva.

Impatto

Gli utenti di tecnologie assistive dovrebbero essere in grado di attivare un'azione di controllo attivo utilizzando la tecnologia assistiva.

Conferma

1. Attiva VoiceOver
2. Concentrati sull'elemento
3. Si verificherà una delle seguenti situazioni:
   • Inaccessibile: l'utente non sarà in grado di attivare l'azione del controllo attivo utilizzando la tecnologia assistiva.
   • Accessibile: l'utente potrà utilizzare la tecnologia assistiva per attivare il controllo attivo.

Come risolvere

Un problema viene riscontrato da questa regola quando:

• un controllo e la sua etichetta sono all'interno di una vista padre contrassegnata come isAccessibilityElement = true
• la vista padre non ha un riconoscitore di gesti separato

e/o:

• il controllo non è posizionato al centro della vista padre, pertanto non può essere attivato con VoiceOver

UIKit

Nello storyboard:

1. Seleziona l'elemento con un problema InaccessibleAction
2. Assicurarsi che il pannello degli ispettori sia visibile
3. Selezionare l'Identity Inspector
4. In Accessibilità è presente una proprietà denominata "Accessibilità" con accanto una casella di controllo denominata "Abilitato". Assicurarsi che la casella di controllo "Abilitato" sia selezionata per il controllo attivo

Un'opzione alternativa è quella di modificare il percorso di accessibilità dell'elemento:

1. Ripetere i passaggi da 1 a 3 per il controllo attivo, la sua etichetta e la vista che contiene il controllo attivo
2. In Accessibilità è presente una proprietà denominata "Accessibilità" con accanto una casella di controllo denominata "Abilitato". Assicurarsi che la casella di controllo "Abilitato" sia selezionata per il controllo attivo, ma non per l'etichetta o per la vista che la contiene
3. Nel codice, modifica il percorso di accessibilità per includere il controllo attivo e l'etichetta della vista contenitore come mostrato nel secondo passaggio del quarto elemento nella sezione "Nel codice"

Un'altra soluzione è quella di far sì che il controllo attivo utilizzi il punto di attivazione dell'accessibilità del suo genitore:

1. Seleziona l'elemento con un problema InaccessibleAction
2. Assicurarsi che il pannello degli ispettori sia visibile
3. Selezionare il controllo attivo nell'elemento
4. Seleziona l'ispettore delle dimensioni
5. Assicurarsi che il controllo attivo sia centrato orizzontalmente e verticalmente all'interno della sua vista contenitore

Nel codice:

Individuare dove è stata impostata la proprietà isAccessibilityElement del controllo attivo e assicurarsi che sia impostata su true.

buttonContainerView.isAccessibilityElement = true

Un'altra opzione è quella di aggiungere un riconoscitore di gesti alla vista contenitore del controllo attivo. Trova la vista che contiene il controllo e aggiungi un riconoscitore del gesto del tocco.

buttonContainerView.addGestureRecognizer(UITapGestureRecognizer(target: self, selector: #selector(buttonTapped)))

In alternativa, è possibile modificare il controllo attivo in modo che si trovi al centro della vista padre, in modo che l'accessibilityActivationPoint della vista contenitore attivi il controllo attivo. Individua la vista che contiene il controllo e assicurati che il controllo si trovi esattamente al centro della vista padre che lo contiene.

buttonContainerView.button.centerXAnchor.constraint(equalTo: buttonContainerView.centerXAnchor).isActive = true
buttonContainerView.button.centerYAnchor.constraint(equalTo: buttonContainerView.centerYAnchor).isActive = true

Inoltre, è possibile risolvere questo problema modificando il percorso di accessibilità in modo da includere il controllo attivo e l'etichetta della vista contenitore.

1. Rendi l'etichetta del controllo e la vista padre con isAccessibilityElement impostato su false

toggleContainerView.toggle.isAccessibilityElement = true
toggleContainerView.label.isAccessibilityElement = false
toggleContainerView.isAccessibilityElement = false

1. Aggiornare il percorso di accessibilità del controllo per incapsulare sia l'etichetta che il controllo

    // Assuming we are in a ViewController
let button = UIButton()

// If not within a ViewController, self.view should be replaced with the rootView of the screen
let rootview = self.view
let onScreenFrame = button.superview!.convert(button.frame, to: rootview)
button.accessibilityPath = UIBezierPath(rect: onScreenFrame)

SwiftUI

Questo problema di accessibilità non può verificarsi con la maggior parte degli elementi predefiniti e dei controlli attivi in SwiftUI; tuttavia, può verificarsi con alcuni controlli attivi personalizzati, come uno slider, uno stepper o un toggle personalizzati, oppure se le viste sono raggruppate in modo errato.

Quando si utilizzano controlli attivi personalizzati come uno stepper, uno slider o un toggle, si consiglia di utilizzare il modificatore di visualizzazione .accessibilityRepresentation per fare in modo che i controlli personalizzati abbiano la stessa rappresentazione di accessibilità della versione predefinita corrispondente del controllo.

// In this scenario, add an .accessibilityRepresentation view modifier on a completely custom Toggle view

// Custom toggle element
        HStack {
            Text("Dark mode is \(getDarkModeStatus().localized)")
            Image(systemName: getDarkModeImage())
        }.onTapGesture {
            isOn.toggle()
        } // apply the .accessibilityRepresentation modifier to the custom toggle
        .accessibilityRepresentation {
            Toggle(isOn: $isOn, label: {
                Text("Dark mode is \(getDarkModeStatus().localized)")
            })
        }

Quando si raggruppano le visualizzazioni, è possibile adottare diversi approcci per garantire che non vi siano problemi di azioni inaccessibili e per offrire all'utente la migliore esperienza di accessibilità.

Se le viste vengono raggruppate, utilizzare il modificatore .accessibilityElement(.combine) o .accessibilityElement(.contain) sulla vista contenitore per garantire che tutte le azioni associate a un controllo figlio siano disponibili per una tecnologia assistiva.

VStack(alignment: .leading) {
            Text("Adjust settings below")
                .accessibilityElement(children: .ignore) // We ignore this text and instead apply an accessibility label with the same content to the containing view
            Divider()
            Toggle(isOn: $isOn) {
                Text("Dark Mode is \(toggleStateText())")
            }
            .accessibility(value: Text("Dark Mode is \(toggleStateText())")
        }
        .accessibilityElement(children: .combine)
        .accessibilityLabel(Text("Adjust settings below"))

Se la vista contenitore ha un controllo regolabile come uno stepper o uno slider, si può prendere in considerazione l'utilizzo del modificatore .accessibilityAdjustableAction per offrire all'utente la migliore esperienza di accessibilità possibile. Inoltre, se si utilizza il modificatore .accessibilityElement(.ignore) su un controllo all'interno della vista contenitore, assicurarsi di fornire alla vista contenitore un'azione di accessibilità con la stessa funzionalità del controllo ignorato.

        VStack {
            Text("Adjust the stepper below to update dog petting data".localized)
            Divider()
            HStack {
                Stepper(value: $value) {
                    Text("Total dogs pet today \($value.wrappedValue)")
                }.accessibilityElement(children: .ignore) 
            }
        }
        .accessibilityElement(children: .combine)
        .accessibilityValue(Text("\($value.wrappedValue)"))
        .accessibilityAdjustableAction({ direction in
            switch direction {
            case .increment:
                value += 1
            case .decrement:
                value -= 1
            @unknown default:
                print("unknown direction used")
            }
        })
    }

React Native

Questo problema di accessibilità non può verificarsi sulla maggior parte dei controlli toccabili o premuti in React Native; tuttavia, questo problema può verificarsi con alcuni controlli attivi personalizzati.

Opzione 1: consentire alla vista padre di gestire il focus Imposta la proprietà accessible della vista contenitore su true e la sua proprietà accessibilityElementsHidden su false. Assegnare il valore appropriato accessibilityRole per far corrispondere il comportamento previsto. Queste proprietà consentiranno l'attivazione del controllo personalizzato tramite tecnologia assistiva.

<View
  accessible={true}
  accessibilityElementsHidden={false}
  accessibilityRole='link'
  accessibilityLabel='Learn more about Deque'
  onTouchStart={openLink}
>
  <Image 
    source={DequeLogo}
    style={{ width: 100, height: 100 }} 
  />
</View>

Opzione 2: consentire all'elemento di gestire il focus Sul controllo, imposta la proprietà accessible su true, accessibilityElementsHidden su false e assegna accessibilityRole appropriata per far corrispondere il comportamento previsto. Queste proprietà consentiranno l'attivazione del controllo personalizzato tramite tecnologia assistiva.

<Image
  source={DequeLogo}
  accessible={true}
  accessibilityElementsHidden={false}
  accessibilityRole='link'
  accessibilityLabel='Learn more about Deque'
  onTouchStart={openLink}
  style={{ width: 100, height: 100 }}
/>