Ułatwienia dostępu w Androidzie: informacje dla programistów i przewodnik po implementacji

Opublikowany: 2022-09-12

Na całym świecie jest około 285 milionów osób z wadami wzroku. Dlatego projektując nową aplikację lub rozważając modernizację projektu, z pewnością warto dostosować swoją aplikację do potrzeb tej szerokiej grupy użytkowników. Dostosowywanie aplikacji dla osób niedowidzących poprawia wrażenia wszystkich użytkowników. Jakie są inne powody, dla których warto rozważyć poprawę dostępności swojej aplikacji i jak to zrobić? Wszystkie odpowiedzi znajdziesz poniżej!

Jak osoby niedowidzące korzystają z aplikacji?

Czytnik ekranu to narzędzie do uruchamiania aplikacji (lub po prostu przeglądania ekranu smartfona) dla osób niewidomych i niedowidzących. Najpopularniejszym czytnikiem ekranu dla Androida jest TalkBack . Dzięki temu narzędziu użytkownik wprowadza dane za pomocą gestów, takich jak przesuwanie lub przeciąganie.

Zwykle wyjściem jest informacja zwrotna głosowa. W TalkBack mamy dwa tryby wprowadzania gestami:

Czytanie dotykiem , gdzie przeciągasz palcem po ekranie.
Nawigacja liniowa , w której przesuwasz palcem w lewo iw prawo, aż znajdziesz interesujący element.

Po dotarciu do przedmiotu, który Cię interesuje, możesz go dwukrotnie dotknąć, aby go aktywować. Chcesz dowiedzieć się więcej o tym, jak uruchomić TalkBack? Przeczytaj poniższy artykuł.

TalkBack to najpopularniejszy czytnik ekranu na Androida

Zasady dostępności aplikacji

Aby umożliwić osobom z wadami wzroku korzystanie z naszej aplikacji, musimy najpierw zrozumieć zasady, którymi musimy się kierować podczas jej projektowania. Dlatego zanim przejdziemy do sekcji implementacji, omówmy najważniejsze założenia.

Układ i typografia

Wizualna część aplikacji ma kluczowe znaczenie. Odpowiednio zaimplementowane przyciski i obsługa tekstu to jedne z najważniejszych czynników, które sprawiają, że aplikacja jest dostępna.

Dotknij celów

Cele dotykowe to części ekranu, które reagują na interakcję użytkownika. Głównym zaleceniem jest tworzenie celów dotykowych o rozdzielczości co najmniej 48dp x 48dp. Więcej na ten temat przeczytasz w następnym rozdziale.

Kolor i kontrast

W sieci World Wide Web opracowano wytyczne dotyczące dostępności kontrastu kolorów, aby pomóc i pomóc użytkownikom z niedoborami kolorów. Zgodnie z dokumentacją, krytyczne aspekty dotyczące dostępności kontrastu kolorów to:

Współczynnik : tekst i elementy interaktywne powinny mieć współczynnik kontrastu kolorów co najmniej 4,5:1.
Kolor jako wskaźnik : kolor nie powinien być jedynym wskaźnikiem elementów interaktywnych. Najlepiej byłoby, gdybyś również podkreślił linki po najechaniu lub zaznaczył wymagane pola gwiazdką.
Ślepota barw: najczęściej występuje ślepota na kolory czerwony/zielony. Dlatego należy unikać zielonego na czerwonym lub czerwonego na zielonym. Z tego samego powodu unikaj używania czerwonego i zielonego dla „złych” i „dobrych” wskaźników.

Typografia

Użytkownicy mogą zwiększyć rozmiar czcionki, aby poprawić czytelność . W urządzeniach z Androidem jest to często używana opcja systemowa, więc upewnij się, że jest wystarczająco dużo miejsca na duże i obce czcionki.

Tekst ułatwień dostępu

Tekst ułatwień dostępu to zarówno tekst widoczny (np. etykiety elementów interfejsu użytkownika, tekst na przyciskach, linkach i formularzach), jak i niewidoczne opisy (opisy treści, które mogą dostarczyć więcej informacji o opisywanym komponencie).

Jakie są najczęstsze przypadki użycia tekstu ułatwień dostępu ?

Rodzaje i stany kontroli

Czytniki zawartości ekranu, takie jak TalkBack, mogą automatycznie ogłaszać typ lub stan kontrolki, wypowiadając nazwę kontrolki lub wydając dźwięk.

Wskazanie elementów przez działanie

Czasowniki akcji wskazują, co robi element lub link po dotknięciu go i opisują, co robi widok.

Elementy ze zmianami stanu

W przypadku ikon, które przełączają się między wartościami lub stanami, czytnik ekranu opisuje ikonę zgodnie z tym, jak jest prezentowana użytkownikowi. Więcej przykładów można znaleźć w wytycznych dotyczących projektowania materiałów.

Streszczenie

W tym rozdziale dowiesz się, w jaki sposób projekt powinien być dostosowany do potrzeb osób niedowidzących i niewidomych. Do tej pory omówiliśmy układ, typografię i dostępność tekstu . Teraz przejdziemy do zasad ich realizacji.

Implementacja dostępności

W dalszej części skupię się na kluczowych aspektach wdrażania ułatwień dostępu do Twojej aplikacji. Zaczynajmy!

Układ — cel dotykowy

Jak wspomniałem w części teoretycznej, każdy klikalny element powinien mieć co najmniej 48dp/48dp.

Można to zrobić na kilka sposobów. Mógłbyś:

Określ zalecane wartości atrybutów szerokości i wysokości (48dp/48dp)
Dodaj dopełnienie wokół ikon
Określ wartości dla atrybutów: MinWidth i/lub minHeight
Zarejestruj się TouchDelegate.

Spójrz na przykład z oficjalnej dokumentacji Google. Pokazuje element, który ma zalecany rozmiar celu dotykowego :

 <Przycisk Obrazu 
   ...
   android:minWidth="40dp"
   android:minHeight="32dp"
   android:paddingLeft="4dp"

   android:dopełnienie Top="8dp"
   android:dopełnienieRight="4dp"
   android:paddingBottom="8dp" />

Tekst ułatwień dostępu

Jednym ze sposobów dołączenia tekstu ułatwień dostępu do elementów interfejsu użytkownika jest użycie atrybutu systemu Android o nazwie ContentDescription . Jeśli nie podasz go na przykład dla przycisku obrazu, wrażenia użytkownika TalkBack mogą być irytujące.

Spójrz na przykład:

 <!-- Wartość następującego ciągu to „Szukaj”. -->
<Widok obrazu
   ...
   android:contentDescription="@ciąg/wyszukiwanie" />

W przypadku elementów dekoracyjnych, takich jak przekładki i separatory, ustaw atrybut “android:contentDescription” na "null" . Jeśli Twoja aplikacja obsługuje tylko urządzenia z systemem Android 4.1 (poziom interfejsu API 16) lub nowszym, możesz zamiast tego ustawić atrybuty “android:importantForAccessibility” na "no" .

Upewnij się, że w opisie treści nie umieszczasz typu kontrolki ani stanu kontrolki. Android ma natywnie słowa takie jak przyciski, zaznaczone, zaznaczone itp.

Techniki etykietowania

Poniżej znajdziesz zestaw dobrych praktyk opisujących komponenty UI w Twojej aplikacji.

Komponenty, które się opisują

Jeśli masz komponent, który pozwala na dostarczenie pewnych danych (np. EditText), dobrze jest mieć obiekt View , który go opisuje (np. TextView). Dlatego utworzono atrybut "android:labelFor" . Proszę spojrzeć na przykład:

 <!-- Tekst etykiety to „Nazwa:” -->
<WidokTekstowy 
   ...
   android:
   android:labelFor="@+id/nazwaWpis"
   android:text="@ciąg/nazwa" />

<!-- Tekst ułatwień dostępu to „Edytuj tekst dla nazwy” -->
<Edytuj tekst 
   ...
   android: />

<!-- Tekst etykiety to „Nazwisko:” -->
<WidokTekstowy 
   ...
   android:
   android:labelFor="@+id/nazwiskoWpis"
   android:text="@ciąg/nazwisko" />

<!-- Tekst ułatwień dostępu to „Edytuj tekst dla nazwiska” -->
<Edytuj tekst 
   ...
   android: />

Kolekcja powiązanych elementów

Jeśli Twoja aplikacja zawiera elementy interfejsu użytkownika, które są ze sobą naturalnie powiązane (takie jak pola z informacjami o książce), możesz uporządkować je w grupy , używając kontenera , z którym można się skoncentrować . W tym celu ustaw atrybut “android:focusable” obiektu kontenera na wartość true.

W ten sposób TalkBack może przedstawiać opisy zawartości elementów wewnętrznych jeden po drugim w jednym ogłoszeniu. Grupowanie treści zmniejsza ilość przesuwania, jaką musi wykonać użytkownik, jednocześnie usprawniając wydawanie mowy. Proszę spojrzeć na przykład:

 <Układ liniowy 
   ...
   android:
   android:orientacja="pionowa"
   android:focusable="true">

   <WidokTekstowy
	  ...
       android:
       android:text="@ciąg/tytuł"/>

   <WidokTekstowy
	  ...
       android:
       android:text="@ciąg/autor"/>

   <WidokTekstowy
	  ...
       android:
       android:text="@string/pages"/>
</LinearLayout>

Oczywiście, jeśli Twój kontener posiada widoki zagnieżdżone, możesz również do nich zastosować to rozwiązanie. Dzięki temu nawigacja po aplikacji będzie jeszcze bardziej dostępna.

Działania dotyczące ułatwień dostępu

Jeśli Twoja aplikacja obsługuje czynności, takie jak kliknięcie, długie naciśnięcie lub przesunięcie , musisz dostosować te czynności do osób z wadami wzroku. Na tym skupimy się w tej części artykułu.

Zobacz, jak możesz to zaimplementować:

 ViewCompat.addAccessibilityAction(
   // Widok, aby dodać akcję ułatwień dostępu
   elementWidok,
   // Etykieta odczytywana przez usługę ułatwień dostępu
   getString(R.string.save)
) { _, _ ->
   // Polecenie ułatwień dostępu
   zapiszPozycję()
   PRAWDA
}

Powoduje to, że TalkBack ogłasza „Kliknij dwukrotnie, aby zarchiwizować” .

Dzięki wdrożonej akcji ułatwień dostępu użytkownicy mogą teraz uzyskać dostęp do akcji za pośrednictwem menu akcji. Nieco później opowiem o przechodzeniu do tego menu. Pamiętaj: ważne jest, aby użytkownicy mogli wydajnie wykonywać wszystkie przepływy w Twojej aplikacji.

Widżety

Ta sekcja jest krótka, ale bardzo ważna. Podczas tworzenia składnika interfejsu użytkownika używaj lub rozszerzaj widżety dostarczane przez system, które znajdują się jak najdalej w hierarchii klas systemu Android. Widgety dostarczane przez system znajdujące się daleko w hierarchii mają już większość funkcji ułatwień dostępu, których potrzebuje Twoja aplikacja. Najważniejsze z nich to:

Działania dotyczące ułatwień dostępu
Charakterystyka
Informacje o stanie.

Dzięki temu nie będziesz musiał pisać od podstaw pełnej obsługi dostępności dla komponentu, a zmniejszysz ryzyko błędu.

Nawigacja

TalkBack nadal się rozwija. Nie tak dawno używaliśmy dwóch menu kontekstowych (globalnego i lokalnego) do nawigacji w naszym systemie smartfonów. Teraz te dwa menu stały się jednym.

Menu kontekstowe służy do dwóch głównych celów:

Jak sama nazwa wskazuje, służy do nawigacji. Możesz poruszać się po słowach, nagłówkach, łączach, wierszach, unikalnej zawartości lub innych punktach w zależności od preferencji lub możliwości aplikacji.
Drugi cel umożliwia użytkownikowi szybką zmianę ustawień i elementów sterujących TalkBack.

W tym menu można znaleźć zestaw akcji (wymienionych w sekcji „ Akcja ułatwień dostępu ” powyżej). Jak uzyskać dostęp do tego menu? To jest bardzo proste. Wystarczy przesunąć palcem w górę i wykonać właściwy gest.

Testowanie dostępności

W dotychczasowych projektach korzystałem głównie z trzech następujących pomocy: Skaner ułatwień dostępu, Espresso i Lint. Oczywiście masz do dyspozycji znacznie więcej narzędzi. Gorąco polecam sprawdzić je samemu. Tutaj znajdziesz całą niezbędną dokumentację.

Skaner ułatwień dostępu

Accessibility Scanner — narzędzie do szybkiego i łatwego testowania dostępności

To narzędzie skanuje interfejs użytkownika i podaje zalecenia dotyczące poprawy dostępności aplikacji.

Accessibility Scanner umożliwia każdemu, nie tylko programistom, szybkie i łatwe zidentyfikowanie niektórych typowych ulepszeń ułatwień dostępu, np. małych elementów dotykowych, błędów kontrastu tekstu i obrazów, brakujących opisów treści dla widżetów bez etykiet itp. Jeśli chcesz zacząć korzystać z Accessibility Scanner lub po prostu wyszukaj bardziej szczegółowe instrukcje, zapoznaj się z poniższą dokumentacją.

Android Lint

Jestem pewien, że większość z Was zna to narzędzie ze swojej codziennej pracy. Warto pamiętać, że Android Studio udostępnia również ostrzeżenia o różnych problemach z dostępnością oraz linki do miejsc w kodzie źródłowym, które je zawierają.

Espresso

Espresso to biblioteka testowa systemu Android, która pozwala szybko i łatwo przetestować interfejs użytkownika. Umożliwia interakcję z przetestowanymi komponentami interfejsu użytkownika aplikacji i zapewnia występowanie określonych zachowań lub spełnienie warunków. Oczywiście w ramach wsparcia dostępności możesz włączyć i skonfigurować testowanie dostępności .

Streszczenie

Udostępnienie aplikacji nie tylko otwiera ją dla nowych użytkowników. Pomaga poprawić nasze codzienne życie i sprawia, że świat jest bardziej otwarty. Mam nadzieję, że ten artykuł pomógł Ci poznać ułatwienia dostępu. Aby dowiedzieć się więcej, nie zapomnij sprawdzić oficjalnej dokumentacji.