Projektowanie pod kątem dostępności i integracji

„Dostępność jest rozwiązywana na etapie projektowania”. To zdanie, które Daniel Na i jego zespół wielokrotnie słyszeli podczas konferencji. Projektowanie pod kątem dostępności oznacza uwzględnienie potrzeb użytkowników . Obejmuje to użytkowników docelowych, użytkowników spoza grupy docelowej, użytkowników niepełnosprawnych, a nawet użytkowników z różnych kultur i krajów. Zrozumienie tych potrzeb jest kluczem do stworzenia dla nich lepszych i bardziej dostępnych doświadczeń.

Jednym z najczęstszych problemów podczas projektowania pod kątem dostępności jest wiedza o potrzebach, które należy projektować. Nie chodzi o to, że celowo projektujemy, aby wykluczyć użytkowników, po prostu „nie wiemy, czego nie wiemy”. Tak więc, jeśli chodzi o dostępność, trzeba dużo wiedzieć.

Jak staramy się zrozumieć niezliczoną ilość użytkowników i ich potrzeby? Jak możemy zapewnić spełnienie ich potrzeb w naszym projekcie? Aby odpowiedzieć na te pytania, stwierdziłem, że pomocne jest zastosowanie techniki krytycznej analizy oglądania projektu przez różne soczewki.

„Dobry [dostępny] projekt ma miejsce, gdy patrzysz na swój [projekt] z wielu różnych perspektyw lub soczewek”.

— Sztuka projektowania gier: Księga soczewek

Soczewka to „zawężony filtr, przez który można rozważyć lub zbadać temat”. Często używane do badania dzieł sztuki, literatury lub filmu, soczewki proszą nas o porzucenie naszego światopoglądu i spojrzenie na świat w innym kontekście.

Na przykład oglądanie sztuki przez pryzmat historii prosi nas o zrozumienie „społecznego, politycznego, ekonomicznego, kulturowego i/lub intelektualnego klimatu tamtych czasów”. Pozwala nam to lepiej zrozumieć, jakie wpływy światowe wpłynęły na artystę i jak to ukształtowało dzieło sztuki i jego przesłanie.

Soczewki ułatwiające dostęp to filtr, którego możemy użyć, aby zrozumieć, jak różne aspekty projektu wpływają na potrzeby użytkowników. Każdy obiektyw zawiera zestaw pytań, które należy zadać sobie podczas procesu projektowania. Korzystając z tych soczewek, staniesz się bardziej otwarty na potrzeby swoich użytkowników, co pozwoli Ci zaprojektować bardziej przystępne środowisko dla wszystkich.

Soczewki dostępności to:

• Soczewka animacji i efektów
• Obiektyw audio i wideo
• Soczewka koloru
• Obiektyw kontroli
• Obiektyw czcionki
• Soczewka obrazów i ikon
• Obiektyw klawiatury
• Obiektyw układu
• Soczewka materialnej uczciwości
• Soczewka czytelności
• Soczewka struktury
• Soczewka czasu

Warto wiedzieć, że nie każdy obiektyw będzie pasował do każdego projektu. Podczas gdy niektóre można zastosować do każdego projektu, inne są bardziej sytuacyjne. To, co działa najlepiej w jednym projekcie, może nie działać w innym.

Pytania zadawane przez każdy obiektyw są jedynie narzędziem, które pomoże Ci zrozumieć, jakie problemy mogą się pojawić. Jak zawsze, powinieneś przetestować swój projekt z użytkownikami, aby upewnić się, że jest użyteczny i dostępny dla nich.

Obiektyw animacji i efektów

Skuteczne animacje mogą pomóc ożywić stronę i markę, skierować uwagę użytkowników i pomóc zorientować się w nich. Ale animacje to miecz obosieczny. Niewłaściwe użycie animacji może nie tylko powodować zamieszanie lub rozpraszać, ale może być również potencjalnie śmiertelne dla niektórych użytkowników.

Efekty szybkiego migania (definiowane jako miganie więcej niż trzy razy na sekundę) lub efekty i wzory o wysokiej intensywności mogą powodować napady padaczkowe, znane jako „padaczka światłoczuła”. Nadwrażliwość na światło może również powodować bóle głowy, nudności i zawroty głowy. Użytkownicy z padaczką światłoczułą muszą być bardzo ostrożni podczas korzystania z Internetu, ponieważ nigdy nie wiedzą, kiedy coś może spowodować napad.

Inne efekty, takie jak paralaksa lub efekty ruchu, mogą powodować u niektórych użytkowników zawroty głowy lub zawroty głowy z powodu wrażliwości przedsionkowej. Układ przedsionkowy kontroluje równowagę i zmysł ruchu. Kiedy ten system nie działa tak, jak powinien, powoduje zawroty głowy i nudności.

„Wyobraź sobie świat, w którym twój wewnętrzny żyroskop nie działa prawidłowo. Bardzo podobne do bycia odurzonym, rzeczy wydają się poruszać same z siebie, twoje stopy nigdy nie wydają się być stabilne pod tobą, a twoje zmysły poruszają się szybciej lub wolniej niż twoje ciało.

— Primer do zaburzeń przedsionkowych

Ciągłe animacje lub ruch mogą również rozpraszać użytkowników, zwłaszcza tych, którzy mają trudności z koncentracją. GIF-y są szczególnie problematyczne, ponieważ nasze oczy są skierowane w stronę ruchu, co ułatwia rozpraszanie się wszystkim, co stale się aktualizuje lub porusza.

Nie oznacza to, że animacja jest zła i nie powinieneś jej używać. Zamiast tego powinieneś zrozumieć, dlaczego używasz animacji i jak projektować bezpieczniejsze animacje. Ogólnie rzecz biorąc, powinieneś starać się projektować animacje, które obejmują niewielkie odległości, dopasowują kierunek i prędkość innych poruszających się obiektów (w tym przewijania) i są stosunkowo małe w stosunku do rozmiaru ekranu.

Powinieneś również zapewnić kontrolki lub opcje, aby zapewnić użytkownikom wygodę. Na przykład Slack pozwala ukryć animowane obrazy lub emotikony zarówno jako ustawienie globalne, jak i na podstawie obrazu.

Aby skorzystać z Soczewki animacji i efektów , zadaj sobie następujące pytania:

• Czy są jakieś skutki, które mogą spowodować napad?
• Czy są jakieś animacje lub efekty, które mogą powodować zawroty głowy lub zawroty głowy poprzez użycie ruchu?
• Czy są jakieś animacje, które mogą rozpraszać przez ciągłe poruszanie się, miganie lub automatyczne aktualizowanie?
• Czy można zapewnić elementy sterujące lub opcje zatrzymywania, wstrzymywania, ukrywania lub zmiany częstotliwości dowolnych animacji lub efektów?

Obiektyw audio i wideo

Automatyczne odtwarzanie filmów i dźwięku może być dość denerwujące. Nie tylko rozbijają koncentrację użytkowników, ale także zmuszają ich do wytropienia obraźliwych mediów i wyciszenia lub zatrzymania ich. Zasadniczo nie odtwarzaj automatycznie multimediów.

„Używaj autoodtwarzania oszczędnie. Autoodtwarzanie może być potężnym narzędziem angażującym, ale może również irytować użytkowników, jeśli odtwarzany jest niepożądany dźwięk lub postrzegają niepotrzebne zużycie zasobów (np. danych, baterii) w wyniku niepożądanego odtwarzania wideo”.

— Wytyczne Google dotyczące autoodtwarzania

Zapewne teraz pytasz: „A co, jeśli automatycznie odtworzę wideo w tle, ale zachowam wyciszenie?” Podczas gdy używanie filmów jako tła może być rosnącym trendem w dzisiejszym projektowaniu stron internetowych, filmy w tle mają te same problemy, co GIF-y i ciągłe animacje w ruchu: mogą rozpraszać. W związku z tym należy zapewnić elementy sterujące lub opcje wstrzymywania lub wyłączania wideo.

Oprócz elementów sterujących filmy powinny zawierać transkrypcje i/lub napisy, aby użytkownicy mogli korzystać z treści w sposób, który najlepiej im odpowiada. Użytkownicy niedowidzący lub którzy wolą czytać zamiast oglądać wideo potrzebują transkrypcji, podczas gdy użytkownicy, którzy nie mogą lub nie chcą słuchać wideo, potrzebują napisów.

Aby skorzystać z Soczewki audio i wideo , zadaj sobie następujące pytania:

• Czy są jakieś dźwięki lub wideo, które mogą być denerwujące podczas autoodtwarzania?
• Czy można zapewnić sterowanie zatrzymywaniem, wstrzymywaniem lub ukrywaniem audio lub wideo, które są automatycznie odtwarzane?
• Czy filmy mają transkrypcje i/lub napisy?

Soczewka koloru

Kolor odgrywa ważną rolę w projekcie. Kolory wywołują emocje, uczucia i pomysły. Kolory mogą również pomóc wzmocnić przekaz i postrzeganie marki. Jednak siła kolorów ginie, gdy użytkownik nie może ich zobaczyć lub postrzega je inaczej.

Ślepota barw dotyka mniej więcej 1 na 12 mężczyzn i 1 na 200 kobiet. Deuteranopia (ślepota na kolory czerwono-zielona) jest najczęstszą postacią ślepoty barw, dotykającą około 6% mężczyzn. Użytkownicy ze ślepotą na czerwono-zielone kolory zazwyczaj postrzegają czerwienie, zielenie i pomarańcze jako żółtawe.

Znaczenie koloru jest również problematyczne dla międzynarodowych użytkowników. Kolory oznaczają różne rzeczy w różnych krajach i kulturach. W kulturach zachodnich kolor czerwony jest zwykle używany do reprezentowania negatywnych trendów i zielonych pozytywnych trendów, ale w kulturach wschodnich i azjatyckich jest odwrotnie.

Ponieważ kolory i ich znaczenie mogą zostać utracone przez różnice kulturowe lub ślepotę barw, zawsze należy dodać identyfikator inny niż kolor. Identyfikatory, takie jak ikony lub opisy tekstowe, mogą pomóc zniwelować różnice kulturowe, podczas gdy wzory dobrze sprawdzają się w rozróżnianiu kolorów.

Przesycone kolory, mocno kontrastujące kolory, a nawet kolor żółty, mogą być niewygodne i niepokojące dla niektórych użytkowników, szczególnie tych ze spektrum autyzmu. Najlepiej unikać wysokiego stężenia tego typu kolorów, aby zapewnić użytkownikom wygodę.

Słaby kontrast między kolorami pierwszego planu i tła utrudnia widoczność użytkownikom niedowidzącym, korzystającym z słabszego monitora lub znajdującym się w bezpośrednim świetle słonecznym. Cały tekst, ikony i wszelkie wskaźniki ostrości używane przez użytkowników korzystających z klawiatury powinny mieć minimalny współczynnik kontrastu 4,5:1 do koloru tła.

Należy również upewnić się, że projekt i kolory działają dobrze w różnych ustawieniach trybu wysokiego kontrastu systemu Windows. Częstą pułapką jest to, że tekst staje się niewidoczny na niektórych tłach w trybie wysokiego kontrastu.

Aby skorzystać z Soczewki koloru , zadaj sobie następujące pytania:

• Jeśli kolor zostałby usunięty z projektu, jakie znaczenie zostałoby utracone?
• Jak mógłbym nadać znaczenie bez użycia koloru?
• Czy jakieś kolory są przesycone lub mają wysoki kontrast, które mogą powodować nadmierne podniecenie lub dyskomfort?
• Czy kolor pierwszego planu i tła wszystkich tekstów, ikon i wskaźników ostrości spełnia wytyczne dotyczące współczynnika kontrastu 4,5:1?

Obiektyw kontroli

Kontrolki, zwane również „treścią interaktywną”, to dowolne elementy interfejsu użytkownika, z którymi użytkownik może wchodzić w interakcje, niezależnie od tego, czy są to przyciski, łącza, dane wejściowe, czy dowolny element HTML z detektorem zdarzeń. Kontrolki, które są zbyt małe lub zbyt blisko siebie, mogą powodować wiele problemów dla użytkowników.

Małe elementy sterujące są trudne do kliknięcia dla użytkowników, którzy nie są w stanie dokładnie określić wskaźnika, na przykład tych z drżeniem lub tych, którzy cierpią na zmniejszoną zręczność z powodu wieku. Na przykład domyślny rozmiar pól wyboru i przycisków radiowych może stanowić problem dla starszych użytkowników. Nawet jeśli dostarczona jest etykieta, którą można kliknąć, nie wszyscy użytkownicy wiedzą, że mogą to zrobić.

Elementy sterujące znajdujące się zbyt blisko siebie mogą powodować problemy dla użytkowników ekranu dotykowego. Palce są duże i trudne do precyzyjnego. Przypadkowe dotknięcie niewłaściwej kontrolki może wywołać frustrację, zwłaszcza jeśli ta kontrolka odciągnie Cię lub sprawi, że stracisz kontekst.

Kontrolki zagnieżdżone w innej kontrolce mogą również przyczyniać się do błędów dotyku. Nie tylko nie jest to dozwolone w specyfikacji HTML, ale także ułatwia przypadkowe wybranie kontrolki nadrzędnej zamiast tej, którą chciałeś.

Aby zapewnić użytkownikom wystarczająco dużo miejsca na dokładne wybranie elementu sterującego, zalecany minimalny rozmiar elementu sterującego to 34 na 34 piksele niezależne od urządzenia, ale Google zaleca co najmniej 48 na 48 pikseli, podczas gdy specyfikacja WCAG zaleca co najmniej 44 na 44 piksele. Ten rozmiar obejmuje również wszelkie wyściółki, które ma kontrolka. Tak więc kontrolka mogłaby wizualnie mieć 24 na 24 piksele, ale z dodatkowymi 10 pikselami dopełnienia ze wszystkich stron podniosłaby ją do 44 na 44 piksele.

Zaleca się również, aby kontrolki były umieszczone wystarczająco daleko od siebie, aby ograniczyć błędy dotykowe. Microsoft zaleca odstępy co najmniej 8 pikseli, podczas gdy Google zaleca, aby kontrolki były oddalone od siebie o co najmniej 32 piksele.

Kontrolki powinny również mieć widoczną etykietę tekstową. Czytniki zawartości ekranu nie tylko wymagają etykiety tekstowej, aby wiedzieć, co robi kontrolka, ale pokazano, że etykiety tekstowe pomagają wszystkim użytkownikom lepiej zrozumieć cel kontrolek. Jest to szczególnie ważne w przypadku danych wejściowych formularzy i ikon.

Aby skorzystać z soczewek sterowania , zadaj sobie następujące pytania:

• Czy jakieś kontrolki nie są wystarczająco duże, aby ktoś mógł ich dotknąć?
• Czy jakieś elementy sterujące są zbyt blisko siebie, aby łatwo dotknąć niewłaściwego?
• Czy są jakieś kontrolki w innej kontrolce lub regionie, który można kliknąć?
• Czy wszystkie kontrolki mają widoczną etykietę tekstową?

Obiektyw czcionki

Na początku istnienia sieci projektowaliśmy strony internetowe z czcionką o rozmiarze od 9 do 14 pikseli. Działało to wtedy dobrze, ponieważ monitory miały stosunkowo znany rozmiar ekranu. Zaprojektowaliśmy, myśląc, że okno przeglądarki jest stałą, czymś, czego nie można zmienić.

Dzisiejsza technologia jest zupełnie inna niż 20 lat temu. Dziś z przeglądarek można korzystać na każdym urządzeniu o dowolnym rozmiarze, od małego zegarka po ogromny ekran 4K. Nie możemy już używać stałych rozmiarów czcionek do projektowania naszych witryn. Rozmiary czcionek muszą być tak responsywne, jak sam projekt.

Rozmiary czcionek nie tylko powinny być responsywne, ale projekt powinien być wystarczająco elastyczny, aby umożliwić użytkownikom dostosowanie rozmiaru czcionki, wysokości linii lub odstępów między literami do wygodnego poziomu czytania. Wielu użytkowników korzysta z niestandardowego CSS, który pomaga im lepiej czytać.

Sama czcionka powinna być łatwa do odczytania. Być może zastanawiasz się, czy jedna czcionka jest bardziej czytelna niż inna. Prawda jest taka, że ​​czcionka tak naprawdę nie wpływa na czytelność. Zamiast tego to styl czcionki odgrywa ważną rolę w czytelności czcionek.

Dekoracyjne lub kursywne style czcionek są trudniejsze do odczytania dla wielu użytkowników, ale szczególnie problematyczne dla użytkowników z dysleksją. Małe rozmiary czcionek, tekst pisany kursywą i cały tekst pisany wielkimi literami również są trudne dla użytkowników. Ogólnie rzecz biorąc, większy tekst, krótsze wiersze, wyższe wiersze i zwiększone odstępy między literami mogą pomóc wszystkim użytkownikom w lepszym czytaniu.

Aby skorzystać z funkcji Lens of Font , zadaj sobie następujące pytania:

• Czy projekt jest na tyle elastyczny, że czcionka może zostać zmodyfikowana do wygodnego poziomu czytania przez użytkownika?
• Czy styl czcionki jest łatwy do odczytania?

Soczewka obrazów i ikon

Mówią: „Obraz jest wart tysiąca słów”. Mimo to obraz, którego nie widać, zaniemówił, prawda?

Obrazy mogą być użyte w projekcie, aby przekazać określone znaczenie lub uczucie. Innym razem można ich użyć do uproszczenia złożonych pomysłów. Niezależnie od przypadku obrazu, użytkownik korzystający z czytnika ekranu musi zostać poinformowany, jakie jest znaczenie obrazu.

Jako projektant najlepiej rozumiesz znaczenie lub informacje, które przekazuje obraz. W związku z tym należy opatrzyć projekt tymi informacjami, aby nie zostały pominięte lub źle zinterpretowane później. Będzie to używane do tworzenia tekstu alternatywnego dla obrazu.

Sposób, w jaki opisujesz obraz, zależy wyłącznie od kontekstu lub ilości dostępnych informacji tekstowych opisujących te informacje. Zależy to również od tego, czy obraz służy tylko do dekoracji, przekazuje znaczenie, czy zawiera tekst.

„Prawie nigdy nie opisujesz, jak wygląda zdjęcie, zamiast tego wyjaśniasz informacje, które zawiera zdjęcie”.

— Pięć złotych zasad dotyczących zgodnego tekstu alternatywnego

Ponieważ wiedza o tym, jak opisać obraz, może być trudna, istnieje przydatne drzewo decyzyjne, które pomaga w podejmowaniu decyzji. Ogólnie rzecz biorąc, jeśli obraz ma charakter dekoracyjny lub istnieje otaczający go tekst, który już opisuje informacje o obrazie, dalsze informacje nie są potrzebne. W przeciwnym razie powinieneś opisać informacje o obrazie. Jeśli obraz zawiera tekst, powtórz również tekst w opisie.

Opisy powinny być zwięzłe. Zaleca się użycie nie więcej niż dwóch zdań, ale jeśli to możliwe, staraj się o jedno zwięzłe zdanie. Pozwala to użytkownikom szybko zrozumieć obraz bez konieczności słuchania długiego opisu.

Na przykład, gdybyś miał opisać ten obraz dla czytnika ekranu, co byś powiedział?

Ponieważ opisujemy informacje o obrazie, a nie sam obraz, opis może dotyczyć Gwiaździstej nocy Vincenta van Gogha, ponieważ nie ma innego otaczającego kontekstu, który ją opisuje. To, czego nie powinieneś umieszczać, to opis stylu obrazu lub tego, jak wygląda obraz.

Jeśli informacje o obrazie wymagają długiego opisu, na przykład złożonego wykresu, nie należy umieszczać tego opisu w tekście alternatywnym. Zamiast tego powinieneś nadal używać krótkiego opisu dla tekstu alternatywnego, a następnie podać długi opis jako podpis lub link do innej strony.

W ten sposób użytkownicy nadal mogą szybko uzyskać najważniejsze informacje, ale mają możliwość dalszego zagłębiania się, jeśli chcą. Jeśli obraz przedstawia wykres, należy powtórzyć dane z wykresu, tak jak w przypadku tekstu na obrazie.

Jeśli platforma, dla której projektujesz, umożliwia użytkownikom przesyłanie obrazów, należy zapewnić użytkownikowi możliwość wprowadzenia tekstu alternatywnego wraz z obrazem. Na przykład Twitter pozwala swoim użytkownikom pisać tekst alternatywny, gdy przesyłają obraz do tweeta.

Aby korzystać z soczewek obrazów i ikon , zadaj sobie następujące pytania:

• Czy jakikolwiek obraz zawiera informacje, które zostałyby utracone, gdyby nie był widoczny?
• Jak mogę przekazać informacje w sposób niewizualny?
• Jeśli obraz jest kontrolowany przez użytkownika, czy można zapewnić mu sposób na wprowadzenie opisu w postaci tekstu alternatywnego?

Obiektyw klawiatury

Dostępność klawiatury jest jednym z najważniejszych aspektów projektu z ułatwieniami dostępu, ale jest również jednym z najczęściej pomijanych.

Istnieje wiele powodów, dla których użytkownik używałby klawiatury zamiast myszy. Użytkownicy korzystający z czytników ekranu używają klawiatury do czytania strony. Użytkownik z drżeniem może używać klawiatury, ponieważ zapewnia ona lepszą dokładność niż mysz. Nawet zaawansowani użytkownicy będą używać klawiatury, ponieważ jest szybsza i bardziej wydajna.

Użytkownik korzystający z klawiatury zazwyczaj używa klawisza tabulatora do nawigowania kolejno do każdego elementu sterującego. Logiczna kolejność kolejności tabulacji znacznie pomaga użytkownikom wiedzieć, dokąd zaprowadzi ich kolejne naciśnięcie klawisza. W kulturach zachodnich zwykle oznacza to od lewej do prawej, od góry do dołu. Nieoczekiwane kolejność tabulacji powoduje, że użytkownicy gubią się i muszą gorączkowo skanować, gdzie poszło fokus.

Kolejność tabulatorów oznacza również, że muszą przechodzić przez wszystkie kontrolki, które znajdują się przed tą, którą chcą. Jeśli ta kontrola jest oddalona o dziesiątki lub setki naciśnięć klawiszy, może to być prawdziwy problem dla użytkownika.

Umieszczając najważniejsze przepływy użytkowników bliżej górnej części kolejności kart, możemy pomóc naszym użytkownikom działać wydajniej i efektywniej. Jednak nie zawsze jest to możliwe ani praktyczne. W takich przypadkach zapewnienie sposobu na szybkie przejście do określonego przepływu lub treści może nadal pozwolić na ich wydajną pracę. Dlatego pomocne są linki „przeskocz do treści”.

Dobrym tego przykładem jest Facebook, który zapewnia menu nawigacji z klawiaturą, które umożliwia użytkownikom przechodzenie do określonych sekcji witryny. To znacznie przyspiesza możliwość interakcji użytkownika ze stroną i pożądaną zawartością.

Podczas przechodzenia przez projekt, style fokusu powinny być zawsze widoczne, w przeciwnym razie użytkownik może się łatwo zgubić. Podobnie jak nieoczekiwana kolejność kart, brak dobrych wskaźników ostrości powoduje, że użytkownicy nie wiedzą, na czym aktualnie się skupiają i muszą skanować stronę.

Zmiana wyglądu domyślnego wskaźnika ostrości może czasami poprawić wrażenia użytkowników. Dobry wskaźnik ostrości nie opiera się na samym kolorze do wskazywania ostrości (soczewka koloru) i powinien być wystarczająco wyraźny, aby użytkownik mógł go łatwo znaleźć. Na przykład niebieski pierścień ustawiania ostrości wokół niebieskiego przycisku o podobnym kolorze może nie być wizualnie wyraźny, aby rozpoznać, że jest ustawiony.

Chociaż ten obiektyw skupia się na dostępności klawiatury, ważne jest, aby pamiętać, że odnosi się on do każdego sposobu, w jaki użytkownik może wchodzić w interakcję ze stroną internetową bez myszy. Urządzenia takie jak pałeczki do ust, przyciski dostępu do przełącznika, przyciski łykania i zaciągania się oraz oprogramowanie do śledzenia wzroku wymagają, aby strona była dostępna z klawiatury.

Udoskonalając dostępność klawiatury, umożliwiasz szerokiemu gronu użytkowników lepszy dostęp do Twojej witryny.

Aby korzystać z obiektywu klawiatury , zadaj sobie następujące pytania:

• Jaka kolejność nawigacji klawiatury ma największy sens w projekcie?
• W jaki sposób użytkownik klawiatury może uzyskać to, czego chce w najszybszy możliwy sposób?
• Czy wskaźnik ostrości jest zawsze widoczny i wyraźny wizualnie?

Soczewka układu

Układ ma duży wpływ na użyteczność witryny. Posiadanie łatwego do naśladowania układu i łatwej do znalezienia treści ma ogromne znaczenie dla użytkowników. Układ powinien mieć zrozumiałą i logiczną sekwencję dla użytkownika.

Wraz z pojawieniem się CSS Grid, możliwość zmiany układu tak, aby był bardziej znaczący w oparciu o dostępną przestrzeń, jest łatwiejsza niż kiedykolwiek. Jednak zmiana układu wizualnego stwarza problemy dla użytkowników, którzy polegają na strukturalnym układzie strony.

Układ strukturalny jest używany przez czytniki ekranu i użytkowników korzystających z klawiatury. Gdy zmienia się układ wizualny, ale nie podstawowy układ strukturalny, użytkownicy ci mogą być zdezorientowani, ponieważ ich kolejność tabulacji nie jest już logiczna. Jeśli musisz zmienić układ wizualny, powinieneś to zrobić, zmieniając układ strukturalny, aby użytkownicy korzystający z klawiatury zachowali sekwencyjną i logiczną kolejność tabulacji.

Układ powinien mieć możliwość zmiany rozmiaru i być elastyczny do minimum 320 pikseli bez poziomych pasków przewijania, aby można go było wygodnie oglądać na telefonie. Układ powinien być również wystarczająco elastyczny, aby można go było powiększyć do 400% (również bez poziomych pasków przewijania) dla użytkowników, którzy muszą zwiększyć rozmiar czcionki, aby uzyskać lepsze wrażenia z czytania.

Użytkownicy korzystający z lupy ekranu odnoszą korzyści, gdy powiązane treści znajdują się blisko siebie. Lupa ekranu zapewnia użytkownikowi tylko niewielki widok całego układu, więc treści powiązane, ale odległe lub zmiany daleko od miejsca, w którym nastąpiła interakcja, są trudne do znalezienia i mogą pozostać niezauważone.

Aby skorzystać z opcji Lens of Layout , zadaj sobie następujące pytania:

• Czy układ ma sensowną i logiczną sekwencję?
• Co powinno się stać z układem, gdy jest oglądany na małym ekranie lub powiększony do 400%?
• Czy treści, które są powiązane lub zmieniają się w wyniku interakcji użytkowników, znajdują się blisko siebie?

Soczewka Materiałowej Uczciwości

Uczciwość materiału to wartość projektu architektonicznego, która mówi, że materiał powinien być uczciwy wobec siebie i nie może być używany jako substytut innego materiału. Oznacza to, że beton powinien wyglądać jak beton, a nie być malowany lub rzeźbiony tak, by wyglądał jak cegły.

Uczciwość materiału ceni i celebruje unikalne właściwości i cechy każdego materiału. Architekt, który kieruje się uczciwością materiałową, wie, kiedy należy użyć każdego materiału i jak go wykorzystać, nie brudząc się.

Uczciwość materialna nie jest jednak twardą i szybką zasadą. Leży na kontinuum. Jak wszystkie wartości, możesz je złamać, kiedy je zrozumiesz. Jak mówi przysłowie, są one „bardziej tym, co można by nazwać „wytycznymi”, niż rzeczywistymi zasadami”.

W przypadku projektowania stron internetowych uczciwość materiałów oznacza, że ​​jeden element lub komponent nie powinien wyglądać, zachowywać się ani funkcjonować tak, jakby był innym elementem lub komponentem. Mogłoby to oszukać użytkownika i doprowadzić do zamieszania. Typowym przykładem są przyciski, które wyglądają jak linki lub linki, które wyglądają jak przyciski.

Linki i przyciski mają różne zachowania i afordancje. Łącze jest aktywowane za pomocą klawisza Enter, zwykle prowadzi do innej strony i ma specjalne menu kontekstowe po kliknięciu prawym przyciskiem myszy. Przyciski są aktywowane za pomocą klawisza spacji, używanego głównie do wyzwalania interakcji na bieżącej stronie i nie mają takiego menu kontekstowego.

Kiedy link jest stylizowany tak, aby wyglądał jak przycisk lub odwrotnie, użytkownik może być zdezorientowany, ponieważ nie zachowuje się i nie działa tak, jak wygląda. Jeśli „przycisk” nieoczekiwanie odciągnie użytkownika od siebie, może on stać się sfrustrowany, jeśli w trakcie tego procesu utraci dane.

„Na pierwszy rzut oka wszystko wygląda dobrze, ale nie wytrzyma szczegółowej analizy. Gdy tylko taka strona internetowa zostanie przetestowana pod kątem rzeczywistego użytkowania w różnych przeglądarkach, fasada się rozpada”.

— Odporne projektowanie stron internetowych

Najbardziej problematyczne jest to, gdy link i przycisk mają taki sam styl i są umieszczone obok siebie. Ponieważ nie ma między nimi rozróżnienia, użytkownik może przypadkowo nawigować, gdy myślał, że tego nie zrobi.

Gdy składnik zachowuje się inaczej niż oczekiwano, może to łatwo prowadzić do problemów dla użytkowników korzystających z klawiatury lub czytnika ekranu. Jednym z takich przykładów jest menu autouzupełniania, które jest czymś więcej niż menu autouzupełniania.

Autouzupełnianie służy do sugerowania lub przewidywania reszty słowa, które wpisuje użytkownik. Menu autouzupełniania pozwala użytkownikowi wybrać z dużej listy opcji, gdy nie wszystkie opcje mogą być pokazane.

Menu autouzupełniania jest zwykle dołączone do pola wejściowego i można do niego nawigować za pomocą klawiszy strzałek w górę i w dół, utrzymując fokus wewnątrz pola wejściowego. Gdy użytkownik wybierze opcję z listy, ta opcja zastąpi tekst w polu wejściowym. Menu autouzupełniania mają być listami samego tekstu.

Problem pojawia się, gdy menu autouzupełniania zaczyna nabierać większej liczby zachowań. Nie tylko możesz wybrać opcję z listy, ale możesz ją edytować, usuwać, a nawet rozwijać lub zwijać sekcje. Menu autouzupełniania nie jest już tylko prostą listą tekstu do wybrania.

Dodane zachowania nie oznaczają już, że możesz po prostu użyć strzałek w górę i w dół, aby wybrać opcję. Każda opcja ma teraz więcej niż jedną akcję, więc użytkownik musi mieć możliwość przejścia przez dwa wymiary zamiast tylko jednego. Oznacza to, że użytkownik korzystający z klawiatury może być zdezorientowany, jak obsługiwać komponent.

Czytniki ekranu najbardziej cierpią z powodu tej zmiany zachowania, ponieważ nie ma łatwego sposobu, aby pomóc im to zrozumieć. Wymagane będzie dużo pracy, aby menu było dostępne dla czytnika ekranu przy użyciu niestandardowych środków. W związku z tym może to skutkować dla nich gorszym lub niedostępnym doświadczeniem.

Aby uniknąć tych problemów, najlepiej być uczciwym wobec użytkownika i projektu. Zamiast łączyć dwa różne zachowania (menu autouzupełniania oraz funkcje edycji i usuwania), pozostaw je jako dwa oddzielne zachowania. Użyj menu autouzupełniania, aby po prostu automatycznie uzupełniać nazwę użytkownika i mieć inny komponent lub stronę do edycji i usuwania użytkowników.

Aby skorzystać z Soczewki Materialnej Uczciwości , zadaj sobie następujące pytania:

• Czy projekt jest uczciwy wobec użytkownika?
• Czy są jakieś elementy, które zachowują się, wyglądają lub funkcjonują jako inny element?
• Czy są jakieś komponenty, które łączą różne zachowania w jeden komponent? Czy to powoduje, że składnik jest materialnie nieuczciwy?

Obiektyw czytelności

Czy kiedykolwiek podniosłeś książkę tylko po to, aby dostać kilka akapitów lub stron i chcesz zrezygnować, ponieważ tekst był zbyt trudny do odczytania? Trudne do odczytania treści są męczące psychicznie i męczące.

Długość zdania, długość akapitu i złożoność języka wpływają na czytelność tekstu. Złożony język może stwarzać problemy dla użytkowników, zwłaszcza tych z niepełnosprawnością poznawczą lub tych, którzy nie władają biegle językiem.

Oprócz używania prostego i prostego języka, powinieneś upewnić się, że każdy akapit skupia się na jednym pomyśle. Akapit z jednym pomysłem jest łatwiejszy do zapamiętania i strawienia. To samo dotyczy zdania z mniejszą liczbą słów.

Innym czynnikiem wpływającym na czytelność treści jest długość linii. Często podaje się, że idealna długość linii wynosi od 45 do 75 znaków. Zbyt długa linia powoduje, że użytkownicy tracą koncentrację i utrudniają prawidłowe przejście do następnej linii, podczas gdy zbyt krótka linia powoduje, że użytkownicy skaczą zbyt często, powodując zmęczenie oczu.

„Podświadomość jest naładowana energią podczas przeskakiwania do następnej linii. Na początku każdej nowej linii czytelnik jest skupiony, ale to skupienie stopniowo zanika w trakcie trwania linii”

— Typografia: Podręcznik projektowania

Powinieneś także podzielić treść za pomocą nagłówków, list lub obrazów, aby dać czytelnikowi psychiczne przerwy i wspierać różne style uczenia się. Użyj nagłówków, aby logicznie pogrupować i podsumować informacje. Nagłówki, linki, kontrolki i etykiety powinny być jasne i opisowe, aby zwiększyć zdolność użytkowników do zrozumienia.

Aby skorzystać z funkcji Soczewki czytelności , zadaj sobie następujące pytania:

• Czy język jest prosty i prosty?
• Czy każdy akapit skupia się na jednym pomyśle?
• Czy są jakieś długie akapity lub długie bloki nieprzerwanego tekstu?
• Czy wszystkie nagłówki, linki, kontrolki i etykiety są jasne i opisowe?

Obiektyw struktury

Jak wspomniano w Lens of Layout, układ strukturalny jest używany przez czytniki ekranu i użytkowników korzystających z klawiatury. Podczas gdy soczewka układu koncentruje się na układzie wizualnym, soczewka struktury skupia się na układzie strukturalnym lub podstawowym kodzie HTML i semantyce projektu.

Jako projektant nie możesz pisać układu konstrukcyjnego swoich projektów. Nie powinno to jednak powstrzymywać Cię od myślenia o ostatecznej strukturze Twojego projektu. W przeciwnym razie Twój projekt może być niedostępny dla czytnika ekranu.

Weźmy na przykład projekt drabinki turniejowej z pojedynczą eliminacją.

Skąd wiesz, czy ten projekt jest dostępny dla użytkownika korzystającego z czytnika ekranu? Bez zrozumienia struktury i semantyki możesz nie. W obecnej postaci projekt prawdopodobnie spowodowałby niedostępne doświadczenie dla użytkownika korzystającego z czytnika ekranu.

Aby zrozumieć, dlaczego tak jest, najpierw musimy zrozumieć, że czytnik ekranu czyta stronę i jej zawartość w kolejności sekwencyjnej. Oznacza to, że odczytane zostanie każde nazwisko z pierwszej kolumny turnieju, następnie wszystkie nazwiska z drugiej kolumny, potem trzecia i ostatnia.

„George, Fred, Linus, Lucy, Jack, Jill, Fred, Ginger, George, Lucy, Jack, Ginger, George, Ginger, Ginger.”

Gdyby wszystko, co miałeś, to lista pozornie przypadkowych imion, jak zinterpretowałbyś wyniki turnieju? Czy możesz powiedzieć, kto wygrał turniej? Albo kto wygrał grę 6?

Nie mając nic więcej do roboty, użytkownik korzystający z czytnika ekranu prawdopodobnie byłby nieco zdezorientowany wynikami. Aby móc zrozumieć projekt wizualny, musimy dostarczyć użytkownikowi więcej informacji w projekcie konstrukcyjnym.

Oznacza to, że jako projektant musisz wiedzieć, jak czytnik ekranu współdziała z elementami HTML na stronie, aby wiedzieć, jak ulepszyć jego obsługę.

• Elementy charakterystyczne (nagłówek, nawigacja, główna i stopka)
  Allow a screen reader to jump to important sections in the design.
• Headings ( h1 → h6 )
  Allow a screen reader to scan the page and get a high level overview. Screen readers can also jump to any heading.
• Lists ( ul and ol )
  Group related items together, and allow a screen reader to easily jump from one item to another.
• Buttons
  Trigger interactions on the current page.
• Links
  Navigate or retrieve information.
• Form labels
  Tell screen readers what each form input is.

Knowing this, how might we provide more meaning to a user using a screen reader?

To start, we could group each column of the tournament into rounds and use headings to label each round. This way, a screen reader would understand when a new round takes place.

Next, we could help the user understand which players are playing against each other each game. We can again use headings to label each game, allowing them to find any game they might be interested in.

By just adding headings, the content would read as follows:

“__Round 1, Game 1__, George, Fred, __Game 2__, Linus, Lucy, __Game 3__, Jack, Jill, __Game 4__, Fred, Ginger, __Round 2, Game 5__, George, Lucy, __Game 6__, Jack, Ginger, __Round 3__, __Game 7__, George, Ginger, __Winner__, Ginger.”

This is already a lot more understandable than before.

The information still doesn't answer who won a game though. To know that, you'd have to understand which game a winner plays next to see who won the previous game. For example, you'd have to know that the winner of game four plays in game six to know who advanced from game four.

We can further enhance the experience by informing the user who won each game so they don't have to go hunting for it. Putting the text “(winner)” after the person who won the round would suffice.

We should also further group the games and rounds together using lists. Lists provide the structural semantics of the design, essentially informing the user of the connected nodes from the visual design.

If we translate this back into a visual design, the result could look as follows:

Since the headings and winner text are redundant in the visual design, you could hide them just from visual users so the end visual result looks just like the first design.

“If the end result is visually the same as where we started, why did we go through all this?” You may ask.

The reason is that you should always annotate your design with all the necessary structural design requirements needed for a better screen reader experience. This way, the person who implements the design knows to add them. If you had just handed the first design to the implementer, it would more than likely end up inaccessible.

To use the Lens of Structure , ask yourself these questions:

• Can I outline a rough HTML structure of my design?
• How can I structure the design to better help a screen reader understand the content or find the content they want?
• How can I help the person who will implement the design understand the intended structure?

Lens Of Time

Periodically in a design you may need to limit the amount of time a user can spend on a task. Sometimes it may be for security reasons, such as a session timeout. Other times it could be due to a non-functional requirement, such as a time constrained test.

Whatever the reason, you should understand that some users may need more time in order finish the task. Some users might need more time to understand the content, others might not be able to perform the task quickly, and a lot of the time they could just have been interrupted.

“The designer should assume that people will be interrupted during their activities”

— The Design of Everyday Things

Users who need more time to perform an action should be able to adjust or remove a time limit when possible. For example, with a session timeout you could alert the user when their session is about to expire and allow them to extend it.

To use the Lens of Time , ask yourself this question:

• Is it possible to provide controls to adjust or remove time limits?

Bringing It All Together

So now that you've learned about the different lenses of accessibility through which you can view your design, what do you do with them?

The lenses can be used at any point in the design process, even after the design has been shipped to your users. Just start with a few of them at hand, and one at a time carefully analyze the design through a lens.

Ask yourself the questions and see if anything should be adjusted to better meet the needs of a user. As you slowly make changes, bring in other lenses and repeat the process.

By looking through your design one lens at a time, you'll be able to refine the experience to better meet users' needs. As you are more inclusive to the needs of your users, you will create a more accessible design for all your users.

Using lenses and insightful questions to examine principles of accessibility was heavily influenced by Jesse Schell and his book “The Art of Game Design: A Book of Lenses.”