Action non réalisable

Une vue interactive doit pouvoir être activée à l’aide d’une technologie d’assistance.

Impact

Les utilisateurs de technologies d’assistance doivent pouvoir activer l’action d’un contrôle actif à l’aide de la technologie d’assistance.

Confirmation

1. Activer VoiceOver
2. Focalisez-vous sur l'élément
3. L’une des situations suivantes se produira :
   • Inaccessible : L'utilisateur ne pourra pas activer l'action de l'élément interactif à l'aide d'une technologie d'assistance.
   • Accessible : L'utilisateur pourra utiliser une technologie d'assistance pour activer le contrôle actif.

Comment corriger

Un problème est détecté par cette règle lorsque :

• un contrôle et son étiquette se trouvent dans une vue parent marquée comme "isAccessibilityElement = true"
• la vue parent n'a pas de reconnaissance de gestes distincte

et/ou :

• le contrôle n'est pas inclus dans la vue parent, il ne peut donc pas être activé avec VoiceOver

UIKit

Dans le storyboard :

1. Sélectionnez l'élément présentant un problème InaccessibleAction
2. Assurez-vous que le panneau des inspecteurs est visible
3. Sélectionnez l'Identity Inspector
4. Sous Accessibilité, il y a une propriété appelée « Accessibilité » avec une case à cocher appelée « Activé » à côté. Assurez-vous que la case à cocher « Activé » est sélectionnée pour le contrôle actif

Une option alternative consiste à modifier le chemin d’accessibilité de l’élément :

1. Répétez les étapes 1 à 3 pour le contrôle actif, son étiquette et la vue qui contient le contrôle actif
2. Sous Accessibilité, il y a une propriété appelée « Accessibilité » avec une case à cocher appelée « Activé » à côté. Assurez-vous que la case à cocher « Activé » est sélectionnée pour le contrôle actif, mais pas pour l'étiquette ou la vue qui la contient.
3. Dans le code, modifiez le chemin d'accessibilité pour inclure le contrôle actif et l'étiquette de la vue qui contient, comme indiqué dans la deuxième étape du quatrième élément de la section « Dans le code »

Une autre solution consiste à faire en sorte que le contrôle actif utilise le point d’activation d’accessibilité de son parent :

1. Sélectionnez l'élément présentant un problème InaccessibleAction
2. Assurez-vous que le panneau des inspecteurs est visible
3. Sélectionnez le contrôle actif dans l'élément
4. Sélectionnez l'inspecteur de taille
5. Assurez-vous que le contrôle actif est centré horizontalement et verticalement dans la vue qui le contient

En code :

Recherchez où la propriété isAccessibilityElement du contrôle actif a été définie et assurez-vous qu'elle est définie sur true.

buttonContainerView.isAccessibilityElement = true

Une autre option consiste à ajouter un outil de reconnaissance de gestes à la vue contenant le contrôle actif. Recherchez la vue qui contient le contrôle et ajoutez une reconnaissance de geste de tapotement.

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

Vous pouvez également modifier le contrôle actif pour qu'il soit au centre de la vue parent, de sorte que l'accessibilityActivationPoint de la vue contenante active le contrôle actif. Recherchez la vue qui contient le contrôle et assurez-vous que le contrôle se trouve exactement au centre de la vue parent qui le contient.

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

De plus, vous pouvez résoudre ce problème en modifiant le chemin d'accessibilité pour inclure le contrôle actif et l'étiquette de la vue contenante.

1. Rendez l'étiquette du contrôle et la vue parente isAccessibilityElement = false

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

1. Mettre à jour le chemin d'accessibilité du contrôle pour encapsuler à la fois l'étiquette et le contrôle

    // 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

Ce problème d'accessibilité ne peut pas se produire sur la plupart des éléments par défaut et des contrôles actifs dans SwiftUI ; cependant, ce problème peut se produire avec certains contrôles actifs personnalisés tels qu'un curseur, un stepper ou une bascule personnalisés ou si les vues sont regroupées de manière incorrecte.

Lorsque vous utilisez des contrôles actifs personnalisés tels qu'un stepper, un curseur ou une bascule, pensez à utiliser le modificateur de vue .accessibilityRepresentation pour que les contrôles personnalisés aient la même représentation d'accessibilité que la version par défaut correspondante du contrôle.

// 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)")
            })
        }

Lors du regroupement de vues, plusieurs approches différentes peuvent être adoptées pour garantir l'absence de problèmes d'action inaccessibles et pour offrir la meilleure expérience d'accessibilité à un utilisateur.

Si les vues sont regroupées, utilisez le modificateur .accessibilityElement(.combine) ou .accessibilityElement(.contain) sur la vue conteneur pour garantir que toutes les actions associées à un contrôle enfant sont disponibles pour une technologie d'assistance.

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"))

Si la vue contenante dispose d'un contrôle réglable comme un stepper ou un curseur, envisagez d'utiliser le modificateur .accessibilityAdjustableAction pour offrir la meilleure expérience d'accessibilité possible à l'utilisateur. De plus, si vous utilisez le modificateur .accessibilityElement(.ignore) sur un contrôle dans la vue conteneur, assurez-vous de fournir à la vue conteneur une action d'accessibilité de la même fonctionnalité que le contrôle ignoré.

        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

Ce problème d'accessibilité ne peut pas se produire sur la plupart des contrôles tactiles ou pressables dans React Native ; cependant, ce problème peut se produire avec certains contrôles actifs personnalisés.

Option 1 : autoriser la vue parent à gérer le focus Définissez la propriété accessible de la vue contenante sur true et sa propriété accessibilityElementsHidden sur false. Affectez le approprié accessibilityRole pour correspondre au comportement attendu. Ces propriétés permettront au contrôle personnalisé d’être activé par la technologie d’assistance.

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

Option 2 : autoriser l'élément à gérer le focus Sur le contrôle, définissez la propriété accessible sur true, accessibilityElementsHidden à false et attribuez la valeur appropriée à accessibilityRole pour correspondre au comportement attendu. Ces propriétés permettront au contrôle personnalisé d’être activé par la technologie d’assistance.

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