Dostępność iOS: Getting Started

Ludzie ze wszystkich środowisk, w każdym wieku i z różnych środowisk korzystają z aplikacji na smartfony, w tym osoby niepełnosprawne. Projektowanie aplikacji z myślą o dostępności pomaga wszystkim z nich korzystać, w tym osobom z niepełnosprawnością wzroku, ruchu, uczenia się lub słuchu.

W tym samouczku dostępności systemu iOS przekształcisz istniejącą aplikację, aby uczynić ją bardziej dostępną dla osób z niepełnosprawnością wzroku. W trakcie tego procesu dowiesz się, jak:

• Używać VoiceOver.
• Sprawdzić aplikację za pomocą Inspektora dostępności.
• Wdrożyć elementy dostępności za pomocą UIKit.
• Zbudować lepsze wrażenia użytkownika dla osób niepełnosprawnych.

Ten samouczek wymaga Xcode 11.3 i Swift 5.1. Zakłada on, że znasz już podstawy programowania w języku Swift. Jeśli jesteś początkującym użytkownikiem języka Swift, powinieneś najpierw zapoznać się z naszą książką Swift Apprentice.

Rozpoczynanie

W tym samouczku będziesz pracować z już ukończoną aplikacją o nazwie Recipe, która zawiera listę przepisów i ich poziomy trudności. Pozwala ona również oceniać jakość wykonanych potraw.

Pobierz wszystko, czego potrzebujesz, aby zacząć, używając przycisku Pobierz materiały na górze lub na dole poradnika. Otwórz plik Recipe.xcodeproj w folderze begin.

Zanim będziesz mógł uruchomić aplikację na urządzeniu, musisz skonfigurować podpisywanie.

Aby to zrobić, kliknij projekt Recipe w nawigatorze, a następnie wybierz cel o tej samej nazwie. Wybierz kartę Podpisywanie & Możliwości, a następnie upewnij się, że wybrałeś Debug na górze. Na koniec wybierz swój zespół z listy rozwijanej.

Zapoznanie się z aplikacją Recipe

Teraz zbuduj i uruchom aplikację, aby zapoznać się z jej funkcjami.

Kontroler główny to widok tabeli z przepisami zawierającej obraz, opis i ocenę trudności. Kliknij przepis na większy obrazek ze składnikami przepisu i instrukcjami.

Aby uczynić rzeczy bardziej ekscytującymi, możesz również skreślać pozycje na liście, aby upewnić się, że masz wszystkie niezbędne składniki. Jeśli kochasz lub nienawidzisz tego, co zrobiłeś, możesz przełączyć emoji like/dislike.

Behind the Scenes of the Recipe App

Spędź kilka minut zapoznając się z kodem w projekcie begin. Oto kilka najważniejszych punktów:

• Main.storyboard zawiera wszystkie sceny storyboard dla aplikacji. Zauważysz, że wszystkie komponenty UI to standardowe kontrolki i widoki UIKit. Są one już dostępne, co ułatwia Ci pracę.
• RecipeListViewController.swift zarządza głównym widokiem tabeli, który wyświetla listę wszystkich dostępnych przepisów. Jako źródło danych wykorzystuje tablicę obiektów Recipe.
• Recipe.swift jest obiektem modelu, który reprezentuje przepis. Zawiera metody użytkowe do ładowania tablicy przepisów, z których będziesz korzystać w całej aplikacji.
• RecipeCell.swift jest komórką listy przepisów kontrolera głównego. Wyświetla poziom trudności, nazwę i zdjęcie przepisu na podstawie przekazanego Recipe obiektu modelu.
• RecipeInstructionViewController.swift zawiera kod kontrolera widoku szczegółowego, który pokazuje duży obraz potrawy wraz z jej składnikami i instrukcjami gotowania. Posiada on UISegmentedControl do przełączania między składnikami i instrukcjami w widoku tabeli, który używa InstructionViewModel.
• InstructionViewModel.swift działa jako źródło danych dla RecipeInstructionsViewController. Zawiera opisy dla składników i instrukcji oraz informacje o stanie dla pól wyboru.
• InstructionCell.swift definiuje komórkę, która zawiera etykietę i pole wyboru do użycia w instrukcjach i listach składników. Gdy zaznaczysz pole, przekreśla ono tekst.

Teraz rozumiesz, jak działa aplikacja, czas zastanowić się, jak uczynić ją bardziej dostępną.

Why Accessibility?

Zanim zaczniesz pracę z kodem, ważne jest, aby zrozumieć korzyści płynące z dostępności.

• Zaprojektowanie aplikacji pod kątem dostępności ułatwia pisanie testów funkcjonalnych, niezależnie od tego, czy używasz frameworka KIF czy UI Testing w Xcode.
• Rozszerzysz również swój rynek i bazę użytkowników, czyniąc swoją aplikację użyteczną dla większej grupy.
• Jeśli pracujesz dla jakiejkolwiek agencji rządowej, jesteś zobowiązany do wdrożenia zgodności 508, która stwierdza, że każde oprogramowanie lub technologia musi być dostępna dla wszystkich użytkowników.
• Wdrożenie dostępności w swojej aplikacji pokazuje, że jesteś gotów przejść dodatkową milę dla każdego użytkownika, a to jest dobra rzecz.
• To miłe uczucie wiedzieć, że robisz małą, ale zauważalną różnicę w czyimś życiu! :]

Przekonany? W takim razie czas poznać VoiceOver, narzędzie dostępności dla osób z niepełnosprawnością wzrokową.

Włączanie VoiceOver

iOS jest wyposażony w narzędzie do odczytywania ekranu VoiceOver, które pomaga użytkownikom wchodzić w interakcje z oprogramowaniem bez konieczności patrzenia na ekran. Zostało ono zaprojektowane specjalnie dla osób z problemami wzrokowymi.

VoiceOver pozwala użytkownikom z upośledzeniem wzroku słyszeć i współdziałać z tym, co widać na ekranie. VoiceOver reaguje na gesty i w sposób dźwiękowy przekazuje użytkownikowi informacje o tym, co znajduje się na ekranie lub co użytkownik wybiera. W istocie VoiceOver jest łącznikiem między interfejsem użytkownika a jego danymi dotykowymi.

Najszybszym sposobem korzystania z VoiceOver jest otwarcie aplikacji Ustawienia na urządzeniu z systemem iOS, wybranie Dostępność ▸ Skrót dostępności, a następnie wybranie VoiceOver.

Tworzy to skrót, dzięki któremu można trzykrotnie dotknąć przycisku głównego – lub przycisku bocznego w nowszych telefonach – na urządzeniu fizycznym, aby włączyć lub wyłączyć VoiceOver.

Po włączeniu VoiceOver nadszedł czas, aby ją wypróbować.

Jak korzystać z VoiceOver

VoiceOver jest wyposażony w kilka przydatnych zestawów gestów, które ułatwiają poruszanie się po aplikacji. Oto kilka najczęściej stosowanych gestów w aplikacji, które można wykonywać za pomocą VoiceOver:

• Pojedyncze dotknięcie dowolnego miejsca na ekranie, a VoiceOver odczyta na głos informacje identyfikacyjne z atrybutów dostępności elementu.
• Wykonaj jedno przeciągnięcie w lewo lub w prawo, a VoiceOver wybierze następny widoczny element dostępności i odczyta go na głos. Pojedyncze przeciągnięcie w prawo powoduje ruch do przodu i w dół, a przeciągnięcie w lewo – odwrotnie.
• Pojedyncze przeciągnięcie w dół, aby przeliterować skoncentrowany element litera po literze.
• Dwukrotne stuknięcie, aby wybrać skoncentrowany element.
• Przeciągnięcie trzema palcami w lewo lub w prawo, aby nawigować do przodu lub do tyłu w widoku strony.

Pełną listę gestów VoiceOver można znaleźć na stronie Apple’s Learn VoiceOver gestures on iPhone. Teraz już wiesz, jak działa funkcja VoiceOver – ale jak Twoja aplikacja radzi sobie z nią? Przetestujesz to w następnym kroku.

Trying VoiceOver With the Recipe App

Zbuduj i uruchom na fizycznym urządzeniu, a następnie potrójnie kliknij przycisk home, aby włączyć VoiceOver. Przesuń palcem w lewo i w prawo, aby poruszać się po liście przepisów. VoiceOver odczytuje elementy od góry po lewej stronie do dołu po prawej. Zaczyna od nazwy nagłówka, po której następuje nazwa każdego przepisu i nazwa powiązanego z nim zdjęcia.

Jest jednak kilka problemów z działaniem funkcji VoiceOver:

1. Obraz nie jest pomocnym opisem widoków obrazu w każdej komórce. Wiesz, że jest tam obraz, ale nie wiesz, co to jest.
2. VoiceOver nie mówi nic o poziomie trudności każdego przepisu, co czyni tę funkcję bezużyteczną dla osób z niepełnosprawnością wzrokową.

Po zidentyfikowaniu obszarów problemowych możesz od razu przejść do ich rozwiązywania. Ale zanim to zrobisz, musisz wiedzieć co nieco o tym, jak działają funkcje dostępności.

Atrybuty dostępności

Atrybuty dostępności to podstawowe komponenty, które musisz zaimplementować, aby zapewnić dostępność. Atrybuty te dostarczają VoiceOver informacje o elementach w aplikacji, dzięki czemu VoiceOver może odczytywać te informacje na głos użytkownikom. Jeśli nie zostaną one prawidłowo skonfigurowane, VoiceOver nie będzie w stanie dostarczyć niezbędnych informacji o aplikacji.

Atrybut dostępności ma pięć właściwości:

1. Etykieta: Zwięzły sposób identyfikacji kontrolki lub widoku. Niektóre przykłady to przycisk Wstecz i obrazek przepisu.
2. Cechy: Opisują one stan elementu, jego zachowanie lub zastosowanie. Na przykład cechą przycisku może być is selected.
3. Podpowiedź: Opisuje akcję, którą wykonuje element. Na przykład: Wyświetla szczegóły przepisu.
4. Ramka: Obramowanie elementu na ekranie, w formacie CGRect. VoiceOver wypowiada zawartość CGRect.
5. Wartość: Wartość elementu. Na przykład w przypadku paska postępu lub suwaka bieżąca wartość może wynosić: 5 na 100.

Większość komponentów UIKit wstępnie ustawia te atrybuty za Ciebie; musisz tylko dostarczyć szczegóły, aby poprawić wrażenia użytkownika. Jeśli tworzysz niestandardowe kontrolki, będziesz musiał sam dostarczyć większość atrybutów.

Więc teraz wiesz, skąd VoiceOver bierze informacje, które przekazuje użytkownikom, czas poznać nowe narzędzie, które pomoże Ci znaleźć i naprawić słabe punkty dostępności w Twojej aplikacji: Inspektor dostępności.

Używanie Inspektora dostępności

Jeśli modernizujesz aplikację, aby była bardziej dostępna, znalezienie słabych punktów jest czasochłonne i podatne na błędy. Na szczęście istnieje narzędzie o nazwie Inspektor dostępności, które wykonuje następujące czynności:

• Przebiega przez aplikację i znajduje typowe problemy z dostępnością.
• Pozwala sprawdzić atrybuty dostępności elementów UI w trybie inspekcji.
• Dostarcza podglądy na żywo elementów dostępności bez opuszczania aplikacji.
• Obsługuje wszystkie platformy, w tym macOS, iOS, watchOS i tvOS.

Zanim skorzystasz z Inspektora dostępności na Recipes, przyjrzyj się narzędziu. Najpierw otwórz je w menu Xcode, przechodząc do Xcode ▸ Otwórz narzędzie programisty ▸ Inspektor dostępności.

Inspektor powinien wyglądać tak:

Wybór celu pozwala wybrać urządzenie, które chcesz sprawdzić. Może to być Twój MacBook Pro, urządzenie z systemem iOS lub Twój symulator.

Podglądy na żywo elementów dostępności umożliwiają testowanie bezpośrednio w symulatorze. Ponieważ podglądy na żywo są szybsze niż słuchanie VoiceOver, to właśnie tam wykonasz większość swojej pracy podczas tego samouczka dostępności iOS.

Zbuduj i uruchom w symulatorze, i zmień cel Inspektora dostępności na swój symulator:

Teraz, gdy masz otwarte narzędzie, możesz przyjrzeć się niektórym z jego najbardziej pomocnych funkcji.

Używanie wskaźnika inspekcji

Wybranie wskaźnika inspekcji, który wygląda jak celownik w interfejsie inspektora, jest podobne do włączenia VoiceOver na urządzeniu. Po włączeniu wskaźnika można najechać kursorem na dowolny element UI, aby sprawdzić jego atrybuty. Interakcja z symulatorem bezpośrednio przez naciśnięcie przycisku spowoduje wyłączenie wskaźnika inspekcji.

Okienko szczegółów inspekcji ma wszystko, czego potrzebujesz do przeglądania i interakcji z atrybutami dostępności w aplikacji:

• Podstawowe: Wyświetla właściwości atrybutów dla aktualnie podświetlonego elementu.
• Akcje: Umożliwia wykonywanie akcji, takich jak stukanie w przycisk lub przewijanie widoku. Naciśnięcie przycisku Wykonaj w tym okienku spowoduje wykonanie akcji na celu.
• Element: Wyświetla klasę, adres i kontroler bieżącego elementu. W chwili pisania tego tekstu nie działa on konsekwentnie.
• Hierarchia: Pokazuje hierarchię widoku dla elementu, ułatwiając zrozumienie złożonych widoków.

Używanie Quicklook do sprawdzania audio w Xcode

Xcode 11 ma nową funkcję w panelu Szczegóły inspekcji, w sekcji Quicklook u góry, która pozwala na symulowanie w Xcode dźwięku, który można usłyszeć na urządzeniu. Oznacza to, że możesz sprawdzić, co słyszą użytkownicy podczas korzystania z aplikacji bez konieczności posiadania rzeczywistego urządzenia.

Naciśnij przycisk Odtwórz, gdy aplikacja jest uruchomiona w symulatorze, pozwól inspektorowi dostępności przejść przez aplikację i słuchać, jak opisuje każdy element na głos.

Jeśli wolisz ręcznie przejść przez każdy element, możesz nacisnąć przycisk Pauza lub przycisk Audio w sekcji Quicklook. Naciśnij przyciski Dalej lub Wstecz, aby przejść przez każdy element w swoim własnym tempie.

Używanie tej funkcji jest szybsze niż uruchamianie aplikacji na urządzeniu i używanie VoiceOver, szczególnie podczas opracowywania. Jak zawsze, chcesz również przetestować swoją aplikację, wraz ze wszystkimi jej funkcjami dostępności, na prawdziwych urządzeniach.

Wykrywanie problemów za pomocą funkcji Audyt inspektora

Jedną z najbardziej użytecznych funkcji funkcji Audytu inspektora jest możliwość audytu, która daje ostrzeżenia o problemach z dostępnością w Twojej aplikacji. Aby wypróbować tę funkcję, upewnij się, że symulator jest nadal uruchomiony, a ty jesteś na liście receptur. W inspektorze kliknij ikonę Audyt, a następnie Uruchom audyt.

Zobaczysz, że inspektor daje kilka ostrzeżeń, w tym, że niektóre z twoich elementów nie mają opisu.

Kiedy klikniesz ostrzeżenie, Xcode podświetla powiązany element w symulatorze, jak również na dole ekranu Audytu inspektora.

W tym przypadku widoki obrazów powiązane z komórkami nie mają opisu. Oznacza to, że VoiceOver nie będzie w stanie opisać ich czytelnikom.

Kliknij ikonę Sugeruj poprawki, która wygląda jak znak zapytania w kółku, dla jednego z ostrzeżeń, a inspektor zaproponuje sugestie, jak naprawić problem. Później zastosujesz się do tych sugestii.

Kliknij ikonę oka, aby zrobić migawkę aplikacji. Jest to przydatne dla każdego, kto zajmuje się zapewnianiem jakości i musi tworzyć dokładne raporty błędów.

Jest jeszcze kilka przydatnych ustawień dostępności, które można znaleźć w inspektorze. Następnie szybko przyjrzymy się tym funkcjom.

Dodatkowe ustawienia inspektora

Chociaż są one poza zakresem tego poradnika, dobrze jest wiedzieć, że inspektor dostępności pozwala również na testowanie następujących ustawień dostępności:

1. Odwróć kolory
2. Zwiększ kontrast
3. Zmniejsz przezroczystość
4. Zmniejsz ruch
5. Zmień rozmiar czcionki

Nie musisz już korzystać z aplikacji Ustawienia, aby włączyć te funkcje. Inspektor dostępności oferuje obecnie tylko te pięć opcji, ale Apple planuje dodać więcej w przyszłości.

Inspektor dostępności oszczędza czas podczas testowania aplikacji. Pamiętaj jednak, że nadal powinieneś testować VoiceOver ręcznie, aby wypróbować rzeczywiste wrażenia użytkownika. Ten ostatni krok pomoże wychwycić wszelkie problemy, które inspektor przeoczy.

Po zapoznaniu się z funkcjami inspektora dostępności, czas zabrać się do pracy nad swoją aplikacją.

Uczynienie aplikacji Recipe Accessible

Gdy testowałeś swoją aplikację na urządzeniu z VoiceOver, zauważyłeś, że opisy obrazków nie były zbyt użyteczne. Narzędzie do audytu pokazało Ci powód: Widok obrazu nie miał etykiety dostępności. Zamierzasz to teraz naprawić.

W Xcode otwórz RecipeCell.swift i dodaj następujący kod do dolnej części pliku:

// MARK: Accessibilityextension RecipeCell { func applyAccessibility(_ recipe: Recipe) { // 1 foodImageView.accessibilityTraits = .image // 2 foodImageView.accessibilityLabel = recipe.photoDescription }}

Ten kod wypełnia brakujące właściwości dostępności na podstawie obiektu Recipe dla komórki. Oto jak to działa:

1. accessibilityTraits pobiera maskę cech, które charakteryzują element dostępności. W tym przypadku .image wskazuje, że jest to obraz.
2. Używasz accessibilityLabel do opisania elementu w VoiceOver. Tutaj jest on ustawiony na recipe.photoDescription, czyli ciąg znaków opisujący zawartość obrazu.

Teraz chcesz zastosować to również do przyszłych przepisów. Znajdź configureCell(_:) w klasie RecipeCell. Dodaj następujący wiersz na końcu metody:

applyAccessibility(recipe)

Za każdym razem, gdy utworzysz komórkę, ten kod zastosuje atrybuty dostępności do obrazu przy użyciu właściwości w obiekcie receptury.

Zbuduj i uruchom na swoim urządzeniu oraz włącz funkcję VoiceOver za pomocą trzech dotknięć przycisku home. Przetestuj listę przepisów, aby sprawdzić, czy opisy obrazów są bardziej znaczące.

Dużo lepiej! Zamiast słyszeć po prostu „Obraz”, co nie dawało żadnych konkretnych szczegółów, teraz słyszysz pełny opis obrazu. Użytkownik może teraz wizualizować jedzenie, zamiast być sfrustrowanym niewiedzą, co to za obrazek.

Z aplikacją nadal działającą w symulatorze, uruchom ponownie Inspektora dostępności i przejdź do listy przepisów. Upewnij się, że wyczyściłeś wszystkie ostrzeżenia w inspektorze i stuknij Uruchom audyt.

WOOt – koniec z ostrzeżeniami o opisach! Po pomyślnym dodaniu opisów do obrazów, rdzeń tego widoku jest teraz w pełni dostępny.

Teraz nadszedł czas, aby udostępnić poziom trudności przepisu.

Przekształcanie etykiet trudności

W Inspektorze dostępności widać potencjalnie niedostępne ostrzeżenia tekstowe, które informują, że etykiety trudności są niewidoczne dla użytkownika z upośledzeniem wzroku. Aby je naprawić, musisz uczynić etykiety dostępnymi i zaktualizować ich właściwości za pomocą znaczącego opisu.

Aby wykonać kolejny krok, przejdź do RecipeCell.swift i dodaj następujące elementy na końcu applyAccessibility(_:):

// 1difficultyLabel.isAccessibilityElement = true// 2difficultyLabel.accessibilityTraits = .none// 3difficultyLabel.accessibilityLabel = "Difficulty Level"// 4switch recipe.difficulty {case .unknown: difficultyLabel.accessibilityValue = "Unknown"case .rating(let value): difficultyLabel.accessibilityValue = "\(value)"}

Tutaj jest trochę więcej szczegółów na temat tego, co robi ten kod:

1. isAccessibilityElement to flaga, która sprawia, że element jest widoczny dla funkcji dostępności, gdy true. Dla większości klas UIKit domyślnie jest true, ale dla UILabel jest to false.
2. accessibilityTraits pomaga scharakteryzować element dostępności. Ponieważ nie potrzebujesz żadnych interakcji, ustawiasz go tak, aby nie miał żadnych cech.
3. Następnie, każesz VoiceOver zwięźle określić intencję tej etykiety. Difficulty Level pozwala użytkownikowi dokładnie wiedzieć, z czym ma do czynienia.
4. VoiceOver odczyta accessibilityValue jako część opisu etykiety. Ustawienie poziomu trudności w tym miejscu czyni ten element znacznie bardziej użytecznym.

Zbuduj i uruchom swoją aplikację na urządzeniu fizycznym, potrójnie stuknij przycisk home, aby włączyć VoiceOver i przesuń palcem po liście przepisów.

Podczas przewijania różnych elementów dostępności VoiceOver odczytuje pełny opis każdej komórki, w tym poziom trudności.

Sprawdzanie ostrzeżeń

Za każdym razem, gdy pojawi się nowy element dostępności, tak jak to miało miejsce w przypadku poziomu trudności, należy ponownie uruchomić audyt.

Uruchom Inspektora dostępności, jeśli jeszcze nie jest uruchomiony. Uruchom aplikację na swoim urządzeniu lub symulatorze i ustaw odpowiednio cel inspektora. Teraz, wybierz przycisk przełączania audytu i dotknij Uruchom audyt.

Wyświetliło się mniej ostrzeżeń! Pozostałe dotyczą etykiet, które nie obsługują dynamicznego tekstu. Naprawisz je w następnej kolejności.

Uczynienie tekstu dynamicznym

Audytor ostrzega Cię, że brakuje Ci ważnego kroku, aby Twoja aplikacja była użyteczna dla wszystkich: dynamicznego tekstu. Jest to ważna funkcja dla dostępności, pozwalająca użytkownikom z częściowym upośledzeniem wzroku na zwiększenie rozmiaru czcionki w celu zwiększenia czytelności. Niedynamiczna czcionka, której obecnie używa Twoja aplikacja, nie pozwala na to.

Kliknij ikonę Fix Suggestions, aby zobaczyć, co zaleca audytor:

Powiada, aby użyć preferowanej czcionki UIfont i ustawić adjustsFontForContentSizeCategory na true. Zrobisz to teraz.

Wewnątrz RecipeCell.swift dodaj następujący kod wewnątrz applyAccessibility(_:) na samym dole:

dishNameLabel.font = .preferredFont(forTextStyle: .body)dishNameLabel.adjustsFontForContentSizeCategory = truedifficultyLabel.font = .preferredFont(forTextStyle: .body)difficultyLabel.adjustsFontForContentSizeCategory = true

To ustawia preferredFont na styl body, co oznacza, że iOS będzie stylizował tekst tak jak ciało dokumentu. Specyfika rozmiaru i czcionki zależy od ustawień dostępności. adjustsFontForContentSizeCategory wskazuje, że czcionka powinna być aktualizowana automatycznie, gdy użytkownik zmieni rozmiar zawartości tekstu.

Sprawdzenie, jak twoja aplikacja radzi sobie ze zmianą rozmiaru czcionek jest łatwe, dzięki inspektorowi dostępności.

Zbuduj i uruchom aplikację recepturową wraz z inspektorem dostępności. Uruchom audyt ponownie, a wszystkie ostrzeżenia powinny zniknąć.

Sprawdzanie innych opcji

Przejdź do przełącznika Ustawienia w inspektorze i poeksperymentuj z niektórymi narzędziami:

1. Odwróć kolory, aby zobaczyć, jak wygląda interfejs z tą funkcją dostępności. Jest to przydatne dla osób z wrażliwością na światło, słabym wzrokiem, a w niektórych przypadkach ślepotą na kolory.
2. Możesz również przetestować dynamiczne zmiany rozmiaru czcionki w czasie rzeczywistym dla użytkowników, którzy preferują większe rozmiary czcionek.

Jak testujesz swoją aplikację, prawdopodobnie wygląda ona podobnie do tej:

Inspektor ułatwia testowanie przypadków dostępności. Na tej podstawie można stwierdzić, że lista przepisów będzie działać dobrze dla użytkowników z wadami wzroku.

Transforming the Recipe Detail Screen

Teraz, gdy zająłeś się listą opcji przepisów, chcesz zobaczyć, co się stanie, gdy użytkownik kliknie jeden z przepisów. Uruchom aplikację na swoim urządzeniu, włącz funkcję VoiceOver i rozejrzyj się po widoku szczegółów. Brzmi to mniej więcej tak:

Istnieją pewne problemy z interakcją VoiceOver w widoku szczegółów:

1. Przycisk strzałki w lewo nie jest dobrym opisem dla nawigacji. Skąd użytkownik miałby wiedzieć, do czego służy ten przycisk?
2. Stany twarzy emoji to: oczy w kształcie serca i zdezorientowana twarz. Te wyjaśnienia wprawiłyby w zakłopotanie każdego użytkownika!
3. Kiedy użytkownik wybiera pole wyboru, odczytuje ikonę pustą, co nie wyjaśnia zbyt wiele.

W każdym z tych przypadków ważne jest, aby wyjaśnić, co oznacza stan kontrolki, a nie jak wygląda. Przycisk Wstecz jest bardziej przejrzysty niż przycisk Strzałka w lewo. Like i Dislike zwięźle wyjaśniają emojis. Te dwie zmiany wprowadzisz w następnej kolejności.

Aby zmienić nawigację, otwórz plik RecipeInstructionsViewController.swift i dodaj następujące elementy do viewDidLoad, po assert(recipe != nil):

backButton.accessibilityLabel = "back"backButton.accessibilityTraits = .button

Zamiast przycisku strzałki w lewo, VoiceOver mówi teraz przycisk Wstecz.

A teraz przejdźmy do emojis. W tym samym pliku zastąp zawartość isLikedFood(_:) następującym tekstem:

if liked { likeButton.setTitle("😍", for: .normal) likeButton.accessibilityLabel = "Like" likeButton.accessibilityTraits = .button didLikeFood = true} else { likeButton.setTitle("😖", for: .normal) likeButton.accessibilityLabel = "Dislike" likeButton.accessibilityTraits = .button didLikeFood = false}

Zarówno w przypadku trybu „Lubię to”, jak i „Nie lubię tego”, dodano element accessibilityLabel, który jasno określa działanie przycisku. Ustawiłeś także accessibilityTraits, aby zidentyfikować go jako przycisk, więc użytkownik wie, jak może z nim współdziałać.

Zbuduj i uruchom na urządzeniu oraz włącz VoiceOver. Przejdź do ekranu szczegółowego przepisu, używając VoiceOver, aby przetestować zmiany wprowadzone w przyciskach w górnej części widoku.

Teraz każda z tych funkcji ma jasne, krótkie opisy, które pomagają użytkownikowi zrozumieć ich przeznaczenie. Znacznie lepiej!

Poprawa pól wyboru

Ostatni problem dotyczy listy kontrolnej. W przypadku każdego pola wyboru VoiceOver obecnie podaje pustą ikonę, a następnie instrukcję dotyczącą przepisu. To wcale nie jest jasne!

Aby to zmienić, otwórz InstructionCell.swift i poszukaj shouldStrikeThroughText(_:). Zastąp całą instrukcję if strikeThrough następującym tekstem:

// 1checkmarkButton.isAccessibilityElement = falseif strikeThrough { // 2 descriptionLabel.accessibilityLabel = "Completed: \(text)" attributeString.addAttribute( NSAttributedString.Key.strikethroughStyle, value: 2, range: NSRange(text.startIndex..., in: text))} else { // 3 descriptionLabel.accessibilityLabel = "Uncompleted: \(text)"}

Oto, co robi ten kod:

1. Wyłącza dostępność przycisku zaznaczenia, dzięki czemu VoiceOver odczytuje go jako jedną całość, zamiast dwóch różnych elementów dostępności.
2. Kod accessibilityLabel dla opisu używa teraz zakodowanego ciągu "Completed", po którym następuje tekst. Zapewnia to wszystkie niezbędne informacje przy jednej wizycie w etykiecie.
3. Tak jak w przypadku ukończonego kodu, jeśli użytkownik zaznaczy element jako nieukończony, dodajesz "Uncompleted" przed opisem etykiety.

Zbuduj i uruchom aplikację ponownie i zobacz, jak to brzmi. To będzie muzyka dla uszu Twoich użytkowników. :]

Dokąd teraz?

Możesz pobrać ukończoną wersję projektu za pomocą przycisku Pobierz materiały na górze lub na dole tego samouczka.

W tym samouczku dostępności systemu iOS dowiedziałeś się o VoiceOver. Przeprowadzono ręczny audyt, przewijając każdy dostępny element i testując jego działanie na własnej skórze. Następnie użyto Inspektora dostępności do przeprowadzenia audytów, sprawdzenia wartości elementów dostępności i przeprowadzenia dynamicznych zmian na żywo w celu odwrócenia kolorów lub zmiany rozmiaru czcionki.

Teraz masz już narzędzia niezbędne do zwiększenia dostępności swojej aplikacji. Świadomość, że będziesz miał pozytywny wpływ na czyjeś życie, jest satysfakcjonująca.

Istnieje mnóstwo możliwości, jeśli chodzi o funkcje dostępności. Ten poradnik tylko zarysowuje powierzchnię, abyś mógł zacząć. Poniżej znajduje się więcej zasobów do sprawdzenia:

• Kategorie dostępności
• Zasoby rozwoju dostępności
• Zastosowanie dostępności do widoków niestandardowych
• Dostarczenie wyjątkowego doświadczenia dostępności
• Inspektor dostępności

Jeśli masz jakieś komentarze lub pytania, proszę dołącz do dyskusji poniżej!

.