Dostępność cyfrowa

Odpowiednia alternatywa tekstowa dla elementów graficznych sprawia, że także informacje przekazywane za pomocą na przykład zdjęć, grafik, wykresów, są dostępne dla osób, które korzystają z czytników ekranu. 

Upewnij się, że wszystkie aktywne elementy, które pełnią określoną funkcję, mają etykiety z dokładnym opisem funkcji tych elementów. Funkcja powinna być zrozumiała po przeczytaniu treści samej etykiety tekstowej lub dostępnej nazwy.

Unikaj rozwlekłych opisów, niepotrzebnych powtórzeń, niejednoznacznych instrukcji. Przeładowane treści utrudniają pracę z czytnikiem ekranu.

iOS

Użyj atrybutu accessibilityLabel, aby zapewnić alternatywę dla elementów nietekstowych. Etykieta Label może być również dodana w panelu Inspektora Dostępności w Xcode.

Alternatywę tekstową zapewnij również wtedy, gdy obraz, obiekt lub inny element interfejsu, dynamicznie zmienia swoją zawartość.

Przykład

element.accessibilityLabel = "Opis dostępny dla czytnika ekranu"

Android

Zapewnij etykiety za pomocą atrybutu android:contentDescription. Upewnij się, że ten atrybut występuje konsekwentnie dla każdego (niedekoracyjnego) elementu interfejsu: ImageButton, ImageView, Checkbox oraz wszystkich kontrolek, aby w ten sposób zapewnić dodatkowe informacje użytkownikom, którzy nie mogą ich zobaczyć. 

Zdefiniuj właściwości takich elementów, jak: focusable oraz importantForAccessibility, aby zapewnić dostępności elementów nieaktywnych.

Pamiętaj, że android:contentDescription nie zapewnia dostępnej nazwy dla pól tekstowych formularzy. Zastosuj android:labelFor.

Przykład 1

<ImageButton
  android:id="@+id/play_button"
  android:src="@drawable/nazwa_elementu_graficznego_SRC"
  android:contentDescription="@string/etykieta elementu graficznego odczytywana przez czytnik ekranu" />

Przykład 2

<ImageView
  android:id="@+id/example_image"
  android:src="@drawable/example_image_source"
  android:focusable="true"
  android:importantForAccessibility="yes"
  android:contentDescription="[opis alternatywny dla elementu graficznego]" />

Elementy dekoracyjne, czyli takie, które nie przekazują ważnych informacji lub nie pełnią funkcji — nie wymagają stosowania etykiet treści. W takim przypadku ukryj element dekoracyjny przed technologiami asystującymi.

Możesz zdefiniować odpowiednie właściwości i stany dla tych elementów lub obiektów, dzięki którym technologia wspomagająca wie, że dany element jest poza ekranem, jest zasłonięty lub ukryty.

iOS

Nie stosuj etykiety i upewnij się, że właściwość isAccessibilityElement ma wartość false.

W Objective-C wyłącz wszystkie dekoracyjne elementy graficzne w interfejsie użytkownika z obiegu aktywnego fokusu dostępności [myElement.setAccessibilityElement:NO;].

Android

Nie stosuj etykiety i upewnij się, że właściwość importantForAccessibility, jak i atrybut focusable przyjmują wartość false.

Aby zapewnić kompatybilność ze starszymi wersjami systemu Android dla atrybutu contentDescription ustaw wartość @null.

Przykład

android:source="@drawable/example_decorative_image_source"
android:focusable="false"
android:importantForAccessibility="false"
android:contentDescription="@null" />