Jak poprawić dostępność na Twojej stronie WordPress

Czy kiedykolwiek wyobrażałeś sobie odwiedzenie strony internetowej i stwierdzenie, że po prostu nie możesz przeczytać tekstu, korzystać z menu ani niczego zrozumieć? Trudno w to uwierzyć, ale dla wielu osób z niepełnosprawnościami jest to codzienność.

Kiedy ludzie tworzą strony internetowe, dostępność jest czymś, co często jest pomijane. Ale tak naprawdę nie powinno być, ponieważ może stworzyć barierę między Twoimi treściami a wieloma odwiedzającymi. Z naszego doświadczenia wynika, że gdy strona internetowa nie jest dostępna, może wydawać się bardzo nieprzyjazna, a nawet wykluczająca.

Upewnienie się, że Twoja witryna jest dostępna, to nie tylko przestrzeganie zasad, ale także zapewnienie wszystkim wspaniałych wrażeń z korzystania z niej. Chodzi o bycie inkluzywnym i zapewnienie wyjątkowego doświadczenia użytkownika dla wszystkich Twoich odwiedzających, niezależnie od ich potrzeb i możliwości.

Więc, jeśli jesteś gotów, aby Twoja strona internetowa była przyjazna dla wszystkich, pokażemy Ci krok po kroku, jak poprawić dostępność Twojej witryny WordPress.

Dlaczego dostępność jest ważna dla mojej witryny WordPress?

W projektowaniu stron internetowych dostępność odnosi się do technik używanych do ułatwienia korzystania ze strony internetowej osobom z niepełnosprawnościami. Niektórzy użytkownicy korzystają z technologii wspomagających nawigację po sieci, takich jak czytniki ekranu dla osób z wadami wzroku i nawigacja za pomocą klawiatury dla osób, które nie mogą używać myszy.

Istnieje kilka powszechnych najlepszych praktyk zalecanych przez ekspertów w celu zwiększenia dostępności stron internetowych. Pomagają one uczynić strony bardziej inkluzywnymi i przyjaznymi dla użytkownika dla każdego, niezależnie od jego możliwości.

Priorytetyzując dostępność, więcej osób będzie mogło nawigować po Twojej stronie WordPress i przeglądać Twoje treści. Jeśli prowadzisz sklep internetowy, zwiększysz również swoje szanse na przekształcenie użytkowników w klientów.

Dostępność jest również ważna dla optymalizacji pod kątem wyszukiwarek (SEO). Google ceni strony internetowe z dobrą użytecznością. Oprócz tego, że Twoja witryna jest bardziej responsywna na urządzenia mobilne, możesz również priorytetowo traktować inkluzywność w projektowaniu stron internetowych, aby poprawić rankingi.

Dodatkowo, jeśli jesteś właścicielem strony biznesowej, a frontend Twojej witryny jest niedostępny, możesz ponieść konsekwencje prawne.

Ustawa o Amerykanach z Niepełnosprawnościami (ADA) stanowi, że konsumenci mogą złożyć skargę, jeśli strona nie jest zgodna z wytycznymi dotyczącymi dostępności. Co więcej, Twoja reputacja może zostać zrujnowana, co może prowadzić do strat finansowych.

Jak WordPress sprawia, że moja strona jest bardziej dostępna?

WordPress ma kilka wbudowanych funkcji, które pomagają użytkownikom uczynić ich strony WordPress dostępne. Na przykład domyślnie można dodawać tekst alternatywny (alt text) i atrybuty tytułu do obrazów, dzięki czemu czytniki ekranu mogą je odczytywać na głos dla użytkowników z wadami wzroku.

WordPress uczynił również obowiązkowym, aby wszystkie nowe i zaktualizowane kody w WordPressie były zgodne z jego standardami kodowania dostępności. Ma to na celu zapewnienie, że programiści WordPressa przestrzegają najlepszych praktyk w zakresie dostępności podczas tworzenia motywów i wtyczek.

Poza tym WordPress zawiera funkcje, które ułatwiają użytkownikom z niepełnosprawnościami tworzenie własnych stron internetowych, takie jak tryb dostępności do dodawania widżetów.

Aby uzyskać więcej informacji, zalecamy śledzenie tagu Dostępność na stronie Make WordPress Core, aby uzyskać więcej informacji.

Mając to wszystko na uwadze, WordPress sam w sobie nie jest w pełni dostępny. Jako właściciel strony internetowej, ważne jest, aby podjąć dodatkowe kroki, aby Twoja witryna spełniała standardy dostępności.

Podzieliliśmy ten przewodnik na kilka łatwych wskazówek, jak poprawić dostępność Twojej strony WordPress. Możesz użyć tych szybkich linków, aby przejść do konkretnej sekcji:

1. Zapoznaj się z Wytycznymi dotyczącymi dostępności treści internetowych (WCAG)
2. Użyj motywu WordPressa gotowego na dostępność
3. Zainstaluj wtyczkę ułatwień dostępu dla WordPressa
4. Sprawdź kontrast kolorów swojej witryny
5. Dodaj tekst alternatywny i atrybuty tytułu do obrazów
6. Dodaj etykiety do wszystkich pól formularza
7. Używaj odpowiednich tagów nagłówków w swojej treści
8. Używaj opisowego tekstu kotwicy
9. Dodaj podpisy lub transkrypcje do treści wideo i audio
10. Przeprowadź testy użyteczności i dostępności
11. Przewodniki eksperckie dotyczące dostępności WordPressa

1. Zapoznaj się z Wytycznymi dotyczącymi dostępności treści internetowych (WCAG)

Przede wszystkim zalecamy zapoznanie się z Wytycznymi dotyczącymi dostępności treści internetowych (WCAG). Są to standardy opracowane przez W3C Web Accessibility Initiative (WAI) dla użytkowników, aby uczynić ich strony internetowe bardziej dostępnymi.

Na początek możesz zapoznać się z WCAG 2.1 i WCAG 2.2. Jeśli oba dokumenty wydają się zbyt długie do przeczytania, zamiast tego możesz dodać do zakładek ten szybki przewodnik.

2. Użyj motywu WordPress gotowego na dostępność

Motywy gotowe na dostępność spełniły minimalne standardy dostępności ustalone przez zespół ds. przeglądu motywów WordPress.

Używanie dostępnego motywu WordPressa nie oznacza, że Twoja strona automatycznie spełni wszystkie wymagania dotyczące dostępności, ponieważ nadal będziesz musiał wprowadzić pewne poprawki samodzielnie. Może to jednak dać Ci dobry początek w uczynieniu Twojej strony bardziej dostępną.

Motyw gotowy do zapewnienia dostępności będzie miał przynajmniej:

• Menu, które można nawigować wyłącznie za pomocą klawiatury.
• Dobry kontrast kolorów, który sprawia, że treść jest czytelna dla użytkowników z wadami wzroku.
• Semantycznie poprawny HTML, który pomaga technologiom wspomagającym zrozumieć treść i strukturę strony internetowej.

Jeśli chcesz pójść o krok dalej, możesz również sprawdzić, czy motyw zawiera atrybuty ARIA. Te atrybuty są jak dodatkowe informacje, które uzupełniają kod HTML motywu, aby strona internetowa była jeszcze łatwiejsza w nawigacji dla technologii wspomagających.

Najprostszym sposobem na wyszukanie motywu gotowego do obsługi ułatwień dostępu jest przejście do sekcji Wygląd » Motywy na pulpicie WordPress. Następnie kliknij „Dodaj nowy motyw”.

Stąd wybierz „Filtr funkcji” i wybierz „Gotowy do dostępności”.

Dodaj więcej filtrów, aby znaleźć motyw odpowiadający Twoim dokładnym potrzebom.

Teraz przewiń w dół i kliknij „Zastosuj filtry”.

Zobaczysz wtedy na ekranie kilka motywów gotowych do zapewnienia dostępności.

Aby uzyskać więcej rekomendacji motywów, zapoznaj się z naszymi wybranymi przez ekspertów najlepszymi motywami WordPress.

3. Zainstaluj wtyczkę dostępności WordPress

Wtyczka dostępności WordPress dodaje pomocne funkcje dla odwiedzających z niepełnosprawnościami, aby mogli nawigować po Twojej witrynie.

Jednym z polecanych przez nas pluginów dostępności WordPress jest WP Accessibility. Niektóre z rzeczy, które ten plugin może zrobić, to:

• Dodawanie paska narzędzi dostępności
• Wykrywanie, czy Twój motyw jest gotowy do dostępności
• Śledzenie sposobu wykorzystania funkcji dostępności na Twojej stronie internetowej, abyś mógł je ocenić

Najpierw musisz zainstalować i aktywować wtyczkę w WordPress.

Po aktywacji musisz przejść do Ustawienia » WP Accessibility, aby skonfigurować wtyczkę.

Przyjrzyjmy się każdej sekcji strony ustawień.

Dodaj linki do pominięcia

W pierwszej sekcji ustawień wtyczki możesz używać linków pomijania na swojej stronie internetowej, a to ustawienie jest domyślnie włączone. Link pomijania pozwala użytkownikom przejść bezpośrednio do sekcji treści wpisu lub strony.

Jest to niezwykle przydatna funkcja dla osób korzystających z czytników ekranu. Bez linku „przejdź do treści” będą musieli słuchać wszystkiego wyświetlanego na Twojej stronie internetowej, w tym Twoich menu nawigacyjnych, zanim dotrą do części z treścią.

Jeśli Twój motyw już używa linków pomijających, zobaczysz potwierdzające to powiadomienie.

Pasek narzędzi dostępności

Wtyczka WP Accessibility zawiera pasek narzędzi dostępności.

Po włączeniu wtyczka doda na Twojej stronie pasek narzędzi, gdzie użytkownicy mogą zmienić rozmiar czcionek lub wyświetlić Twoją witrynę w trybie wysokiego kontrastu kolorów.

Pozwala to użytkownikom wybrać opcje, których potrzebują, aby strona była łatwiejsza do odczytania.

Aby włączyć pasek narzędzi, zaznacz po prostu pola wyboru „Rozmiar czcionki” i „Kontrast”.

Istnieją również ustawienia, w których można kontrolować rozmiar czcionki i rozmieszczenie paska narzędzi.

Jeśli wprowadzisz zmiany w tych ustawieniach, upewnij się, że klikniesz przycisk „Zaktualizuj ustawienia paska narzędzi”, aby zapisać swoje ustawienia.

Tak wygląda pasek narzędzi na naszej stronie testowej.

Naprawy dostępności

WP Accessibility oferuje również kilka poprawek dostępności, które mogą rozwiązać potencjalne problemy na Twojej stronie. Możesz przejrzeć każdą opcję i sprawdzić, czy jej potrzebujesz.

Niektóre zalecane ustawienia będą zaznaczone domyślnie. Te opcje zapobiegają otwieraniu linków w nowych oknach, wyświetlają błąd po wysłaniu pustego zapytania wyszukiwania i usuwają atrybut HTML tabindex tam, gdzie nie jest potrzebny, aby uprościć nawigację za pomocą klawiatury.

Jeśli korzystasz z motywu przyjaznego dla dostępności, który już włączył niektóre z tych funkcji, zobaczysz komunikat potwierdzający to na górze sekcji.

Nie zapomnij kliknąć przycisku „Zaktualizuj ustawienia dodatkowe”, aby zapisać zmiany.

Funkcje dostępności

Wtyczka zapewnia również kilka opcji, które pomogą uczynić Twoje treści bardziej dostępnymi.

Pierwsza grupa ustawień ułatwia obsługę obrazów osobom korzystającym z czytników ekranu.

Istnieją również opcje wyświetlania podsumowań na górze Twoich postów i stron. Pozwala to osobom korzystającym z czytników ekranu usłyszeć podsumowanie treści przed podjęciem decyzji o wysłuchaniu całego artykułu.

Jeśli zmienisz którąkolwiek z tych opcji, pamiętaj, aby kliknąć przycisk „Zaktualizuj funkcje dostępności”.

Doświadczenie testowe i administracyjne

Następnie znajdziesz kilka ustawień, które pozwolą Ci poprawić dostępność Twojego obszaru administracyjnego WordPress i pomogą w testowaniu.

Ta sekcja jest bardziej techniczna, więc przed zaznaczeniem pól upewnij się, że zapoznałeś się z dokumentacją wtyczki.

Upewnij się, że kliknąłeś przycisk „Zaktualizuj narzędzia dostępności”, aby zapisać zmiany.

Usuń atrybuty tytułu

Ta sekcja pozwala na usunięcie atrybutu tytułu z chmur tagów.

Atrybut tytułu jest uważany za bezużyteczny przez niektórych ekspertów ds. dostępności. Większość czytników ekranu zazwyczaj ignoruje atrybut tytułu i zamiast tego odczytuje tekst kotwicy.

To ustawienie jest domyślnie włączone, ale jeśli je zmienisz, upewnij się, że klikniesz przycisk „Zaktualizuj ustawienia atrybutów tytułu”.

4. Sprawdź kontrast kolorów swojej witryny

Kontrast kolorów oznacza różnicę między kolorem tekstu a kolorem tła. Jest to bardzo ważna część dostępności stron internetowych, ponieważ może wpływać na czytelność treści Twojej strony dla osób ze słabym wzrokiem i daltonistów.

Aby spełnić standardy dostępności internetowej, zwykły tekst powinien mieć wysoki kontrast co najmniej 4,5:1. Oznacza to, że tekst musi być 4,5 razy jaśniejszy od tła.

W przypadku większego tekstu wymaganie jest nieco mniejsze, wynosi 3 do 1. Oznacza to, że dopuszczalny jest nieco niższy kontrast. Ta sama zasada dotyczy grafik i elementów interfejsu użytkownika, takich jak obramowania pól formularzy.

Wtyczka WP Accessibility ma wbudowany sprawdzacz kontrastu kolorów, z którego możesz korzystać.

W ustawieniach wtyczki po prostu przewiń w dół do sekcji testera kontrastu kolorów i wybierz kolor pierwszego planu (kolor, którego użyjesz do swojego tekstu) oraz jego kolor tła.

Następnie kliknij „Sprawdź kontrast kolorów”.

Wtyczka poinformuje Cię następnie, czy kolory spełniają, czy nie spełniają testu kontrastu.

Oto jak wygląda wynik:

Alternatywnie, możesz skorzystać z darmowego narzędzia WebAIM Contrast Checker. Podobnie jak w przypadku poprzedniego narzędzia, wystarczy wybrać kolor pierwszego planu i kolor tła.

To narzędzie nie tylko testuje kontrast kolorów, ale także pokazuje, jak kolory mogą wyglądać jako normalny i duży tekst, a także obiekty graficzne i elementy interfejsu użytkownika.

Aby uzyskać więcej szczegółów, możesz zapoznać się z naszym przewodnikiem na temat wyboru idealnej palety kolorów dla Twojej strony WordPress.

5. Dodaj tekst alternatywny do obrazów

Oprócz przydatności dla wyszukiwarek, tekst alternatywny (alt text) jest pomocny dla czytników ekranu w opisywaniu obrazów osobom z wadami wzroku.

Wcześniej wspominaliśmy, że WordPress ma wbudowaną funkcję dodawania tekstu alternatywnego. Proces jest dość prosty i możesz przeczytać o jego konfiguracji w poniższych poradnikach:

• Przewodnik dla początkujących po SEO obrazów – optymalizacja obrazów dla wyszukiwarek
• Tekst alternatywny obrazu a tytuł obrazu w WordPress – jaka jest różnica?

6. Dodaj etykiety do wszystkich pól formularza

Jeśli masz formularze na swojej stronie internetowej, upewnij się, że używasz odpowiednich etykiet dla każdego elementu formularza. Obejmuje to pola formularza, przyciski, menu i tak dalej.

WCAG zaleca dodawanie etykiet do wszystkich elementów formularza, aby ułatwić narzędziom wspomagającym identyfikację i przekazywanie informacji o każdym z nich użytkownikom.

Ponadto, dodawanie jasnych i opisowych etykiet jest dobrą praktyką projektowania stron internetowych. Pomagając użytkownikom zrozumieć, do czego służy każde pole formularza, zmniejsza się prawdopodobieństwo wystąpienia błędów użytkownika i więcej osób będzie w stanie przesłać swoje formularze.

Jeśli nie masz pewności, jak tworzyć świetne formularze, polecamy zapoznać się z WPForms. Jest to najlepszy kreator formularzy WordPress, który ułatwia dostosowanie formularzy do Twoich dokładnych potrzeb, w tym ich ulepszenie pod kątem dostępności.

Więcej o WPForms możesz przeczytać w naszej recenzji WPForms. Sprawdź również te poradniki, jak tworzyć formularze w WordPress:

• Jak utworzyć formularz kontaktowy w WordPress (krok po kroku)
• Jak utworzyć formularz rezerwacji w WordPress
• Jak utworzyć niestandardowy formularz rejestracji użytkownika w WordPress

7. Używaj odpowiednich tagów nagłówków w swojej treści

Tagi nagłówków to tagi HTML, które mogą oznaczać tytuły lub podtytuły strony internetowej. W ten sposób Twoje treści są znacznie bardziej uporządkowane i łatwiejsze do śledzenia.

Te tagi pomagają również narzędziom takim jak czytniki ekranu w generowaniu nawigowalnego spisu treści dla użytkowników z wadami wzroku. Pozwoli im to przeskakiwać między sekcjami i zrozumieć ogólną strukturę Twoich treści.

Jeśli nie wiesz, jak wykorzystać tagi nagłówków, możesz przeczytać nasz przewodnik o tym, jak prawidłowo używać tagów nagłówków w WordPress.

8. Użyj opisowego tekstu kotwicy

Tekst kotwicy lub linku to zasadniczo klikalne słowa lub frazy w linku. Zazwyczaj można rozpoznać, który tekst jest linkiem, ponieważ będzie miał inny kolor.

Często blogerzy używają tekstu linku „kliknij tutaj” lub „czytaj więcej”, aby skierować odwiedzających na stronę.

Nie jest to dobra praktyka pod względem dostępności, ponieważ nie dostarcza żadnych informacji o tym, dokąd prowadzi link. Utrudnia to osobom korzystającym z technologii wspomagających zrozumienie celu linku.

Dlatego najlepiej jest używać opisowego tekstu kotwicy. Oznacza to używanie słów, które opisują, czego dotyczy treść po kliknięciu linku.

Na przykład, powiedzmy, że chcesz dodać link do artykułu o najlepszym hostingu WordPress w tym zdaniu: „Postępuj zgodnie z tym przewodnikiem, aby dowiedzieć się o najlepszych usługach hostingu WordPress na rynku.”

Zamiast dodawać link do „Postępuj zgodnie z tym przewodnikiem” lub gdziekolwiek indziej w tym zdaniu, powinieneś wstawić go do „najlepszych usług hostingowych WordPress”. W ten sposób użytkownik otrzyma przegląd tego, co znajdzie w połączonej treści.

Więcej informacji na temat linków i tekstu kotwicy znajdziesz w naszym poradniku dla początkujących, jak dodawać linki w WordPressie.

9. Dodaj napisy lub transkrypcje do treści wideo i audio

Jednym z głównych problemów użytkowników z niepełnosprawnością słuchu jest niemożność zrozumienia treści mówionych w filmach i audio. Dlatego wielu twórców treści wideo i podcasterów dodaje napisy lub transkrypcje.

W WPBeginner zdecydowanie odradzamy przesyłanie filmów na własną stronę internetową, ponieważ mogą one spowolnić Twoją witrynę. Zamiast tego najlepiej korzystać z usług takich jak YouTube lub Vimeo, z których oba mają wbudowane narzędzia do dodawania napisów.

Jeśli chodzi o treści audio, możesz rozważyć skorzystanie z usługi transkrypcji, aby łatwo przekonwertować mowę na tekst. W ten sposób nie będziesz musiał ręcznie tworzyć pisemnej wersji swoich treści audio.

Zapoznaj się z naszą listą najlepszych usług transkrypcji, aby uzyskać więcej informacji.

10. Testuj użyteczność i dostępność

Jeśli zaimplementowałeś wszystkie wskazówki z tego przewodnika, ostatnim krokiem jest przetestowanie użyteczności i dostępności Twojej strony WordPress.

To testowanie może pomóc Ci zidentyfikować wszelkie pozostałe problemy i sprawić, że Twoja strona internetowa będzie przyjazna dla użytkownika i dostępna dla wszystkich.

WebAIM posiada Narzędzie do oceny dostępności stron internetowych (WAVE), z którego możesz korzystać bezpłatnie.

Po prostu wpisz nazwę domeny swojej witryny, a narzędzie zidentyfikuje wszelkie problemy związane z dostępnością.

Możesz również skorzystać ze skanera dostępności. Zalecamy zapoznanie się z Accessibility Checker by Equalize Digital. Dostępna jest również bezpłatna wersja wtyczki do skanowania nieograniczonej liczby wpisów i stron w Twojej witrynie.

Po zainstalowaniu wtyczki możesz po prostu przejść do edytora bloków swojej strony lub wpisu. Jeśli przewiniesz w dół do sekcji pól meta, znajdziesz narzędzie Accessibility Checker, które identyfikuje problemy z dostępnością.

Inną opcją jest przeprowadzenie audytu UX, co zasadniczo oznacza sprawdzenie Twojej witryny pod kątem dobrego doświadczenia użytkownika. Po prostu przejdź do naszego poradnika dotyczącego audytu UX, aby uzyskać więcej informacji.

Na koniec, ale nie mniej ważne, zachęcamy do zbierania opinii użytkowników. Chociaż testowanie może przynieść wyniki, uzyskanie opinii od rzeczywistych odwiedzających, którzy korzystają z funkcji dostępności Twojej strony, może dostarczyć znacznie dokładniejszych spostrzeżeń.

UserFeedback to najlepszy plugin do tego zadania. Pozwala tworzyć ankiety, aby zbierać opinie i przemyślenia użytkowników. Dostępne są również szablony do zbierania opinii na temat projektowania stron internetowych, dzięki czemu nie musisz tworzyć ankiety od zera.

Więcej informacji znajdziesz w naszym przewodniku jak uzyskać opinię na temat projektu strony internetowej w WordPress.

Przewodniki eksperckie dotyczące dostępności WordPressa

Teraz, gdy wiesz, jak poprawić dostępność swojej witryny, możesz zapoznać się z innymi poradnikami dotyczącymi problemów z dostępnością WordPress:

• Jak dodać widżety WordPress w trybie dostępności
• Jak wybrać idealną paletę kolorów dla swojej witryny WordPress
• Jak dodać zmieniacz rozmiaru czcionki w WordPress dla dostępności
• Jak łatwo dodać atrybut tytułu do obrazów w WordPressie
• Jak wyróżnić tekst w WordPress (Przewodnik dla początkujących)
• Tekst alternatywny obrazu a tytuł obrazu w WordPress – jaka jest różnica?

Jeśli podobał Ci się ten artykuł, zasubskrybuj nasz kanał YouTube po samouczki wideo WordPress. Możesz nas również znaleźć na Twitterze i Facebooku.