ArtykułZamień współczucie w działanie, unikając tych 8 dostępnych błędów projektowych

Przystępny projekt szanuje wyjątkowość wszystkich osób, niezależnie od wieku i umiejętności. Zaczyna się od uznania, że ​​nie wszyscy ludzie są tacy jak ty.

Aby jak najlepiej służyć różnym użytkownikom, konieczne jest zrozumienie i empatię dla wszystkich rodzajów ludzi. Zgodnie z wytycznymi WCAG 2.0 AA treści są dostępne dla szerszego grona osób niepełnosprawnych, w tym niewidomych i upośledzonych wzroku, głuchoty i ubytku słuchu, trudnościami w uczeniu się, ograniczeniami poznawczymi, ograniczonymi ruchami, zaburzeniami mowy lub nadwrażliwością na światło. Aby mieć pewność, że obsługujesz każdego użytkownika odwiedzającego Twoją witrynę, unikaj tych ośmiu błędów projektowych z ułatwieniami dostępu.

1. Pułapki na klawiaturę

Niektóre osoby korzystające z technologii wspomagających polegają na widocznych na ekranie działaniach. Dobry projekt zapewnia zatem, że wszystkie treści związane z nawigacją są widoczne. Pamiętaj, aby uporządkować przedmioty logicznie (od lewej do prawej na dole), aby pomóc użytkownikom zrozumieć treść i dokonywać świadomych wyborów dotyczących nawigacji.

Porady:

• Główna zawartość: Rozważ udostępnienie użytkownikom możliwości łatwego pomijania nawigacji najwyższego poziomu w celu uzyskania dostępu do głównej zawartości.
• Wzorce interfejsu użytkownika: postępuj zgodnie z semantyką typowych wzorców, takich jak Przełączanie, Tabulatory, Tabele, Okna modalne i ARIA.
• Użycie najechania: nie ukrywaj tekstu ani działań za stanem najechania. Jeśli użytkownik korzystający tylko z klawiatury nie widzi, że istnieje treść/przyciski, nie może poruszać się po stronie.

Przykład dobrych linków pomijających nr 1

Przykład dobrych linków pomijających nr 2

2. Niewystarczający kontrast kolorów

Niewystarczający kontrast kolorów wpływa na zdolność osób do wizualnego odbierania informacji. Upewnij się, że kontrast między tekstem a jego tłem jest wystarczający, aby tekst był czytelny. Współczynnik kontrastu między tekstem a tłem tekstu powinien wynosić co najmniej 4,5 do 1. Jeśli jednak tekst ma co najmniej 24 piksele lub 19 pikseli pogrubiony, minimalna wartość spada do 3 do 1.

Porady:

• Palety kolorów: Bądź świadomy kolorów podstawowych. Ponadto przy wyborze kolorów pamiętaj o wymaganiach dotyczących kontrastu kolorów.
• Nie polegaj tylko na kolorze: używaj kombinacji kształtu, koloru i tekstu (a nie tylko jednego), aby przekazać znaczenie i zachować spójność. Podaj co najmniej dwa wskaźniki, aby osoby, które nie mogą łatwo rozróżnić kolorów, nadal zrozumieją Twoje treści.
• Wyjątki: Tekst, obrazy tekstu, obrazy i logo, które nie są wymagane do zrozumienia znaczenia treści lub są czystą „dekoracją”.

Przykład niewystarczającego kontrastu

3. Tekst w obrazach

Unikaj używania obrazów tekstu, które są przeznaczone do czytania. Użyj rzeczywistego tekstu stylizowanego za pomocą CSS, a nie prezentacji tekstowej opartej na obrazach. W sytuacjach, w których należy użyć obrazów tekstu, tekst alternatywny musi zawierać ten sam tekst, który jest przedstawiony na obrazie.

Porady:

• Diagramy, wykresy, tabele: Używaj rzeczywistego tekstu w wizualizacjach danych. Jeśli prawdziwy tekst nie jest możliwy, tekstowa reprezentacja istotnych informacji przekazywanych przez obraz jest niezbędna. Np.: długi opis lub widok listy.
• Wyjątki: logo, elementy brandingowe i grafika, które mają dobre alternatywy dla tekstu opisowego.

Przykład dobrego tekstu na obrazie

4. Stany ukrytego skupienia

Stany fokusu pomagają użytkownikom nawigować i rozumieć, gdzie się znajdują. Nigdy ich nie ukrywaj. Stany skupienia są ważne dla użytkowników klawiatury. Pomaga im zrozumieć, gdzie się znajdują na stronie. Aby przetestować swoją witrynę, spróbuj przejrzeć swoją stronę i znaleźć swój cel.

Porady:

• Stany fokusu : Jeśli usuniesz domyślne stany fokusa, zastąp je czymś, co działa lepiej niż to, co zapewnia Twoja przeglądarka.
• Stany wejściowe: Zastanów się, co dzieje się z etykietami, gdy skupiasz się na danych wejściowych.
• Akcje strony: jasno określ główne efekty uboczne akcji.

Ukryte stany skupienia

Dobre stany skupienia

5. Myląca struktura hierarchiczna

Twórz jasne relacje między treściami, które są dostrzegalne, a tymi, które można określić programistycznie. Projektuj strony, które mają sens semantyczny, aby programiści mogli przełożyć je z projektu na kod, a czytnik ekranu mógł określić poprawną kolejność czytania.

Porady:

• Semantyka: uwzględnij wymagane pola i etykiety w formularzach. Projektuj tabele z nagłówkami kolumn.
• Grupy logiczne: Pogrupuj powiązane elementy z dużą ilością miejsca lub kolorami tła. Prezentuj informacje sekwencyjnie, takie jak diagramy procesów lub instrukcje krok po kroku.
• Progressive Disclosure: Projekt do bezpośredniej manipulacji. Zaprezentuj właściwe rzeczy we właściwym czasie. Ćwicz progresywne ujawnianie.
• Odnajdywanie drogi: Twórz spójne wskazówki do nawigacji. Użyj nagłówków, aby utworzyć wyraźne punkty orientacyjne na stronie.
• Spójność: Przedstaw rzeczy, które są takie same w ten sam sposób.
• Różnicuj: rozróżniaj różne typy treści.

Zła hierarchia

Dobra hierarchia

6. Nadmierne obciążenie poznawcze

Jasno przekaż informacje, które są łatwe do zrozumienia. Projektuj informacje w sposób, który ułatwia konsumpcję osobom, które żyją z zespołem nadpobudliwości psychoruchowej z deficytem uwagi (ADHD) oraz autyzmem lub zaburzeniami ze spektrum autyzmu.

Porady:

• Bądź zwięzły: używaj krótkich zdań i wskazówek wizualnych, aby oddzielić informacje. Np. lista grup za pomocą liczb lub punktorów.
• Zminimalizuj obciążenie poznawcze: stwórz narrację, która przedstawia informacje we właściwym miejscu we właściwym czasie. Unikaj prezentowania gęstych akapitów informacji, które można podzielić. Unikaj długich środków.

7. Niezróżnicowane hiperłącza

Łącza są jednym z najczęstszych elementów w sieci i często są niezbędne do poruszania się po stronach internetowych. Linki powinny wyglądać jak linki i nic innego nie powinno. Użytkownicy mogą być sfrustrowani, jeśli spróbują kliknąć frazy tekstowe lub grafiki, które wyglądają jak linki, ale nimi nie są. Linki powinny mieć sens poza kontekstem.

Porady:

• Bądź konkretny: używaj opisowych słów dla przycisków zamiast niejasnej terminologii, aby wynik był przewidywalny.
• Łącza niepodkreślone: ​​tekst łącza musi mieć współczynnik kontrastu 3:1 w stosunku do otaczającego tekstu niebędącego łączem.
• Nie polegaj tylko na kolorze: link musi przedstawiać „oznacznik inny niż kolor” zarówno po najechaniu myszą, jak i fokusie klawiatury. Np.: cienie, skala, przejścia/przekształcenia, zmiany koloru lub podkreślenie.

Złe hiperłącza

Dobre hiperłącza

8. Nieczytelna typografia

Większość informacji na stronach internetowych jest przekazywana za pomocą tekstu, dlatego czcionka powinna być czytelna i czytelna. Pomaga to osobom niedowidzącym łatwo rozpoznać postacie. U osób z trudnościami w nauce może zmniejszyć wysiłek związany z czytaniem. Użyj czystej, prostej typografii z dobrymi odstępami. Zastosuj wygodny kerning i interlinię, aby tekst był czytelny.

Porady

• Daj użytkownikom kontrolę: nie uniemożliwiaj użytkownikom dostosowywania własnego sposobu czytania, zmieniając rozmiar kopii treści na mniejszy rozmiar czcionki. Możesz to zrobić, ustawiając rozmiar czcionki na 100% i używając względnych rozmiarów, aby ustalić hierarchię między nagłówkami. Tekst powinien być nadal czytelny w 200%.
• Zmniejsz podkreślenia, kursywę i wielkie litery: te formy literowe są trudniejsze do rozpoznania i odczytania.
• Wyrównaj długi tekst do lewej: Twórz spójne układy z liniowymi ścieżkami, którymi może podążać oko.

Powiększ na 100%

Zmień rozmiar tekstu. Sprawdź, czy Twoje strony są dostępne i przydatne dla użytkowników niedowidzących i niedowidzących. Zmień rozmiar tekstu i upewnij się, że wszystko na stronie działa. Powtarzaj, aż dojdziesz do 200% powiększenia. Wydaje się proste? To jest.

Kroki, aby sprawdzić swoją typografię:

1. Otwórz przeglądarkę i zmień rozmiar tekstu do 200 procent. Kliknij Widok, wybierz Powiększ, a następnie kliknij Powiększ (Ctrl/Cmd ++), aby powiększyć tekst.
2. Zobacz, jak zareagowała treść na ekranie. Cała zawartość strony powinna być nadal czytelna i żadna funkcjonalność nie powinna zostać utracona.
3. Sprawdź, czy interakcje nadal działają, czy tekst nakłada się na siebie, czy ważny tekst został obcięty lub czy tekst został ucięty.

Powiększ na 200%

Porady:

1. Otwórz przeglądarkę i zmień rozmiar tekstu do 200 procent. Kliknij Widok, wybierz Powiększ, a następnie kliknij Powiększ (Ctrl/Cmd ++), aby powiększyć tekst.
2. Zobacz, jak zareagowała treść na ekranie. Cała zawartość strony powinna być nadal czytelna i żadna funkcjonalność nie powinna zostać utracona.
3. Sprawdź, czy interakcje nadal działają, czy tekst się nakłada, czy ważny tekst został obcięty lub czy tekst został ucięty.

Zasoby

Około jedna na osiem osób w Stanach Zjednoczonych jest niepełnosprawna. Jeśli definicja zostanie rozszerzona o osoby, które są umiarkowanie upośledzone, liczba ta podskoczy do prawie jednej piątej.

Niedostosowanie się do tak dużej liczby odbiorców ogranicza pozytywny wpływ, jaki strona internetowa może mieć na Twój biznes – nie wspominając o zdolności Twojej marki do rezonowania z ludźmi i wzbudzania wiary. Stworzenie dostępnej strony internetowej, z której można korzystać w jak największej liczbie przeglądarek i przez jak największą liczbę osób, może pomóc Twojej firmie – ale jest to również po prostu właściwe rozwiązanie. Dlatego zebraliśmy kilka innych zasobów na ten temat.

• Dowiedz się, dlaczego firmy muszą rozważyć dostępność sieci (i uniknąć korporacyjnego procesu sądowego).
• Obejrzyj podcast Solving for B° na temat znaczenia dostępności sieci.

Kontrast kolorów

• Internetowy kontroler kontrastu AIM
• Kolorowy kontroler kontrastu

Struktura

• Rozszerzenie mapy nagłówków do Chrome
• Biblioteka wzorców projektu A11Y

Kredyty

• Projekt A11Y
• w3.org- WCAG 2.0
• w3.org- Standardy i przegląd
• Usability.org
• Badania dostępności w IBM
• Muzea Carnegie w PittsburghDisney.com dobra hierarchia