Acción inaccesible

Una vista interactiva debe tener la capacidad de activarse con tecnología de asistencia.

Impacto

Los usuarios de tecnología de asistencia deberían poder activar un control activo utilizando tecnología de asistencia.

Confirmación

1. Activar VoiceOver
2. Enfócate en el elemento
3. Ocurrirá uno de los siguientes casos:
   • Inaccesible: El usuario no podrá activar la acción del control activo mediante tecnología de asistencia.
   • Accesible: El usuario podrá utilizar tecnología de asistencia para activar el control activo.

Cómo solucionarlo

Esta regla detecta un problema cuando:

• un control y su etiqueta están dentro de una vista padre marcada como isAccessibilityElement = true
• la vista padre no tiene un reconocedor de gestos independiente

y/o:

• el control no está en el medio de la vista padre, por lo tanto no se puede activar con VoiceOver

UIKit

En el guión gráfico:

1. Seleccione el elemento con un problema InaccessibleAction
2. Asegúrese de que el Panel de inspectores esté visible
3. Seleccione el Inspector de identidad
4. En Accesibilidad, hay una propiedad llamada "Accesibilidad" con una casilla de verificación llamada "Habilitado" al lado. Asegúrese de que la casilla de verificación "Habilitado" esté seleccionada para el control activo

Una opción alternativa es cambiar la ruta de accesibilidad del elemento:

1. Repita los pasos 1 a 3 para el control activo, su etiqueta y la vista que contiene el control activo.
2. En Accesibilidad, hay una propiedad llamada "Accesibilidad" con una casilla de verificación llamada "Habilitado" al lado. Asegúrese de que la casilla de verificación "Habilitado" esté seleccionada para el control activo, pero no para la etiqueta o la vista que la contiene.
3. En el código, cambie la ruta de accesibilidad para incluir el control activo y la etiqueta de la vista contenedora, como se muestra en el segundo paso del cuarto elemento de la sección "En el código".

Otra solución es hacer que el control activo utilice el punto de activación de accesibilidad de su padre:

1. Seleccione el elemento con un problema InaccessibleAction
2. Asegúrese de que el Panel de inspectores esté visible
3. Seleccione el control activo en el elemento
4. Seleccione el Inspector de tamaño
5. Asegúrese de que el control activo esté centrado horizontal y verticalmente dentro de su vista contenedora

En código:

Encuentre dónde se estableció la propiedad isAccessibilityElement del control activo y asegúrese de que esté establecida como verdadera.

buttonContainerView.isAccessibilityElement = true

Otra opción es agregar un reconocedor de gestos a la vista que contiene el control activo. Busque la vista que contiene el control y agregue un reconocedor de gestos de toque.

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

Como alternativa, puede cambiar el control activo para que esté en el centro de la vista principal, de modo que el accessibilityActivationPoint de la vista contenedora active el control activo. Busque la vista que contiene el control y asegúrese de que éste esté en el centro exacto de la vista principal que lo contiene.

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

Además, puedes solucionar este problema cambiando la ruta de accesibilidad para incluir el control activo y la etiqueta de la vista contenedora.

1. Hacer que la etiqueta del control y la vista principal isAccessibilityElement = false

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

1. Actualice la ruta de accesibilidad del control para encapsular tanto la etiqueta como el control

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

Este problema de accesibilidad no puede ocurrir en la mayoría de los elementos predeterminados y controles activos en SwiftUI; sin embargo, este problema puede ocurrir con algunos controles activos personalizados, como un control deslizante, un controlador paso a paso o un conmutador personalizado, o si las vistas se agrupan incorrectamente.

Al utilizar controles activos personalizados, como un controlador paso a paso, un control deslizante o un conmutador, considere usar el modificador de vista .accessibilityRepresentation para hacer que los controles personalizados tengan la misma representación de accesibilidad que la versión predeterminada correspondiente del control.

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

Al agrupar vistas, hay algunos enfoques diferentes que se pueden adoptar para garantizar que no haya problemas de acciones inaccesibles y para brindar la mejor experiencia de accesibilidad para el usuario.

Si se agrupan las vistas, utilice el modificador .accessibilityElement(.combine) o .accessibilityElement(.contain) en la vista contenedora para garantizar que todas las acciones asociadas con un control secundario estén disponibles para una tecnología de asistencia.

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 vista contenedora tiene un control ajustable, como un control paso a paso o deslizante, considere usar el modificador .accessibilityAdjustableAction para brindar la mejor experiencia de accesibilidad posible para el usuario. Además, si utiliza el modificador .accessibilityElement(.ignore) en un control dentro de la vista contenedora, asegúrese de proporcionar a la vista contenedora una acción de accesibilidad con la misma funcionalidad que el control ignorado.

        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

Este problema de accesibilidad no puede ocurrir en la mayoría de los controles táctiles o presionables en React Native; sin embargo, este problema puede ocurrir con algunos controles activos personalizados.

Opción 1: Permitir que la vista principal gestione el foco Establezca la propiedad accessible de la vista contenedora en verdadero y es accessibilityElementsHidden propiedad en falso. Asigne lo apropiado accessibilityRole para que coincida con el comportamiento esperado. Estas propiedades permitirán que el control personalizado se active mediante tecnología de asistencia.

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

Opción 2: Permitir que el elemento maneje el foco En el control, establezca la accessible propiedad en verdadero, la accessibilityElementsHidden propiedad en falso y asigne la accessibilityRole propiedad adecuada para que coincida con el comportamiento esperado. Estas propiedades permitirán que el control personalizado se active mediante tecnología de asistencia.

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