Recientemente, se lanzó un nuevo codelab para Android que cubre la accesibilidad en Jetpack Compose .

En este artículo, aprenderemos cómo implementar la accesibilidad en Jetpack Compose.

Principales propiedades que ayudan a mejorar la accesibilidad de la aplicación

• Toque el tamaño del objetivo
• Haga clic en etiquetas
• Acciones personalizadas
• Descripción del contenido o descripciones de elementos visuales
• encabezados
• Fusión personalizada
• Descripciones de estado
• Navegación personalizada

• Debe asegurarse de que cualquier elemento en pantalla en el que el usuario pueda hacer clic, tocar o interactuar tenga un ancho y una altura de al menos 48dp.
• Si estos controles tienen un tamaño dinámico o cambian de tamaño según el tamaño de su contenido, considere usar el sizeIn modificador para establecer un límite inferior en sus dimensiones.

Text(
    text = "SizeIn sample",
    modifier = Modifier.sizeIn(
        minWidth = 48.dp,
        minHeight = 48.dp
    )
)

• Como puede ver a la izquierda close button’s size was 24 dp , y después de arreglarlo , es lo 48 dpque se requiere .

• Los elementos en los que se puede hacer clic de forma predeterminada no proporcionan ninguna información sobre lo que hará al hacer clic en ese elemento. Por lo tanto, los servicios de accesibilidad como TalkBack utilizarán una descripción predeterminada muy genérica.
• Podemos proporcionar una descripción específica que explique qué sucederá cuando el usuario haga clic en este elemento, lo que ayuda a brindar la mejor experiencia a los usuarios con necesidades de accesibilidad.

• Como puede ver, en el lado izquierdo, Talkback solo dice Double-tap to activate, después de la mejora, en el lado derecho, dice Double-tap to read article.

Acciones personalizadas

• Con la ayuda de las acciones de accesibilidad personalizadas, podemos agrupar acciones relacionadas con el mismo elemento de la lista.
• Podemos pasar la lista de CustomAccessibilityAction acustomActions semantic property

Descripción del contenido o descripciones de elementos visuales

• Los servicios de accesibilidad no tienen forma de dar sentido a los elementos visuales basándose únicamente en sus píxeles.
• composablesMe gusta visual Imagee Iconincluir un parámetro contentDescriptiondonde podemos pasar un localized descriptionde ese elemento visual, o nullsi el elemento es puramente decorativo .

• Podemos indicar qué partes del texto son headingslas que ayudan a los usuarios a navegar rápidamente por diferentes encabezados deslizando hacia arriba o hacia abajo ⬆️ ⬇️.
• Podemos configurar el heading semantics propertypara indicar que este componible es un encabezado .

• Los servicios de accesibilidad como TalkBack navegan elemento por elemento en la pantalla.
• De forma predeterminada, cada composición de bajo nivel en Jetpack Compose que establece al menos una propiedad semántica recibe foco .

• Composablesse pueden fusionar usando el modificador de semántica con su mergeDescendantspropiedad.

Descripciones de estado

• Al agregar una descripción personalizada para el estado del componible, podemos mejorar la accesibilidad de los componentes componibles.
• Por ejemplo, el estado de la casilla de verificación se lee como "Marcado" o "No marcado". Podemos reemplazar esta descripción con una descripción personalizada usando la stateDescription propiedad dentro del semantics modificador :

Focus Modifiersnos ayuda a personalizar la navegación entre diferentes componibles

Podemos interactuar con los mecanismos de enfoque en Compose con la ayuda de los siguientes modificadores .

• Modifier.focusTarget(): Permite hacer enfocable el componente

Text(
    text = "Hello World",
    modifier = Modifier.focusTarget()
)

val (first, second) = FocusRequester.createRefs()
You can also pass lambda to customize the focus events behaviour
Text(
    text = "Hello World",
    modifier = Modifier
        .focusOrder(first) {
            this.down = second
        // down, left, right, up, previous, next, start, end
        }
)

val (first, second) = FocusRequester.createRefs()
Text(
    text = "FocusRequester",
    modifier = Modifier
        .focusRequester(second)
)
// requestFocus 
second.requestFocus()

Modifier.onFocusChanged { focusState ->
    with(focusState) {
        when {
            hasFocus -> {
                Log.d("A child of mine has focus!")
            }
            isFocused -> {
                Log.d("I'm focused!")
            }
        }
    }
}

Referencias

https://developer.android.com/codelabs/jetpack-compose-accessibility?authuser=4#0

https://developer.android.com/jetpack/compose/accessibility?authuser=4

Mantente en contacto