Niedawno uruchomiono nowe laboratorium kodowania dla systemu Android, które obejmuje dostępność w Jetpack Compose .

W tym artykule dowiemy się, jak zaimplementować dostępność w Jetpack Compose.

Główne właściwości, które pomagają poprawić dostępność aplikacji

• Dotknij rozmiaru docelowego
• Kliknij etykiety
• Działania niestandardowe
• Opis treści lub opisy elementów wizualnych
• Nagłówki
• Scalanie niestandardowe
• Opisy stanów
• Niestandardowa nawigacja

• Upewnij się, że każdy element na ekranie, który użytkownik może kliknąć, dotknąć lub z którym może wejść w interakcję, ma szerokość i wysokość co najmniej 48dp.
• Jeśli te kontrolki mają dynamiczny rozmiar lub zmieniaj rozmiar na podstawie rozmiaru ich zawartości, rozważ użycie sizeIn modyfikatora, aby ustawić dolną granicę ich wymiarów.

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

• Jak widać po lewej stronie close button’s size was 24 dp i po naprawieniu jest 48 dpto wymagane .

• Elementy klikalne domyślnie nie dostarczają żadnych informacji o tym, co zrobi kliknięcie tego elementu. Dlatego usługi ułatwień dostępu, takie jak TalkBack, będą używać bardzo ogólnego opisu domyślnego.
• Możemy podać szczegółowy opis wyjaśniający, co się stanie, gdy użytkownik kliknie ten element, co pomaga zapewnić najlepsze wrażenia użytkownikom z potrzebami dostępności.

• Jak widać, po lewej stronie talkback mówi tylko Double-tap to activate, po poprawie po prawej stronie jest napisane Double-tap to read article.

Działania niestandardowe

• Za pomocą niestandardowych akcji ułatwień dostępu możemy zgrupować akcje, które odnoszą się do tego samego elementu listy.
• Możemy przekazać listę CustomAccessibilityAction docustomActions semantic property

Opis treści lub opisy elementów wizualnych

• Usługi ułatwień dostępu nie mają możliwości zrozumienia elementów wizualnych na podstawie samych ich pikseli.
• Visual composableslike Imagei Icondołącz parametr, w contentDescriptionktórym możemy przekazać dany localized descriptionelement wizualny lub nulljeśli element jest czysto dekoracyjny .

• Możemy wskazać, które części tekstu są headingsco pomaga użytkownikom szybko poruszać się po różnych pozycjach, przesuwając w górę lub w dół ⬆️ ⬇️.
• Możemy ustawić the , heading semantics propertyaby wskazać, że ten element do komponowania jest nagłówkiem .

• Usługi ułatwień dostępu, takie jak TalkBack, poruszają się po ekranie element po elemencie.
• Domyślnie każdy element komponujący niskiego poziomu w Jetpack Compose, który ustawia co najmniej jedną właściwość semantyczną, otrzymuje fokus .

• Composablesmożna łączyć ze sobą za pomocą modyfikatora semantyki z jego mergeDescendantswłaściwością.

Opisy stanów

• Dodając własny opis stanu komponentu komponującego możemy poprawić dostępność komponentów komposowalnych.
• Na przykład stan pola wyboru jest odczytywany jako „Zaznaczony” lub „Niezaznaczony”. Możemy zastąpić ten opis opisem niestandardowym, używając stateDescription właściwości wewnątrz semantics modyfikatora :

Focus Modifiers pomaga nam dostosować nawigację między różnymi kompozycjami

Możemy wchodzić w interakcję z mechanizmami fokusu w Compose za pomocą następujących modyfikatorów .

• Modifier.focusTarget(): Pozwala na skupienie się na komponencie

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

Bibliografia

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

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

Pozostać w kontakcie