Dostępność cyfrowa

Na formularzach opiera się wiele funkcjonalności aplikacji mobilnych. Użytkownicy aplikacji mobilnych korzystają na co dzień między innymi z wyszukiwania, przeglądania i filtrowania informacji, rejestracji czy płatności elektronicznych. Dostępność cyfrowa tych formularzy jest zatem kluczowa.

Wszystkie pola i kontrolki formularzy powinny mieć powiązane z nimi etykiety. Brak takich etykiet lub ich niejednoznaczna treść to jedne z najczęstszych błędów w formularzach.

iOS

Widoczne etykiety tekstowe pól i kontrolek zrób za pomocą UILabel. Dla każdego pola i kontrolki określ za pomocą cechy trait, czym jest dany element (na przykład UITextField).

Możesz to zweryfikować i edytować za pomocą Inspektora dostępności lub na poziomie kodu źródłowego. Jeśli zastosujesz dodatkowo etykietę accessibilityLabel, pamiętaj, aby jej tekst był taki sam jak etykiety UILabel.

Za pomocą accessibilityLabel przekaż informację o tym, że dane pole trzeba obowiązkowo wypełnić. Samo wizualne wyróżnienie (na przykład kolorem lub gwiazdką) pól, które trzeba obowiązkowo wypełnić, nie wystarczy. Takie wyróżnienie jest niedostępne dla użytkowników, którzy nie posługują się wzrokiem. Informację o obowiązkowym charakterze pola możesz podać także za pomocą hint, ale jej treść (na przykład: wymagane) czytnik ekranu nie zawsze odczyta, bo zależy to od ustawień użytkownika.

Przykład

[myLabel.setIsAccessibilityElement:YES];
[myTextField.setAccessibilityLabel:@"Nazwisko rodowe (wymagane):"];
[myTextField.setAccessibilityHint:@"Wpisz nazwisko ze swojego aktu urodzenia"];

Android

Widoczne etykiety tekstowe pól i kontrolek wykonaj za pomocą android:text i połącz je z danym polem za pomocą atrybutu android:labelFor.

Przykład

<TextView
  android.layout_width="wrap_content"
  android.layout_height="wrap_content"
  android:text="Imię:"
  android:labelFor="@+id/firstname"/>
<EditText
android:id="@+id/firstname"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="text"/>

Informację o tym, że dane pole jest obowiązkowe (wymagane) najlepiej umieść w etykiecie. Możesz to zrobić także za pomocą contentDescription (TalkBack odczyta treść tej właściwości zamiast etykiety) — takie rozwiązanie jest dostępne tylko dla osób, które korzystają z czytnika ekranu.

Przykład 1

<TextView
  android.layout_width="wrap_content"
  android.layout_height="wrap_content"
  android:text="Imię (wymagane)"
  android:labelFor="@+id/firstname"/>
<EditText
  android:id="@+id/firstname"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:inputType="text"/>

Przykład 2

<TextView
  android.layout_width="wrap_content"
  android.layout_height="wrap_content"
  android:text="Imię:*"
  android:labelFor="@+id/firstname"
  android:contentDescription="Imię (wymagane)"/>
<EditText
  android:id="@+id/firstname"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:inputType="text"/>

Etykiety elementów umieszczaj w pobliżu pól formularzy lub aktywnych kontrolek interfejsu w taki sposób, aby użytkownik łatwo je zauważył.

Etykieta powinna poprzedzać pole. Możesz ją na przykład umieścić powyżej pola lub z jego lewej strony. Wprawdzie przy polach wyboru etykiety powinny być po prawej stronie pola, ale czytnik ekranu powinien odczytać je przed kontrolką czy polem. Etykiety dla list wyboru możesz dołączyć jako pierwszą pozycję samej listy.

Unikaj nadmiernego odstępu pomiędzy etykietą a polem, którego dotyczy.

iOS

Odległość etykiety od pola określ za pomocą właściwości textAlignment.

Android

Odległość etykiety od pola określ za pomocą właściwości klas android:textAlignment lub android:gravity.

Informacja, w jakim formacie użytkownik ma wpisać dane w polu lub kontrolce formularza (na przykład o wymaganej liczbie znaków), musi być dostępna dla wszystkich użytkowników. Dla użytkownika ważna może być również informacja, jakim rodzajem klawiatury będzie wprowadzać dane.

iOS

Określ jednoznacznie format danych wejściowych, na przykład:

• UIDatePicker (dla daty);
• UITextField (dla tekstu);
• UISwitch (dla przełączania dwóch opcji i wyboru jednej z nich).

Co więcej, za pomocą keyboardType możesz określić typ klawiatury, za pomocą której użytkownik będzie wypełniać dane pole tekstowe, na przykład:

• default (klawiatura domyślna);
• url (klawiatura do wprowadzania adresów internetowych).

Jeżeli pole wymaga niestandardowej obsługi (na przykład za pomocą niestandardowego gestu), poinformuj o tym przy pomocy etykiety AccessibilityLabel lub podpowiedzi AccessibilityHint (czytnik ekranu nie zawsze odczyta to rozwiązanie).

Android

Zastosuj atrybut android:inputType do elementu editText, aby wybrać typ klawiatury, przy pomocy  której użytkownik będzie wypełniać dane pole lub wykorzysta podczas interakcji z kontrolką:

• android:inputType=”phone”  (aby wprowadzać numery telefonów);
• DatePickerDialog (aby wprowadzać daty).

Jeżeli pole wymaga niestandardowej obsługi (na przykład za pomocą niestandardowego gestu), poinformuj o tym bezpośrednio w etykiecie lub za pomocą ContentDescription (to rozwiązanie będzie dostępne tylko dla osób, które korzystają z czytnika TalkBack).

Grupowanie pól i kontrolek formularzy pozwala lepiej zrozumieć strukturę formularza i ułatwia wypełnianie.

iOS

W iOS nie ma oddzielnego mechanizmu, aby grupować powiązane pola i kontrolki.

Za pomocą UIAccessibilityTraitHeader możesz jednak określić nagłówek, niejako tytułujący daną grupę pól i kontrolek. Dodatkowo w etykiecie dostępności AccessibilityLabel każdego z pól i każdej z kontrolek, które tworzą grupę, oprócz tekstu widocznej etykiety wpisz także tekst nagłówka (UIAccessibilityTraitHeader). W trakcie nawigacji po polach, które wchodzą w skład grupy, VoiceOver odczyta wówczas te dwie informacje łącznie.

Android

W systemie Android nie ma oddzielnego mechanizmu, aby grupować powiązane pola i kontrolki. Jedynym wyjątkiem jest klasa RadioGroup, przeznaczona do grupowania przycisków typu radio.

Za pomocą android:contentDescription możesz nadpisać etykietę każdego z pól lub każdej z kontrolek, które wchodzą w skład grupy i są zagnieżdżone w obiekcie TextView. Wówczas TalkBack odczyta wartości z tego atrybutu (na przykład Wybierz typ: ulica; Wybierz typ: aleja), a nie wartość etykiety (na przykład: ulica; aleja).