Cómo hacer que VoiceOver sea más amigable en tu aplicación iOS

Con algunos cambios durante el desarrollo, puede crear una mejor experiencia de VoiceOver para sus usuarios.

Desde que Apple introdujo por primera vez las funciones de accesibilidad a iOS hace unos cinco años, la compañía ha extendido estas funciones a aplicaciones de terceros mediante la creación de un rico conjunto de API de accesibilidad. Estas API brindan a los desarrolladores la capacidad de crear aplicaciones de asistencia que lleguen a una gama mucho más amplia de usuarios.

Pero, hacer que su aplicación sea accesible es solo un comienzo. También debe ser empático con la forma en que un usuario podría necesitar navegar por el contenido de accesibilidad dentro de sus aplicaciones.

Hablando principalmente de VoiceOver, piense en formas de reducir la carga de navegación que la accesibilidad puede agregar a una experiencia. Además, tenga en cuenta cómo puede sonar VoiceOver a un usuario cuando anuncia el contenido de una pantalla a otra o de un componente a otro.

En este tutorial, le mostraremos cómo agrupar sus elementos de accesibilidad en vistas complejas. Esto disminuye la cantidad de deslizamiento a través de elementos en la pantalla y hace que el proceso de navegación sea un poco menos engorroso para los usuarios.

Antes de comenzar, asegurémonos de tener algunos de los fundamentos.

Propiedades de accesibilidad, aprende a amarlas

Las propiedades de accesibilidad son esenciales en el camino para hacer que su contenido esté disponible para una comunidad más amplia. Las propiedades de accesibilidad en las que nos centraremos aquí son isAccessibilityElement, shouldGroupAccessibilityChildren, accessibilityLabel y accessibilityHint.

  • isAccessibilityElement: lo suficientemente simple, ¿verdad? Este valor le dice a iOS si es o no un elemento al que puede acceder una aplicación de asistencia.
  • shouldGroupAccessibilityChildren: Esto expresa si VoiceOver debe agrupar los elementos que son hijos del receptor, independientemente de sus posiciones en la pantalla (es decir, celdas UICollectionView y UITableView).
  • accessibilityLabel: Esto es lo que VoiceOver anunciará para un elemento de accesibilidad dado. Es una etiqueta concisa que identifica el elemento de accesibilidad.
  • accessibilityHint: normalmente, esta es una descripción de lo que un elemento de accesibilidad en particular es o puede hacer. Por ejemplo, "Tocar dos veces para ver" o "Botón".

La activación de VoiceOver en su producto Apple se puede hacer de dos maneras:

  • Manualmente: en su dispositivo, vaya a Configuración> General> Accesibilidad> VoiceOver y toque VoiceOver para activarlo. Eso es fácil de hacer una vez, pero hacer estos pasos varias veces seguidas durante las pruebas se vuelve tedioso. ¡Por suerte, hay un atajo!
  • Atajo de VoiceOver: en su dispositivo, vaya a Configuración> General> Accesibilidad> Atajo de accesibilidad y asegúrese de que VoiceOver esté seleccionado. Ahora, todo lo que necesita hacer para activar o desactivar VoiceOver es tocar tres veces el botón Inicio. Genial, ¿verdad?

En caso de que se pregunte, esto no funcionará en el simulador de iOS. Deberá probar sus adiciones de accesibilidad en un dispositivo físico.

¿Lo tengo? Genial, comencemos.

Combinar contenido de accesibilidad en grupos

Como mencioné antes, navegar por los elementos de accesibilidad puede convertirse rápidamente en una actividad engorrosa. Imagine tener que deslizar hacia la izquierda y hacia la derecha entre cada etiqueta e imagen contenida en un UICollectionViewController o UITableViewController. No es divertido, ¿verdad? ¿Qué puedes hacer para que sea un poco más soportable?

Una forma en que me gusta resolver este problema es pensar en cada celda en esos casos como un elemento único. Ahora imagine si pudiera deslizar hacia la izquierda y hacia la derecha entre cada celda mientras la celda lee todo su contenido y no etiqueta por etiqueta. Así es, la rica API de accesibilidad de Apple nos da la posibilidad de hacer esto con un simple truco.

Veamos cómo podemos hacer esto con UICollectionView.

Primero, dentro de su código, configure las propiedades de accesibilidad para su vista de colección. Vea el ejemplo a continuación.

// Accesibilidad
collectionView.isAccessibilityElement = false
collectionView.shouldGroupAccessibilityChildren = true

Aquí le decimos a la aplicación de asistencia que actúe como si la vista de colección no estuviera allí. Por lo tanto, no se seleccionará cuando un usuario deslice su vista principal cuando VoiceOver esté activado. Sé que esto parece contrario a la intuición, pero no te preocupes. Lo siguiente que haremos será establecer cada elemento en esa vista de colección como un elemento de accesibilidad.

En este ejemplo, aplicaremos la accesibilidad a una UICollectionViewCell que muestra información para un álbum de música. Cada celda tendrá una imagen, título del álbum y nombre del artista.

@IBOutlet var imageView: UIImageView!
@IBOutlet var titleLabel: ¡UILabel!
@IBOutlet var artistLabel: ¡UILabel!

Primero, configuraremos nuestra celda:

configuración funcional final (modelo cellWithModel: Álbum) {
    si deja artworkName = model.artworkName {
        imageView.image = UIImage (llamado: artworkName)
    }
    artistLabel.text = model.artist? .name
    titleLabel.text = model.title
    applyAccessibility ()
}

Luego, aplique las propiedades de accesibilidad a cada UICollectionViewCell:

función final applyAccessibility () {
    isAccessibilityElement = true
    accessibilityLabel = "\ (titleLabel.text!) \ (artistLabel.text!)"
    accessibilityHint = "Doble toque para jugar".
    imageView.isAccessibilityElement = false;
    artistLabel.isAccessibilityElement = false;
    titleLabel.isAccessibilityElement = false;
}

Como puede ver, cada celda se configura como un elemento de accesibilidad que a su vez lo agrega a la lista de elementos de accesibilidad para su vista principal. Esto significa que a medida que un usuario pase por los elementos de la vista de colección, cada elemento tendrá la oportunidad de describir su contenido.

Luego, agregamos no solo el texto titleLabel, sino también el texto artistLabel a la propiedad accessibilityLabel de la celda. De esta manera, cuando VoiceOver habla al usuario, escucha el contenido de ambas etiquetas en la celda de nuestro álbum en lugar de solo una u otra. Y, por supuesto, configuramos la propiedad accessibilityHint para que los usuarios puedan saber qué sucederá cuando realicen la acción de doble toque. Tenga en cuenta que las sugerencias de accesibilidad siempre se pronunciarán después de una breve pausa después de que se haya leído la etiqueta de accesibilidad de un elemento. No lo escuchará de inmediato.

Por último, dentro de nuestra celda del álbum, establecemos el valor isAccessibilityElement de cada elemento secundario en falso. Por supuesto, establecer una celda como elemento de accesibilidad hará, por defecto, que sus elementos secundarios no sean de accesibilidad.

Ahora, después de todo eso, veamos cómo funciona. Este video muestra lo que sucedería si no hiciéramos todos los pasos anteriores y luego muestra un ejemplo en el que aplicamos nuestras propiedades de accesibilidad.

Los elementos de celda agrupados no solo suenan mejor cuando son leídos por VoiceOver, sino que reducen la navegación.

Hacer que las UICollectionViewCells accesibles suenen como un humano

Muchas veces, noto que los desarrolladores se apresuran a través de la accesibilidad dentro de sus aplicaciones. Esto puede deberse a una serie de factores, pero el contenido de la propiedad accessibilityLabel tiende a necesitar solo un ligero toque de amor.

En el ejemplo anterior de cómo configuramos la etiqueta de accesibilidad de la celda de nuestro álbum, notará que en algunos casos se lee directamente a través de su contenido. Pero, ¿qué pasa si escribimos nuestras etiquetas de forma similar a cómo hablamos? Agregar una coma, o incluso una conjunción, puede ayudar a que la etiqueta suene un poco mejor para su audiencia al crear pausas en el dictado de VoiceOver

Aquí hay un ejemplo simple de simplemente agregar una coma a la etiqueta de accesibilidad para las celdas de nuestro álbum.

accessibilityLabel = "\ (titleLabel.text!), \ (artistLabel.text!)"

Es sutil pero efectivo. Mire este breve video para escuchar la diferencia que esto puede hacer. En el video, las celdas de la izquierda no contienen comas, mientras que las celdas de la derecha sí.

Trabaje con la accesibilidad en mente

Apple ha dado el primer paso y brindó a los desarrolladores la capacidad de crear aplicaciones asistidas. Continúe ese esfuerzo agregando accesibilidad a sus flujos de trabajo de desarrollo. ¡Es más fácil de lo que piensas y los usuarios de tu aplicación te lo agradecerán!

Para obtener más información sobre el diseño y el desarrollo, suscríbase a BPXL Craft y siga a Black Pixel en Twitter.

Black Pixel es una agencia creativa de productos digitales. Obtenga más información en blackpixel.com.