W tym filmie Jaci z zespołu WebFX Interactive wyjaśnia, jak rozpocząć projektowanie stron internetowych z ułatwieniami dostępu.

Transkrypcja:

Jak byś się czuł, gdybyś był naprawdę podekscytowany, aby sprawdzić witrynę internetową, ale kiedy wchodzisz na tę witrynę, nie masz dostępu do żadnej jej zawartości? Osobiście czułbym się sfrustrowany i wyobrażam sobie, że ty też.

Jeśli nie korzystasz z projektowania stron internetowych z ułatwieniami dostępu, taki scenariusz tworzysz dla co czwartej osoby niepełnosprawnej mieszkającej w Stanach Zjednoczonych. To około 61 milionów osób, które nie mają równego dostępu do Twojej witryny.

Przestrzeganie wytycznych dotyczących ułatwień dostępu do projektowania stron internetowych nie jest łatwe, jeśli nigdy wcześniej tego nie robiłeś, ale przedstawię kilka rzeczy, które możesz zrobić na początek .

Użyj sygnatur czasowych w opisie filmu, jeśli chcesz przejść do różnych sekcji tego filmu. W tej chwili zajmę się przeglądem dostępności stron internetowych.

Czym jest dostępność strony internetowej?

Dostępność witryny oznacza, że ​​witryna została zaprojektowana tak, aby osoby niepełnosprawne mogły z niej korzystać. Celem projektu z ułatwieniami dostępu jest usunięcie barier technologicznych, aby każdy mógł wchodzić w interakcję z Twoimi treściami.

Według World Wide Web Consortium, znanego również jako W3C, dostępna strona internetowa działa dla osób z niepełnosprawnością słuchową, poznawczą, neurologiczną, fizyczną, mową i wzrokiem.

Nie martw się, jeśli nie wiesz, od czego zacząć. W3C posiada dokumentację, która mówi, co powinna zawierać Twoja witryna, aby spełniała ich standardy.

Ta dokumentacja obejmuje:

• Wytyczne dotyczące dostępności narzędzi autorskich (ATAG)
• Wytyczne dotyczące dostępności treści internetowych (WCAG)
• Wytyczne dotyczące dostępności agenta użytkownika (UAAG)

ATAG skupia się na narzędziach, których ludzie używają do tworzenia treści internetowych, a UAAG patrzy na dostępność narzędzi, które renderują treści internetowe.

W tym filmie skoncentruję się na WCAG , które są wytycznymi dotyczącymi udostępniania zawartości witryny dla wszystkich.

Dzięki WCAG masz trzy różne poziomy zgodności: A, AA i AAA. Przechodząc od A do AA do AAA, stosujesz się do większej liczby standardów określonych przez WCAG i udostępniasz swoją witrynę większej liczbie osób.

Skąd więc wiesz, czy masz dostępną stronę internetową? Zrób audyt!

Jak przeprowadzić audyt dostępności Twojej strony internetowej

Nie musisz sam robić audytu. Jeśli wolisz zlecić audyt na zewnątrz, skontaktuj się z zespołem konsultantów , którzy przeanalizują Twoją witrynę i dokonają niezbędnych zmian.

Teraz, jeśli wolisz zajmować się sprawami we własnym zakresie, masz wiele opcji. Możesz ręcznie przeszukiwać strony swojej witryny w poszukiwaniu problemów, ale prawdopodobnie zajmie to dużo czasu.

Możesz skorzystać z kilku narzędzi, które ci pomogą. Podłącz swój adres URL do narzędzia do sprawdzania ułatwień dostępu, takiego jak WAVE , aby zobaczyć, co musisz zaktualizować na jednej stronie. Możesz także użyć zbiorczego narzędzia do sprawdzania ułatwień dostępu , aby analizować wiele stron jednocześnie.

Witryna W3C zawiera dużą listę narzędzi ułatwień dostępu , więc nie musisz robić wszystkiego sam.

Mamy również listę pięciu ważnych elementów ułatwiających dostęp i kilka przykładów projektów z ułatwieniami dostępu — o których będę mówić dalej — więc trzymaj się mnie.

5 wytycznych dotyczących ułatwień dostępu do projektowania stron internetowych

Pamiętaj tylko, że są to krótkie streszczenia wytycznych WCAG. Zachęcam Cię do skorzystania z szybkiego przewodnika W3C, aby poznać bardziej szczegółowe techniki projektowania z ułatwieniami dostępu.

1. Upewnij się, że tekst jest czytelny

Każdy tekst o normalnym rozmiarze, który zawiera ważne informacje, musi być łatwy do odczytania.

Kontrast odgrywa w tym ważną rolę. W obecnej postaci duży tekst (np. główne nagłówki) wymaga współczynnika kontrastu tekstu do tła 3:1. Zwykły (lub mniejszy) tekst, taki jak tekst, który stanowi treść treści, wymaga współczynnika kontrastu 4,5:1.

Przykład zbyt małego kontrastu wygląda jak jasnozielony tekst na nieco ciemniejszym zielonym tle. Zmień tekst na czarny lub biały, a uzyskasz dużo większy kontrast na swojej stronie.

Użytkownicy powinni również mieć możliwość powiększania tekstu w sposób, który nie wpływa na funkcjonalność witryny ani nie powoduje utraty treści.

2. Zoptymalizuj obrazy do oglądania i czytania

Dodawanie tekstu alternatywnego do obrazów to nie tylko powszechna praktyka SEO. Pomaga ludziom, którzy nie widzą obrazów, zrozumieć, co w nich jest.

Tekst alternatywny to fragment tekstu, który wyraźnie wyjaśnia, co dzieje się na obrazie. Tekst alternatywny pasuje bezpośrednio do kodów osadzania obrazów. Jak widać w tym przykładzie z Mashable, strona zawiera obrazy, a po przejściu na stronę kodu widać tekst alternatywny.

3. Daj swoim widzom dodatkowe możliwości zrozumienia filmów

Jeśli nigdy wcześniej nie dodawałeś napisów do swoich filmów, nadszedł czas, aby zacząć. I nie polegaj tylko na tych, które YouTube lub inny dostawca usług hostingowych generuje automatycznie.

Jeśli masz czas i cierpliwość, spójrz na podpisy wygenerowane automatycznie i wprowadź zmiany. Nie będą idealne, jeśli chodzi o sztuczną inteligencję.

Możesz także zamówić napisy za pomocą narzędzia takiego jak Rev, a następnie dodać je do swojego filmu.

Dołączenie transkrypcji do filmów czyni je bardziej dostępnymi. Jeśli napisałeś scenariusz, masz już przygotowany transkrypcję!

Opisy audio dodają kolejną warstwę dostępności. Są to oddzielne ścieżki dźwiękowe, które opisują, co dzieje się w Twoim filmie między przerwami w dialogu.

Więc jeśli masz dwie osoby opowiadające o swojej ostatniej wyprawie na zakupy, a potem wideo przycina jakiś materiał, na którym osoba przymierza ubrania, audiodeskrypcja wyjaśnia, co dzieje się w filmie. Może to wyglądać mniej więcej tak: kobieta stoi przed lustrem i zarzuca dwa szaliki na ramię.

Platforma hostingowa, taka jak Wistia, umożliwia przesyłanie opisów dźwiękowych (a nawet udostępnia listę kontrolną ułatwień dostępu wideo podczas przesyłania filmów).

4. Zaprojektuj swoją stronę tak, aby była przyjazna dla myszy i klawiatury

Nie każdy używa myszy do poruszania się po Internecie. Twoja witryna powinna to odzwierciedlać.

Oznacza to nie tylko, że musisz upewnić się, że ktoś może wchodzić w interakcję z Twoją witryną za pomocą klawiatury, ale także musisz mieć zauważalne sposoby na podkreślenie, która część Twojej witryny jest w centrum uwagi.

Patrząc na inny z dostępnych przykładów projektowania, można zauważyć, że kiedy klikam pasek wyszukiwania w witrynie Keds, pojawia się klasyczna migająca linia informująca, że ​​mogę pisać. Pasek wyszukiwania staje się również bardziej widoczny po kliknięciu.

Aby spełnić wytyczne WCAG, ta funkcja powinna działać, gdy używana jest klawiatura.

5. Spraw, aby nawigacja w witrynie była łatwa do zrozumienia

Ta wskazówka wykracza poza dostępność. Ogólnie rzecz biorąc, dobrą rzeczą jest, aby nawigacja w witrynie była prosta i przejrzysta.

Pisz tytuły stron i nagłówki, które mają jasny cel. Użyj tekstu zakotwiczenia linku, który ułatwia zrozumienie, co znajduje się w treści, do której prowadzisz link.

Ponownie użyj wskaźników ostrości, aby ludzie wiedzieli, gdzie się znajdują na stronie. Oferuj więcej niż jeden sposób dostępu do strony internetowej, na przykład poprzez mapę witryny, nawigację główną lub spis treści.

A jak mogę to pominąć? Miej spójną nawigację. Oznacza to, że jeśli masz główny nagłówek nawigacji, tak naprawdę nie powinien się on zmieniać, gdy użytkownik przeskakuje ze strony na stronę.

W tym przykładzie z witryną At Home, chociaż klikam z jednej strony na drugą, nawigacja u góry strony nie zmienia się.

I jak powiedziałem wcześniej, zdecydowanie nie jest to wyczerpująca lista tego, co musisz zrobić, aby przestrzegać wytycznych dotyczących ułatwień dostępu do projektowania stron internetowych. Te wytyczne również mogą ulec zmianie, więc przeprowadź badania, gdy będziesz gotowy ocenić swoją dostępność .

Aby dalej poznawać różne tematy związane z projektowaniem stron internetowych i marketingiem cyfrowym, zasubskrybuj nasz kanał YouTube i nasz biuletyn e-mailowy Revenue Weekly . Nie będziesz rozczarowany.

Dzięki za dołączenie do mnie!

Dołącz do 5000 marketerów, którzy swoją wiedzę marketingową czerpią z filmów WebFX.

Zapisz się teraz