Dostępność cyfrowa dla marketerów, część 2: Doświadczenie użytkownika i strony internetowe
Opublikowany: 2022-06-16W pierwszym poście z tej serii na temat dostępności cyfrowej poruszyliśmy „co i dlaczego” dostępności dla marketerów. Teraz nadszedł czas na „jak”.
Pamiętaj, że celowo ograniczyliśmy nasze rekomendacje do tych elementów, które są dość łatwe do wdrożenia i są istotne dla marketerów. Ta seria w żadnym wypadku nie jest wyczerpującą listą wszystkich standardów, o których firmy muszą wiedzieć, jeśli chodzi o dostęp do treści. Jeśli chcesz dowiedzieć się więcej o wytycznych dotyczących dostępności i kryteriach WCAG, zapoznaj się z programem e-learningowym TGPi. Jest to opcja we własnym tempie, której możesz użyć, aby odświeżyć swoje umiejętności lub zapoznać się z technikami ułatwień dostępu i najlepszymi praktykami.
Przejdźmy do zaleceń!
Dostępność i doświadczenie użytkownika
Płynne i bezwysiłkowe doświadczenie użytkownika jest gwiazdą północy dla każdego marketera. Łatwość, z jaką dana osoba może wykonać krytyczne zadanie i to, jak dobrze treść spełnia oczekiwania, ma na to duży wpływ i spowoduje, że Twoje wysiłki marketingowe zostaną podjęte lub zerwane.
Ma sens, prawda? Jeśli chcesz kupić coś online i napotkasz problem podczas próby wprowadzenia danych karty kredytowej lub poszukiwanego produktu nie ma w magazynie, jakość obsługi spadnie. Po pierwsze dlatego, że nie byłeś w stanie osiągnąć tego, co zamierzałeś zrobić, a po drugie, ponieważ spodziewałeś się, że będziesz w stanie to osiągnąć, ale tego nie było w kartach. Ta podwójna frajda prawie na pewno zapewni, że nie wrócisz na tę konkretną stronę!
Jako marketer dobrze zdajesz sobie sprawę z tego, jak ważne są doskonałe wrażenia użytkownika. Możesz nawet go testować (dobrze dla ciebie!) Lub masz narzędzia analityczne, aby to zmierzyć. Te środki mają kluczowe znaczenie dla optymalizacji ścieżki marketingowej. Jednak to, czego możesz nie robić, to testowanie środowiska użytkownika pod kątem ułatwień dostępu. (Jeśli nie, nie osądzaj! To właśnie zamierza zmienić ta seria postów.)
Podróże użytkowników
Podróż użytkownika (nazywana również przepływem użytkownika lub ścieżką użytkownika) to sekwencja działań, które użytkownik wykonuje w Twojej witrynie. Krytyczna podróż użytkownika jest zgodna z głównym celem Twojej witryny, takim jak dokonanie zakupu, przesłanie formularza, obejrzenie filmu, przeczytanie posta itp.
Z kilku powodów należy zawsze priorytetowo traktować środki zaradcze dotyczące ułatwień dostępu w kluczowych procesach użytkownika.
Po pierwsze, chociaż możesz mieć niesamowite treści w całej witrynie, jeśli użytkownik nie może zrealizować swojego głównego celu, jakim jest odwiedzenie Twojej witryny, to jest to klient, którego straciłeś na zawsze.
Po drugie, wiele osób niepełnosprawnych jest niestety przyzwyczajonych do napotykania wyzwań podczas robienia rzeczy, które inni uważają za oczywiste. Na ogół ich oczekują, ponieważ tak duża część świata nie została stworzona z myślą o ich szczególnych niepełnosprawnościach.
Średnio drobne problemy z dostępnością treści stycznych nie są w stanie ich sfrustrować do momentu wszczęcia postępowania prawnego. Ale jeśli nie są w stanie zrobić jednej rzeczy , do której przybyli w Twojej witrynie, otwierasz się na wielką puszkę ryzyka prawnego, zwłaszcza jeśli jesteś marką z siedzibą w USA.
Testowanie krytycznych ścieżek użytkownika
Jak więc przetestować przepływy użytkowników o znaczeniu krytycznym pod kątem dostępności? Jeśli zdecydujesz się na ręczną trasę, możesz przeprowadzić testy użytkowników z osobami niepełnosprawnymi lub sprawdzić kod dla każdego kroku za pomocą narzędzia takiego jak ARC Toolkit TPGi (więcej na ten temat później), aby zidentyfikować awarie WCAG.
Chociaż testowanie ręczne jest ostatecznie bardziej wszechstronne, jeśli chcesz natychmiast zidentyfikować błędy dostępności w krytycznych ścieżkach użytkowników, możesz użyć funkcji User Flows ARC Monitoring, aby automatycznie przeskanować każdy komponent pod kątem dostępności. Możesz uwzględnić wszystkie składniki i dynamiczne interakcje podróży użytkownika, od obrazów po okna dialogowe, do skanowania, a także będziesz w stanie śledzić błędy w czasie, aby usprawnić wewnętrzne procesy naprawcze.
Możesz sparować informacje uzyskane z monitorowania przepływów użytkowników ARC z innymi narzędziami analitycznymi, takimi jak ścieżka i cele Google Analytics, aby zidentyfikować bariery, które uniemożliwiają użytkownikom wykonanie pożądanego działania.
Dostępne strony internetowe
Witryna internetowa to cyfrowy sklep lub biuro Twojej firmy. Może to być pierwsze (lub jedyne) wrażenie, jakie potencjalny klient wywrze na Twojej firmie, więc postaraj się, aby była jak najbardziej atrakcyjna. Może masz kilka filmów lub wiele obrazów, aby przełamać monotonię, lub strony na stronach z wartościowymi treściami na blogu. To są wspaniałe atuty, które marketerzy mogą wykorzystać, aby przekonać ludzi do zakupu ich produktów.
Zapewnienie dostępności wszystkich tych treści może wydawać się zniechęcające, ale wiele najlepszych praktyk dotyczących dostępnych treści jest nie do odróżnienia od najlepszych praktyk marketingowych. Czytaj dalej, aby dowiedzieć się więcej:
Opisowy tekst linku
Każdy dobry marketer wie, że przejrzystość jest niezbędna do doskonałej komunikacji. Jeśli ozdobisz swoją kopię puszystymi i ważnymi (ale ostatecznie bezsensownymi) słowami, Twoja wiadomość zostanie utracona. Z tego samego powodu, jeśli jesteś zbyt oszczędny w swoich wyjaśnieniach, klient może nie mieć wystarczających informacji, aby zrozumieć, co mu mówisz.
Treści wysokiej jakości to równowaga między tymi dwoma skrajnościami i nic dziwnego, że link lub tekst zakotwiczenia podlegają tym samym zasadom. Najlepszy tekst linku daje użytkownikowi wyobrażenie o tym, czego może się spodziewać po kliknięciu. Opisowy tekst linku jest szczególnie ważny w przypadku tekstu wezwania do działania. Co lepiej przygotuje użytkownika na to, co napotka, gdy kliknie: „Kliknij tutaj” lub „Pobierz naszą białą księgę”? Oczywiście to drugie! (Jeśli wybrałeś to pierwsze, możesz rozważyć nową ścieżkę kariery.)
Nie ma potrzeby umieszczania swojego CTA w modnych słowach („Pobierz największy na świecie dokument na temat magii Harry'ego Houdiniego!”), ale ważne jest, aby ludzie wiedzieli, w co się pakują.
Dlaczego tekst linku jest tak ważny dla ułatwień dostępu? Po pierwsze, bardzo pomaga osobom niewidomym lub niedowidzącym w przeglądaniu zawartości strony. (Dotyczy to również osób z nieskazitelnym wzrokiem.) Użytkownicy z wadami wzroku korzystają z szeregu technologii wspomagających, aby uzyskać dostęp do treści cyfrowych, takich jak narzędzia do powiększania ekranu dla osób niedowidzących i czytniki ekranu dla osób niewidomych. Jak sama nazwa wskazuje, czytnik ekranu dosłownie czyta to, co jest na ekranie.
Jednak czytniki ekranu, takie jak JAWS, pozwalają użytkownikom skakać po ekranie, czytając różne komponenty zamiast przechodzenia przez cały kod HTML od góry do dołu. Gdy użytkownik przechodzi od komponentu do komponentu, czytnik ekranu odczytuje tylko tekst kotwicy linków, a nie otaczającą go kopię. Oznacza to, że jeśli wszystkie Twoje linki mają tę samą kopię „kliknij tutaj”, użytkownik czytnika ekranu nie będzie miał pojęcia, co się stanie, jeśli kliknie ten link; są zmuszeni zbadać otaczające treści, aby zrozumieć, do czego odnosi się ten link.
Co więcej, czytniki ekranu umożliwiają użytkownikom otwieranie „listy linków”, która zapewnia im szybki dostęp do wszystkich linków na stronie internetowej. Jest to typowy scenariusz, w którym tekst linku zostanie odczytany z otaczającego go kontekstu, a rzeczy takie jak „kliknij tutaj” stają się prawdziwym problemem.
Tekst alternatywny dla obrazów
Tekst alternatywny lub „tekst alternatywny” opisuje obrazy Twojej witryny, dzięki czemu użytkownik czytnika ekranu może uzyskać pełniejszy obraz zawartości każdej strony internetowej. Jeśli wybierzesz obrazy, które działają jako wizualne wyjaśnienie, ludzie, którzy ich nie widzą, będą zagubieni, jeśli zrezygnujesz z tekstu alternatywnego.
Jeśli jednak dołączyłeś obrazy z powodów czysto estetycznych (może naprawdę lubisz zdjęcia ludzi zgarbionych nad komputerami) i masz ich kilka, możesz nie chcieć dodawać tekstu alternatywnego dla nich wszystkich. Czytniki ekranu będą czytać cały tekst alternatywny dla każdego obrazu, co może być denerwujące, jeśli tekst nie dodaje wartości do doświadczenia. Jeśli obraz może zostać uznany za dekoracyjny i nie dodaje żadnego dodatkowego znaczenia/zrozumienia treści strony, powinien zostać ukryty przed technologią wspomagającą poprzez podanie pustego atrybutu alt.
Dobrze zorganizowane strony internetowe
Odpowiednio wykorzystuj tagi nagłówków, aby zarówno czytelnicy niedowidzący, jak i zdrowi mogli przeglądać stronę i uzyskać podstawowe zrozumienie treści oraz łatwo się po niej poruszać. Postępuj zgodnie z najlepszymi praktykami dotyczącymi nagłówków, np. zaczynaj każdą stronę od H1, który opisuje zawartość strony, a następnie używaj nagłówków H2 i H3 jako podnagłówków. Celowo używaj tagów nagłówków; nie rozkładaj ich losowo bez zastanowienia się nad strukturą.
Chociaż możesz rozróżniać nagłówki za pomocą środków wizualnych za pomocą stylów CSS, użytkownicy czytników ekranu nie mają luksusu oglądania tych różnic. Szczególnie ważne jest, aby korzystać z dobrze sformatowanych układów stron, aby użytkownicy z problemami ze wzrokiem mogli z łatwością korzystać z treści.
Ogranicz gęste akapity do minimum, używaj krótszych zdań, kiedy możesz i unikaj używania żargonu lub slangu. Jaśniejsza, bardziej zwięzła treść pomoże użytkownikom z zaburzeniami poznawczymi lepiej zrozumieć Twoje treści, a także pomoże zminimalizować zamieszanie dla wszystkich czytelników.
Być może słyszałeś, że rozpiętość uwagi ludzi jest teraz krótsza niż u złotej rybki? Jeśli masz wątpliwości, przełam je; uczynić to tak prostym, jak to tylko możliwe.
Współczynniki kontrastu kolorów
Miejmy nadzieję, że przewodnik po stylu Twojej organizacji nie został zaprojektowany przez Świętego Mikołaja, ponieważ używanie czerwieni i zieleni jako kolorów dopełniających nie przyniesie użytkownikom żadnych korzyści. Kontrast kolorów jest niezbędnym elementem przystępnego designu. Osobom słabowidzącym może być trudno odróżnić kolory, które są zbyt podobne, a dla osób z daltonizmem wiele kolorów jest nie do odróżnienia.
Możesz wypróbować darmowe narzędzie Color Contrast Analyzer firmy TGPi, które pozwoli uniknąć zgadywania przy określaniu wystarczających proporcji kolorów. Użyj selektora kolorów, aby wybrać kolory pierwszego planu i tła, a CCA poinformuje Cię, czy kontrast jest odpowiedni.
Dostępne formularze
Praktycznie każda witryna korzysta z formularza, aby umożliwić użytkownikom wykonanie zadania. Niezależnie od tego, czy Twoja firma jest e-commerce, usługowa, czy tylko wizytówką online, najprawdopodobniej będzie zawierała formularz. Jednak formularze mogą być trudne dla osób niepełnosprawnych. Istnieje kilka kwestii technicznych (czytaj: tych, które powinni wdrożyć programiści), a także nietechnicznych, które marketerzy bez wiedzy na temat kodowania mogą z łatwością śledzić. Oto najlepsze praktyki nietechniczne:
- Utrzymuj krótkie i proste formularze – Uzyskaj dane kontaktowe klientów, a następnie zbuduj relację, aby ich zaangażować i uzyskać więcej dodatkowej wiedzy
- Podaj jasne instrukcje i widoczne etykiety – nikt nie lubi mylących formularzy
- Zatwierdź dane wejściowe (cofnij zmiany/potwierdź) – Powiadom użytkowników o wszelkich problemach i sposobach ich rozwiązania
- Powiadomienie użytkownika (sukces/niepowodzenie) — Poinformuj użytkowników, czy przesłanie formularza powiodło się, czy nie
- Zastosuj wielostronicowy lub progresywny – jeśli musisz mieć bardziej skomplikowany formularz, dąż do wielostronicowego lub progresywnego formularza, który nie przytłacza użytkowników
- Usuń ograniczenia czasowe lub zapewnij opcje – Limity czasowe mogą być przydatne w zmuszaniu kupujących do zakupu, ale powodują nadmierny stres u osób z poważnymi problemami lękowymi
Bułka tarta
Bułka tarta to forma nawigacji w witrynie, która pozwala zobaczyć, jak aktualnie przeglądana strona pasuje do większego obrazu. Zwykle są to linki prowadzące do stron wyższego poziomu.
Przykładem ścieżki nawigacyjnej w witrynie e-commerce, która sprzedaje odzież, może być:
Kobiety > Kurtki > Wełna > Płaszcze z grochu.
Okruszki chleba są przydatne do znajdowania drogi i umożliwiają użytkownikom łatwe nawigowanie z powrotem do stron wyższego poziomu bez rozpoczynania podróży od zera.
Są one szczególnie ważne dla osób niepełnosprawnych z kilku powodów. Po pierwsze, użytkownicy z niepełnosprawnością poznawczą zawsze będą korzystać z przyjaznego dla użytkownika środowiska, które minimalizuje niejednoznaczność. Bułka tarta jest szczególnie ważna, jeśli witryna jest rozbudowana i skomplikowana. Bułka tarta również natychmiast orientuje użytkowników czytników ekranu, dzięki czemu nawigacja w witrynie jest mniej uciążliwa.
Okruszki nawigacyjne są wyraźnie przydatne dla użytkowników z niepełnosprawnościami, podobnie jak wiele sprawdzonych metod ułatwień dostępu, ale poprawiają wygodę wszystkich użytkowników.
Chatboty i integracje firm trzecich
Wiele witryn korzysta z integracji stron trzecich w swoich witrynach, takich jak chatboty, wyskakujące okienka, dynamiczne strony docelowe itp. To niefortunna rzeczywistość, że oprogramowanie innych firm jest często w dużej mierze niedostępne, co dodatkowo pogarsza niezdolność firmy do naprawienia tego problemu.
Jeśli Twoja organizacja zdecyduje się na zintegrowanie aplikacji innej firmy z Twoją witryną, koniecznie poproś eksperta, który ją oceni, zanim ją dodasz. Chociaż możesz nie być w stanie pogodzić wielu błędów dostępności, przynajmniej zrozumiesz poziom ryzyka, które podejmujesz. Możesz również poprosić dostawcę o oświadczenie o dostępności lub gwarancję w celu wbudowania go w umowę (chociaż przed wdrożeniem należy przetestować produkt, aby zweryfikować jego poprawność).
Na marginesie zawsze pytaj swoich dostawców o dostępność ich produktów. Im więcej klientów poprosi o dostępne produkty, tym większa szansa, że dostawcy wysłuchają ich i zaczną włączać funkcje ułatwień dostępu do swoich kompilacji produktów.