Jeśli chodzi o dostępność, projektanci skupiają się na kolorach (tj. kontraście) i UX (tj. sformułowaniach), podczas gdy programiści skupiają się na atrybutach ARIA (tj. kodzie, który sprawia, że strony internetowe są bardziej dostępne). Wynika to z faktu, że często rysuje się grube linie między „kto co robi”.
Ponadto, ponieważ tworzenie dostępnych aplikacji i stron internetowych nie jest uważane za ekscytujące, ta linia prawie nigdy nie jest kwestionowana.
Dostępność to wciąż czarna owca, nawet w 2020 roku.
So, skoro za kopię UX odpowiada projektant, a za atrybuty ARIA odpowiada programista, to czyja dokładnie odpowiedzialność za obsługę czytników ekranu? Od:
- Kopia UX czytnika ekranu jest wyrażona w alfabecie Braille'a lub dyktando (więc jak to zakomunikować, gdy nasze narzędzia interfejsu użytkownika są wizualne?)
- Wdrożenie to terytorium programistów (czy naprawdę możemy przenieść odpowiedzialność za pisanie kopii UX na programistów?)
Jak widać, to praca dwuosobowa — a jednak narzędzia po prostu nie istnieją, aby to ułatwić. To znaczy, nie popełnij błędu, niektóre aspekty projektowania dostępności są jednostronne (na przykład projektanci interfejsu użytkownika mogą sami bardzo łatwo zadbać o kontrast kolorów). Jednak inne aspekty, takie jak projektowanie dla czytników ekranu, wymagają współpracy między projektantami i programistami.
To tutaj Adobe XD CC przekazanie projektu i prototypowanie głosu przydatne funkcje. W tym artykule omówimy, co należy wziąć pod uwagę podczas projektowania czytników ekranu, a także omówimy, jak korzystać z wymienionych powyżej funkcji.
Czym są czytniki ekranu?
Czytnik ekranu to rodzaj technologii wspomagającej, która informuje o tym, co dzieje się na ekranie (dla osób z wadami wzroku). Oprogramowanie czytnika ekranu może być używane w połączeniu z klawiaturą (na przykład użytkownicy będą: Zakładka i wchodzić w przeciwieństwie do korzystania z myszy), ale może być również używany w połączeniu ze sprzętem do odczytu ekranu, co pozwala na bardziej wydajną nawigację, a także obsługuje użytkowników korzystających z Braille'a.
Jeśli na przykład jesteś użytkownikiem Apple, będziesz nieco świadomy tego Apple VoiceOver, czyli natywne oprogramowanie Apple do dyktowania, które działa jako czytnik ekranu. Jednak użytkownicy Windowsa często używają albo SZCZĘKI or NVDA, ponieważ w systemie operacyjnym Windows nie ma żadnych natywnych narzędzi czytnika ekranu.
Nurkujmy.
1. Użyj nagłówków
Czytniki ekranu często używają nagłówków jako sposobu na odszyfrowanie struktury witryny, a jeśli myślimy zbyt wizualnie, ryzykujemy pominięcie tych nagłówków. W poniższym przykładzie pominięcie nagłówka „Rozdziały” powoduje, że czytniki ekranu zakładają, że lista rozdziałów jest kontynuacją treści po lewej stronie, co oczywiście nie jest.
W rezultacie użytkownicy czytników ekranu nie będą mogli przejść do „Rozdziałów” i mogą nie odkryć zawartych w nich informacji.
Chociaż dostępne są obejścia kodu (takie jak aria-label atrybut), mający widoczny nagłówek włącznie zapewnia bardziej przejrzyste doświadczenie dla wszyscy, niezależnie od tego, czy jest niepełnosprawny, czy nie.
Oczywiście sekcja ta jest oczywiście listą rozdziałów, jak możemy wywnioskować z kontekstu (tj. treści). Jednak osoby korzystające z czytników ekranu bardzo rzadko mieć luksus kontekstu. To jak próba znalezienia przedmiotu w magazynie, w którym żadne z pudełek nie jest oznakowane. Nasze projekty potrzebują tych etykiet i nagłówków.
Od strony technicznej zasada jest taka, że każda sekcja (zgodnie z definicją a <section> or <article> tag) powinien mieć nie tylko nagłówek, ale także wyraźny nagłówek, który nie koliduje z żadnym innym nagłówkiem. Na przykład, jeśli nagłówek najwyższego poziomu w sekcji to <h2>, to nie powinno być innego <h2> nagłówek w tej sekcji. W przeciwnym razie czytniki ekranu nie mają pojęcia, który nagłówek jest etykietą sekcji.
2. Użyj etykiet
Ikony są lepsze — dla wszyscy — gdy mają etykietę tekstową. Jeśli to podejście wygląda na zagracone, rozważ użycie tylko etykieta tekstowa. Wolisz ikonę? Cóż, w takim razie przynajmniej zadeklaruj programistom „niewidzialną etykietę”, która będzie widoczna tylko dla czytników ekranu (tak, mówię o aria-label). To samo dotyczy pól wejściowych, gdzie widoczna etykieta tekstowa jest zawsze lepsza. aria-label powinna być ostatecznością.
Obrazy mają podobne wymagania, z wyjątkiem tego, że ich opisowy tekst jest implementowany za pomocą alt etykietka. Mając to na uwadze, upewnij się, że komunikujesz się, gdy obraz jest dekoracyjny, ponieważ programiści będą musieli go ukryć przed czytnikami ekranu za pomocą aria-hidden="true".
Używanie funkcji Design Handoff do przekazywania tekstu czytnika ekranu
Niezależnie od tego, czy używasz tekstu alternatywnego, etykiet ARIA dla elementów, które nie mają żadnego widocznego tekstu, etykiet ARIA mających na celu „zastąpienie” widocznego tekstu (w celu dodania kontekstu), czy nawet po prostu określających, kiedy obraz powinien być całkowicie zignorowany przez ekran Czytelnicy, narzędzie do przekazywania projektów Adobe XD CC jest właściwym narzędziem do tego celu.
Przepływ pracy wyglądałby mniej więcej tak:
- Kliknij obszar roboczy „Udostępnij”.
- Skonfiguruj ustawienia (po prawej stronie).
- Kliknij „Utwórz link”, a następnie kliknij sam link.
- W oknie przekazywania projektu kliknij przycisk ikony „Umieść pinezkę”, aby skomentować określone elementy projektu.
- Zostaw komentarze. Na przykład:
- Podyktuj nieskróconą wersję każdej waluty
- Ten obraz tłumaczy się jako „Awatar autora: Daniel Schwarz”
- Ten obraz jest dekoracyjny — czytniki ekranu powinni go zignorować
3. Rozwijaj się, gdy jest to konieczne
Załóżmy, że komponent z zakładkami składa się z dwóch przycisków. Jedna jest oznaczona jako „ostatnia”, a druga „sekwencyjnie”.
Bez żadnego kontekstu wizualnego można się zastanawiać… co to jest ostatnio? Co jest sekwencyjnie? Czy to są przyciski? Mam coś zrobić? W połączeniu z otaczającą zawartością użytkownicy bez wad wzroku mogą łatwo wywnioskować, co się dzieje: mamy możliwość sortowania kolejności rozdziałów.
Jednak te w wady wzroku przydadzą się po pewnym opracowaniu. W szczególności kopia musi być bardziej użyteczna.
Poniższa kopia UX jest lepsza dla osób korzystających z czytników ekranu:
- „Uporządkuj rozdziały według ostatnich czasów”
- „Uporządkuj rozdziały po kolei”
A po kliknięciu przycisku:
- „Rozdziały są teraz uporządkowane według ostatnich czasów”
- „Rozdziały są teraz uporządkowane po kolei”
Używanie prototypowania głosu do przekazywania dynamicznych zmian
Podczas gdy przekazywanie projektu jest wspaniałym sposobem komunikowania, co powinno się stać, gdy użytkownik czytający ekran skupi się na elemencie (jak wspomniano powyżej, aria-label nadpisuje widoczny tekst w celu dodania kontekstu), prototypowanie głosu może służyć do komunikowania tego, co powinno się wydarzyć w wyniku interakcji.
Obieg pracy Adobe XD CC wyglądałby mniej więcej tak:
- Kliknij obszar roboczy „Prototyp”.
- Utwórz interakcję, jak zwykle.
- Wybierz „Akcja” → „Odtwarzanie głosu” (po prawej stronie).
- Wpisz tekst, który będzie odczytywany przez czytniki ekranu w sekcji „Mowa”.
Gdy coś zmienia się na ekranie, zmiany te powinny być wyraźnie komunikowane użytkownikom czytającym ekran — zwłaszcza jeśli te zmiany wymagają od użytkowników odpowiedzi. Oto kilka innych przykładów:
- „(X) wysłał Ci wiadomość”
- „Twoja sesja wygaśnie za (x) sekund”
- „Czy na pewno chcesz anulować? [Tak nie]"
Wnioski
Witryna internetowa nie jest po prostu dokumentem, który należy czytać od góry do dołu — przynajmniej nie w przypadku zadań i interakcji.
Przepływy czytania i przepływy użytkowników rzadko są liniowe, więc projektowanie dla czytników ekranu jest nieco bardziej złożone niż zwykłe tłumaczenie elementów wizualnych na tekst. Musimy zastanowić się, jaki kontekst ma już użytkownik, zadbać o różne stopnie niepełnosprawności, a co ważniejsze, projektanci i programiści muszą ze sobą współpracować, aby dostępność nie stała się refleksją.
Wykorzystaj na swoją korzyść funkcje przekazywania projektów i prototypowania głosu programu Adobe XD CC oraz zawsze, zawsze, zawsze pomyśl o swojej aplikacji i projektach internetowych z poziomu widoku użytkowników o słabym wzroku. Nie każdy ma luksus kontekstu wizualnego.
Bonus: Funkcje kontrastu kolorów w narzędziach do projektowania interfejsu użytkownika
UXPin oferuje natywną funkcję sprawdzania kontrastu kolorów, a także symulator ślepoty barw. Mała fasola, ale nadal jest to pierwsza. Jeśli nie używasz UXPin, do wyboru są narzędzia internetowe, takie jak WebAIIM, rozszerzenia narzędzi interfejsu użytkownika, takie jak Wtyczka Starka, Kontrast dla macOSlub Analizator kontrastu kolorów dla systemu Windows. Niestety, z jakiegoś powodu kontrast kolorów nigdy nie był najważniejszy w narzędziach do projektowania interfejsu użytkownika.
Mamy nadzieję na 2020 rok!
Bonus: Adobe XD umożliwia sterowanie głosowe
Adobe XD niedawno zaczął obsługiwać sterowanie głosowe, co oznacza, że jest teraz więcej sposobów na interakcję z Adobe XD, a co za tym idzie, na bycie projektantem. To fantastyczna wiadomość dla osób, które mają problemy z dostępnością, a narzędzie jest korzystne nawet dla osób, które nie są wyłączone. Jak to jest z projektowaniem włączającym?
„Otwórz XD!”
Dowiedz się więcej o ułatwieniach dostępu z Dostępność dla wszystkich z A List Apart w SitePoint Premium.
Źródło: https://www.sitepoint.com/how-to-design-for-screen-readers-with-adobe-xd-cc/?utm_source=rss
