Przewodnik po Web Accessibility – kluczowe wskazówki

Jako projektant stron internetowych odgrywasz znaczącą rolę w dostępności i integracji witryny. Wiele elementów projektu, od typografii po media, może tworzyć bariery dla osób niepełnosprawnych. Przy tak wielu kwestiach, którymi należy się zająć, może się to wydawać zadaniem niewykonalnym.

Na szczęście istnieje wiele wskazówek dotyczących projektowania strony internetowej dostępnej dla wszystkich. Zwracając szczególną uwagę na kilka kluczowych obszarów, powinieneś być w stanie uwzględnić dostępność w procesie projektowania bez przerywania pracy.

W tym przewodniku wprowadzimy Cię w pojęcie dostępności internetowej i jej znaczenie. Następnie omówimy sześć kluczowych obszarów, o których należy pamiętać podczas projektowania dostępnej strony internetowej. Zacznijmy!

Wprowadzenie do dostępności internetowej – Web Accessibility

Dostępność w sieci oznacza, że ​​wszystkie aspekty witryny są dostępne dla osób niepełnosprawnych. Bez niej duża część informacji w Internecie byłaby niedostępna dla dużego odsetka populacji. Dla właścicieli firm internetowych oznaczałoby to również utratę potencjalnej sprzedaży.

W 2019 r. prawie 60% niepełnosprawnej populacji Stanów Zjednoczonych mieszkało w domu z dostępem do Internetu. Przekłada się to na wiele osób, które polegają na projektach z ułatwieniami dostępu, aby w pełni korzystać z sieci. Osoby niepełnosprawne również mają tendencję do przyjmowania technologii po niższych stawkach, co oznacza, że ​​mogą nie mieć wyboru urządzenia, z którego mają korzystać podczas uzyskiwania dostępu do strony internetowej.

Konsorcjum World Wide Web (W3C) opracowało Wytyczne dotyczące dostępności treści internetowych (WCAG), aby zapewnić zestaw standardów dla programistów, projektantów i innych osób odpowiedzialnych za tworzenie i utrzymywanie treści w sieci.

Web Accessibility wytyczne dotyczące dostępności są podzielone na cztery zasady, czasami określane skrótem POUR:

• Postrzegalny: elementy witryny muszą być prezentowane w sposób, który użytkownicy mogą dostrzec, niezależnie od niepełnosprawności.
• Operacyjny: Nawigacja i obsługa nie mogą wymagać działań wejściowych, których użytkownik nie może wykonać.
• Zrozumiałe: Użytkownicy muszą zrozumieć, jak korzystać z witryny internetowej i jej zawartości oraz jak się na niej poruszać.
• Solidność: Treść musi być zgodna z obecną i przyszłą technologią wspomagającą.

Zasady te mogą wydawać się przytłaczające, a nawet nieco niejasne. Istnieją jednak konkretne kroki, które możesz podjąć, aby Twoja witryna była dostępna dla wszystkich.

Web Accessibility – spraw, aby elementy projektu wizualnego były czytelne

Typografia to zabawny obszar, w którym można pokazać swój kreatywny talent, ale głównym celem tekstu witryny jest przekazywanie informacji. Jest kilka wskazówek, o których należy pamiętać podczas pracy z typografią.

Najpierw pomyśl o kontraście między tekstem a tłem. Kontrast jest wyrażony jako stosunek i zgodnie z wytycznymi WCAG minimalny kontrast wynosi 4,5:1 dla zwykłego tekstu i 3:1 dla dużego tekstu.

Istnieje kilka narzędzi, których możesz użyć do przetestowania kombinacji kolorów. Jednym z nich jest kontroler kontrastu WebAIM.

Wysokość linii i odstępy między literami również wchodzą w grę, jeśli chodzi o dostępność. Aby tekst był czytelny, W3C zapewnia następujące wskazówki:

• Wysokość linii musi być co najmniej 1,5 razy większa od rozmiaru czcionki.
• Odstępy między akapitami powinny być dwa razy większe od rozmiaru czcionki.
• Odstępy między literami muszą być co najmniej 0,12 razy większe od rozmiaru czcionki.
• Miejsce na słowa powinno być co najmniej 0,16 razy większe od rozmiaru czcionki.

Wykresy to kolejny sposób na przedstawienie wielu informacji w łatwo zrozumiałym formacie. Jeśli jednak rozróżniasz elementy tylko według koloru, możesz mieć niedobór wielu osób. W rzeczywistości na całym świecie jest około 3 milionów osób z daltonizmem, które mogą zmagać się z Twoimi treściami.

Aby pewne elementy wizualne były zrozumiałe, rozważ użycie na wykresach zarówno wzorów, jak i kolorów. Przy wyborze projektów zalecamy wybór tych, które wystarczająco różnią się od siebie. Na przykład linie lub kropki są łatwo dostrzegalne, podczas gdy linie o różnej grubości mogą nie być.

Web Accessibility – organizuj treści dla łatwego zrozumienia

Bez względu na to, jaki rodzaj witryny projektujesz, prawdopodobnie jest dużo tekstu. Możesz poprawić dostępność, organizując zawartość w sposób łatwy do przejrzenia i zrozumienia.

Po pierwsze, większość użytkowników doceni rozbicie tekstu na krótkie akapity. Ludzie często nie czytają głęboko w Internecie, a krótsze sekcje są łatwiejsze do przeglądania.

Nagłówki mają również kluczowe znaczenie dla skanowalności. Każdy nagłówek powinien dokładnie opisywać treść pod nim i postępować zgodnie z logiczną hierarchią. Oznacza to używanie najpierw większych nagłówków, a następnie coraz mniejszych w miarę omawiania bardziej szczegółowych informacji.

Użycie odpowiednich znaczników dla nagłówków może ułatwić czytnikom ekranu czytanie i poruszanie się po treści. W HyperText Markup Language (HTML) będziesz używać znaczników od <h1> aż do <h6> do tworzenia hierarchicznych nagłówków w celu podzielenia tekstu.

Dodając linki do treści, upewnij się, że tekst kotwicy jest wystarczająco opisowy, aby czytelnicy wiedzieli, dokąd zaprowadzi ich kliknięcie. Warto też wspomnieć, czy link otworzy się w nowym oknie. Nieoczekiwane otwarcie okna może powodować problemy z czytnikami ekranu i dezorientować użytkownika.

Powinieneś także pozwolić użytkownikom na pomijanie treści bez używania kółka przewijania lub wielokrotnego naciskania klawiszy strzałek. Może to być tak proste, jak dołączenie spisu treści na początku posta na blogu. Możesz także mieć przycisk, który przeskakuje bezpośrednio do głównej treści strony.

Web Accessibility – utrzymuj elementy interfejsu użytkownika (UI) intuicyjne i niezależne od urządzenia

Elementy interfejsu użytkownika (UI) to wszystko, z czym odwiedzający muszą wejść w interakcję, aby nawigować, i odgrywają ważną rolę w ogólnym doświadczeniu użytkownika (UX). Elementy interfejsu użytkownika mogą obejmować paski przewijania, menu rozwijane i powiadomienia.

Aby strona internetowa została uznana za dostępną, osoby korzystające z różnych urządzeń muszą mieć możliwość pomyślnej interakcji z tymi elementami interfejsu użytkownika. Oznacza to, że kluczowe znaczenie ma projektowanie niezależne od urządzenia.

Na przykład niektórzy ludzie mogą używać tylko klawiatur. Aby umożliwić im poruszanie się po stronie internetowej, możesz dołączyć wskaźniki fokusu do podświetlania przycisków, łączy i pól tekstowych, gdy użytkownik przechodzi przez stronę tabulatorem.

Wszystko, z czym można wchodzić w interakcję, powinno mieć odpowiedni wskaźnik skupienia. Wygląd może się różnić w zależności od przeglądarki, ale zazwyczaj są one wyświetlane jako niebieski lub biały kontur w zależności od koloru tła.

Dodając wskaźniki ostrości, musisz zdefiniować kolejność tabulacji. Ta kolejność powinna być podobna do tej, którą czytasz: od góry do dołu i od lewej do prawej. Możesz to przetestować, przechodząc na swoją witrynę.

Staraj się utrzymywać nawigację i inne menu w spójnej kolejności w całej witrynie. Elementy te powinny również pojawiać się mniej więcej w tych samych miejscach na każdej stronie, ponieważ ułatwia to ich zapamiętanie i przyspiesza korzystanie.

Cele dotykowe to obszary, które użytkownik dotyka podczas korzystania z urządzenia z ekranem dotykowym. Definiując cele dotykowe, musisz mieć pewność, że są wystarczająco duże, aby każdy mógł je łatwo dotknąć. Na przykład osobom z zaburzeniami nerwowo-mięśniowymi może brakować kontroli motorycznej potrzebnej do interakcji z małym celem.

Jednak nie chcesz też tworzyć celów tak dużych, że nakładają się na pobliskie elementy. Naciśnięcie jednego przycisku, gdy celujesz w inny, wystarczy, aby kogokolwiek sfrustrować.

Niektórzy użytkownicy w dużym stopniu polegają na skrótach klawiaturowych. Chociaż możesz zdefiniować skróty dla swojej witryny, może to nie być najlepszy sposób działania. Skróty klawiaturowe nie są ustandaryzowane w internecie, a wszelkie utworzone przez Ciebie mogą powodować konflikty z używanym przez kogoś urządzeniem. Jeśli zdecydujesz się dodać niestandardowe skróty, upewnij się, że jest to jasne i zawiera wskazówki dotyczące ich używania.

Niektóre rodzaje interakcji nie są dostępne na każdym urządzeniu. Na przykład, podczas gdy powiększanie przez szczypanie jest wygodne w przypadku telefonów komórkowych, nie jest to możliwe na żadnym komputerze bez ekranu dotykowego. Upewnij się, że treść nie jest zablokowana za działaniami, które Twoi użytkownicy mogą nie być w stanie wykonać. Podaj wiele dróg do swoich informacji.

UX to bardzo zaangażowany obszar projektowania stron internetowych z wieloma ruchomymi częściami. Dlatego warto rozważyć dodanie sekcji do przewodnika po stylu, aby pomóc zachować spójność wszystkich elementów interfejsu użytkownika w witrynie.

Web Accessibility – uwzględnij wiele sposobów korzystania z multimediów

Media mogą wiele wnieść do strony internetowej, ale należy pamiętać o problemach z dostępnością. Na szczęście możesz zapewnić, że każdy używany przez Ciebie nośnik będzie cieszył się uznaniem wszystkich.

Po pierwsze, najlepiej całkowicie unikać niektórych rodzajów mediów. Migająca animacja lub wyskakujące okienka mogą potencjalnie wywołać u niektórych osób napady padaczkowe. Możesz także pominąć przewijany tekst lub animowaną zawartość, której nie można wstrzymać. Wchłonięcie przez niektórych użytkowników może być trudne lub nawet niemożliwe.

Jeśli czujesz potrzebę włączenia przewijania lub animacji, istnieją sposoby na uczynienie tych elementów bardziej dostępnymi. Upewnij się, że tekst porusza się na tyle wolno, aby odwiedzający mogli go łatwo przeczytać. Ponadto umożliwiaj użytkownikom wstrzymanie zawartości i jasne określenie, jak to zrobić.

Tworząc treści wideo dla swojej witryny, możesz dołączyć napisy dla osób niesłyszących i niedosłyszących. Powinieneś także dodać tekstową transkrypcję treści filmu dla osób korzystających z czytnika ekranu.

Odwiedzający korzystający z czytników ekranu mogą czasami mieć trudności z obrazami w witrynie. Aby umożliwić tym osobom zobaczenie, co dzieje się na obrazie, możesz dołączyć tekst alternatywny.

Web Accessibility – przeprowadzaj badania i testy użytkowników

Badania i testy użytkowników prawdopodobnie nie są dla Ciebie tak ekscytujące jak proces projektowania, ale mają kluczowe znaczenie dla dostępności gwoździ. Badania użytkowników najlepiej przeprowadzać na wczesnym etapie procesu, aby dowiedzieć się, kim są Twoi użytkownicy i czego od Ciebie oczekują. Możesz przeprowadzać testy przez cały proces projektowania, aby pomóc Ci podążać we właściwym kierunku.

Dokładne badania zapewnią, że żaden z Twoich użytkowników nie wpadnie w zakłopotanie i pomogą Ci opracować plan projektowania Twojej witryny. Możesz użyć grup fokusowych lub ankiet, aby określić, czego użytkownicy potrzebują od Twojej witryny i jak zamierzają z niej korzystać.

Prawdopodobnie będziesz chciał przeprowadzić testy podczas całego procesu tworzenia witryny. Możesz wypróbować testy A/B na etapie tworzenia szkieletu, gdy jest jeszcze czas na przestawienie. Gdy Twoja witryna zostanie uruchomiona, możesz obserwować ludzi korzystających z Twojej witryny i pytać o ich przemyślenia, gdy wykonują określone zadania.

Podczas badań i testów najlepiej zebrać zróżnicowaną grupę uczestników. Uwzględnienie tych wszystkich umiejętności daje większą szansę na zaprojektowanie witryny, która będzie działać dla wszystkich.

Możesz także samodzielnie przeprowadzić testy, na przykład próbując nawigować po witrynie za pomocą samej klawiatury. W przypadku innych elementów dostępności możesz wypróbować wtyczkę, taką jak WP Accessibility.

Może Cię zainteresować: