Dostępność cyfrowa

Od zrozumiałości przycisków i linków, ale również od łatwego identyfikowania tych elementów w aplikacji mobilnej, wiele zależy. Problemy związane z tym elementami są szczególnie dotkliwe dla osób z ograniczeniami wzroku.

Osoby niewidome nie są w stanie zobaczyć, gdzie w aplikacji mobilnej znajduje się dany przycisk czy link. Bez wizualnej informacji (kontekstu) nie zrozumieją, co wydarzy się po użyciu danego przycisku lub linku, zwłaszcza gdy wiele takich elementów ma jednakową etykietę.

iOS

Użyj accessibilityLabel, aby odróżnić łącza lub przyciski na ekranie aplikacji mobilnej, które mają widoczny taki sam tekst. Na przykład, jeśli ekran aplikacji zawiera dwa przyciski Usuń: jeden do usuwania adresu e-mail, a drugi do usuwania numeru telefonu.

Przykład

[deleteTelButton.setAccessibilityLabel:@"Usuń numer telefonu"];
[deleteMailButton.setAccessibilityLabel:@"Usuń adres e-mail"];

Android

Użyj atrybutu contentDescription, aby odróżnić łącza lub przyciski na ekranie aplikacji mobilnej, które mają widoczny taki sam tekst. Na przykład, jeśli ekran aplikacji zawiera dwa przyciski Usuń: jeden do usuwania adresu e-mail, a drugi do usuwania numeru telefonu.

Przykład

<Button
  ...
  android:id="@+id/button_deleteMail"
  android:contentDescription="Usuń adres e-mail"
  ... />
<Button
  ...
  android:id="@+id/button_deleteTel"
  android:contentDescription="Usuń numer telefonu"
  ... />

Linki do zewnętrznych zasobów muszą jednoznacznie wskazywać, za pomocą jakiej aplikacji mobilnej będzie otwarta zawartość. Nieoczekiwane otwarcie takiego elementu może bowiem spowodować dezorientację użytkownika. Jest to szczególnie ważne dla użytkowników z zaburzeniami poznawczymi lub tych, którzy korzystają z czytników ekranu.

Informuj zawsze użytkownika o formacie otwieranego dokumentu lub o włączeniu innej aplikacji, aby wiedział, czego się spodziewać i gdzie aktualnie jest podczas nawigacji.

iOS

Dla elementu, który otwiera zewnętrzną aplikację, określ UIAccessibilityTraitLink. Upewnij się, że jeśli użytkownik odwiedza aktywny element, to etykieta linku poinformuje go, że otworzy aplikację zewnętrzną.

Poinformuj też wizualnie użytkowników, że link otwiera się w nowej aplikacji. Na przykład dodaj tekst: link zewnętrzny. Możesz też za pomocą UIAlertController dodać informację ostrzegawczą, że treść otwiera się poza aplikacją.

Przykład

[openPDFLink.setAccessibilityTraits:UIAccessibilityTraitLink];
[openPDFLink.setAccessibilityLabel:@"Budżet na rok 2023 (PDF) (Otwiera się w zewnętrznej aplikacji)"];

Android

Dla elementu, który otwiera zewnętrzną aplikację, określ ContentDescription. Upewnij się, że jeśli użytkownik odwiedza aktywny element, to etykieta linku poinformuje go, że otworzy aplikację zewnętrzną.

Poinformuj też wizualnie użytkowników, że link otwiera się w nowej aplikacji. Na przykład dodaj tekst: link zewnętrzny. Możesz też za pomocą AlertDialog dodać informację ostrzegawczą, że treści otwierają się poza aplikacją.

Przykład

Button
...
android:id="@+id/button_loadPDF"
android:contentDescription="Budżet na rok 2023 (PDF) (Otwiera się w zewnętrznej aplikacji)"
... />

Linki, szczególnie śródtekstowe (czyli te, które znajdują się w środku zdania), muszą być łatwo odróżnialne od tekstu. Jest wiele sposobów, aby wyróżniać linki. Użytkownicy najlepiej rozumieją takie, którym nadasz inny kolor, niż ma tekst, i jednocześnie je podkreślisz. Ten sposób gwarantuje, że również osoby słabowidzące i niepostrzegające kolorów, będą w stanie zidentyfikować link.

Linki możesz wyróżnić w tekście samym kolorem, ale wtedy kontrast koloru linku i koloru tekstu musi wynosić co najmniej 3:1. Jednocześnie kontrast linku i kontrast tekstu do tła muszą wynieść co najmniej 4,5:1.

Użytkownicy powinni łatwo identyfikować także przyciski. Ich wygląd powinien być spójny w całej aplikacji. Przycisk najczęściej składa z kształtu oraz etykiety (tekstu lub ikony). Kontrast koloru przycisku do koloru tła, na którym go umieścisz, musi wynosić co najmniej 3:1, a kolor etykiety do koloru przycisku najczęściej 4,5:1.

Omawiamy ten temat w artykule: Kontrast kolorów.