Jak poprawić dostępność Twojej witryny WordPress

Czy chcesz poprawić dostępność na twojej witrynie WordPress?

Podczas tworzenia witryny internetowej dostępność często jest zaniedbywana, co może powodować słabe wrażenia użytkownika (UX). Idealnie byłoby, gdyby twoja witryna WordPress była przyjazna dla użytkownika i dostępna dla wszystkich osób, niezależnie od ich potrzeb.

W tym artykule pokażemy ci, jak poprawić dostępność twojej witryny internetowej WordPress.

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

W projektowaniu stron internetowych dostępność odnosi się do technik stosowanych w celu ułatwienia korzystania z witryny internetowej osobom niepełnosprawnym. Niektórzy odwiedzający używają technologii wspomagających do poruszania się 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.

Istnieją pewne wspólne najlepsze praktyki, które są zalecane przez ekspertów w celu zwiększenia dostępności witryn internetowych. Pomagają one uczynić witryny bardziej integracyjnymi i przyjaznymi dla wszystkich, niezależnie od umiejętności.

Dzięki nadaniu priorytetu dostępności, więcej osób będzie mogło poruszać się po twojej witrynie internetowej WordPress i przeglądać jej 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 witryny internetowe, które są przyjazne dla użytkownika. Oprócz uczynienia twojej witryny internetowej bardziej responsywną dla urządzeń mobilnych, możesz również nadać priorytet integracji w projektowaniu stron internetowych, aby poprawić rankingi.

Ponadto, jeśli jesteś właścicielem witryny internetowej firmy, a frontowa część twojej witryny jest niedostępna, możesz ponieść konsekwencje prawne.

Ustawa Americans with Disabilities Act (ADA) stanowi, że konsumenci mogą złożyć skargę, jeśli witryna nie jest zgodna z wytycznymi dotyczącymi dostępności. Co więcej, twoja reputacja może zostać zrujnowana, co może skutkować stratami finansowymi.

Jak WordPress zwiększa dostępność mojej witryny internetowej?

WordPress ma kilka wbudowanych funkcji, które pomagają użytkownikom uczynić ich witryny internetowe WordPress dostępnymi. Na przykład, domyślnie można dodać tekst alternatywny (alt text) i atrybuty tytułu do obrazków, aby czytniki ekranu mogły je odczytywać na głos dla użytkowników z wadami wzroku.

WordPress wprowadził również obowiązek, aby cały nowy i zaktualizowany kod w WordPressie był zgodny z jego standardami kodowania dostępności. Ma to na celu zapewnienie, że programiści WordPress 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 niepełnosprawnym tworzenie własnych witryn 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.

Mając to wszystko na uwadze, WordPress nie jest w pełni dostępny po wyjęciu z pudełka. Jako właściciel witryny internetowej ważne jest, aby podjąć dodatkowe kroki, aby Twoja witryna spełniała standardy dostępności.

Podzieliliśmy ten przewodnik na kilka prostych wskazówek, aby poprawić dostępność twojej witryny internetowej WordPress. Możesz użyć tych szybkich odnośników, aby przejść do określonej sekcji:

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

Po pierwsze, zalecamy zapoznanie się z Wytycznymi dotyczącymi dostępności treści internetowych (WCAG). Są to standardy określone przez W3C Web Accessibility Initiative (WAI) dla użytkowników w celu zwiększenia dostępności witryn internetowych.

Na początek możesz sprawdzić aktualizacje WCAG 2.1 i WCAG 2. 2. Jeśli oba dokumenty wydają się zbyt długie do przeczytania, możesz zamiast tego dodać do zakładek to krótkie odniesienie.

2. Użyj motywu WordPress dostosowanego do dostępności

Motywy przystosowane do dostępności spełniają minimalne standardy dostępności określone przez zespół ds. recenzji motywów WordPress.

Korzystanie z dostępnego motywu WordPress nie oznacza, że twoja witryna internetowa będzie automatycznie zgodna ze wszystkimi wymogami dostępności, ponieważ nadal musisz samodzielnie wprowadzić pewne modyfikacje. Może to jednak dać ci szybki start do uczynienia twojej witryny internetowej bardziej dostępną.

Co najmniej, motyw gotowy na dostępność będzie miał:

• Menu, po których można poruszać się 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. Atrybuty te są jak dodatkowe informacje, które uzupełniają HTML twojego motywu, aby witryna internetowa była jeszcze łatwiejsza w nawigacji dla technologii wspomagających.

Najprostszym sposobem na znalezienie motywu dostosowanego do dostępności jest przejście do sekcji Wygląd ” Motywy na twoim kokpicie WordPress. Następnie kliknij „Utwórz nowy motyw”.

Z tego miejsca wybierz „Filtr funkcji” i wybierz „Dostępność gotowa”.

Możesz dodać więcej filtrów, aby znaleźć motyw, który dokładnie odpowiada twoim potrzebom.

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

Na ekranie pojawią się motywy przystosowane do dostępności.

Aby uzyskać więcej rekomendacji motywów, zapoznaj się z naszymi eksperckimi wyborami najlepszych motywów WordPress.

3. Zainstaluj wtyczkę WordPress Accessibility Plugin

Wtyczka ułatwień dostępu WordPress dodaje funkcje pomocne dla osób niepełnosprawnych w poruszaniu się po twojej witrynie internetowej.

Jedną z polecanych przez nas wtyczek dostępności WordPress jest WP Accessibility. Niektóre z rzeczy, które ta wtyczka może zrobić, obejmują:

• Dodawanie paska narzędzi dostępności
• Wykrywanie, czy twój motyw jest przystosowany do dostępności
• Śledzenie, w jaki sposób funkcje dostępności w twojej witrynie internetowej są wykorzystywane, abyś mógł je ocenić.

Najpierw należy zainstalować i włączyć wtyczkę na WordPressie.

Po włączaniu należy przejść do Ustawienia ” Dostępność WP, aby skonfigurować wtyczkę.

Przyjrzyjmy się poszczególnym sekcjom strony ustawień.

Dodaj odnośniki

W pierwszej sekcji ustawień wtyczki możesz używać odnośników pomijających na twojej witrynie internetowej, a ustawienie to jest domyślnie włączone. Odnośnik pomijający pozwala użytkownikom przejść bezpośrednio do treści wpisu lub strony.

Jest to niezwykle przydatna funkcja dla osób korzystających z czytników ekranu. Bez odnośnika pomijającego będą one musiały wysłuchać wszystkiego, co wyświetla się na twojej witrynie internetowej, w tym menu nawigacyjnego, zanim dotrą do części zawierającej treść.

Jeśli twój motyw korzysta już z odnośników pomijających, zobaczysz powiadomienie potwierdzające ten fakt.

Pasek narzędzi dostępności

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

Po włączeniu wtyczka doda pasek narzędzi na twojej witrynie internetowej, w którym użytkownicy będą mogli zmienić rozmiar czcionek lub zobaczyć twoją witrynę w trybie kolorów o wysokim kontraście.

Dzięki temu twój użytkownik może wybrać opcje, które ułatwią mu czytanie strony.

Aby włączyć pasek narzędzi, wystarczy zaznaczyć pola wyboru „Wielkość pisma” i „Kontrast”.

Istnieją również ustawienia, w których można kontrolować wielkość i położenie czcionki paska narzędzi.

Jeśli dokonasz zmian w tych ustawieniach, kliknij przycisk „Aktualizuj ustawienia paska narzędzi”, aby zapisać twoje ustawienia.

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

Poprawki dostępności

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

Niektóre zalecane ustawienia będą domyślnie zaznaczone. Opcje te zapobiegają otwieraniu odnośników w nowych oknach, wyświetlają błąd po przesłaniu pustego zgłoszenia wyszukiwania i usuwają atrybut HTML tabindex tam, gdzie nie jest on potrzebny, aby uprościć nawigację za pomocą klawiatury.

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

Nie zapomnij kliknąć przycisku „Aktualizuj różne ustawienia”, aby zapisać twoje zmiany.

Funkcje dostępności

Wtyczka oferuje również kilka opcji, które pomogą uczynić twoją treść bardziej dostępną.

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

Dostępne są również opcje wyświetlania podsumowań u góry twoich wpisów i stron. Pozwala to osobom korzystającym z czytników ekranów na zapoznanie się z podsumowaniem treści przed podjęciem decyzji o wysłuchaniu całego artykułu.

Jeśli zmienisz którąkolwiek z tych opcji, pamiętaj o kliknięciu przycisku „Aktualizuj funkcje dostępności”.

Doświadczenie w testowaniu i administrowaniu

Następnie znajdziesz kilka ustawień, które pozwalają poprawić dostępność twojego obszaru administracyjnego WordPress i pomóc w testowaniu.

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

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

Usuwanie atrybutów tytułu

Ta sekcja pozwala usuwać atrybut title z chmur tagów.

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

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

4. Sprawdź kontrast kolorów twojej witryny internetowej

Kontrast kolorów oznacza różnicę między kolorem tekstu a kolorem tła. Jest to bardzo ważna część dostępności witryny internetowej, ponieważ może mieć wpływ na to, jak czytelna jest twoja treść dla osób ze słabym wzrokiem i ślepotą barw.

Aby spełnić standardy dostępności stron internetowych, zwykły tekst powinien mieć wysoki kontrast wynoszący co najmniej 4,5 do 1. Oznacza to, że tekst musi być 4,5 razy jaśniejszy niż tło.

W przypadku większego tekstu wymóg ten jest nieco mniejszy i wynosi 3 do 1. Oznacza to, że dopuszczalny jest nieco niższy kontrast. Ta sama zasada dotyczy grafiki i elementów interfejsu użytkownika, takich jak obramowania formularzy.

Wtyczka WP Accessibility ma wbudowany mechanizm sprawdzania kontrastu kolorów, z którego można skorzystać.

W ustawieniach wtyczki wystarczy przewinąć w dół do sekcji Color Contrast Tester i wybrać kolor pierwszego planu (kolor, którego użyjesz dla twojego tekstu) i jego kolor tła.

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

Wtyczka poinformuje następnie, czy kolory przeszły lub nie przeszły testu kontrastu.

Oto jak wygląda wynik:

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

Narzędzie to nie tylko testuje twój kontrast kolorów, ale także pokazuje, jak kolory mogą wyglądać w postaci normalnego i dużego tekstu, a także obiektów graficznych i elementów interfejsu użytkownika.

Aby uzyskać więcej informacji, możesz zapoznać się z naszym przewodnikiem na temat tego, jak wybrać idealny schemat kolorów dla twojej witryny internetowej WordPress.

5. Dodawanie alternatywnego tekstu do obrazków

Oprócz tego, że jest przydatny dla wyszukiwarek, tekst alternatywny jest pomocny dla czytników ekranów do opisywania obrazków osobom z wadami wzroku.

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

• Przewodnik dla początkujących po SEO obrazków – optymalizacja obrazków pod kątem wyszukiwarek internetowych
• Tekst alternatywny obrazka a tytuł obrazka w WordPress – jaka jest różnica?

6. Dodaj etykiety do wszystkich pól formularza

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

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

Co więcej, 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, prawdopodobieństwo wystąpienia błędów użytkownika jest mniejsze, a więcej osób będzie w stanie przesłać swoje formularze.

Jeśli nie jesteś pewien, jak tworzyć świetne formularze, zalecamy sprawdzenie WPForms. Jest to najlepszy kreator formularzy WordPress, który sprawia, że dostosowanie formularzy do twoich potrzeb jest niezwykle łatwe, w tym ulepszanie ich pod kątem dostępności.

Dowiedz się więcej o WPForms w naszej recenzji WPForms. Sprawdź również te przewodniki na temat tworzenia formularzy w WordPress:

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

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

Tagi nagłówków to tagi HTML, które mogą oznaczać tytuły lub podtytuły strony internetowej. W ten sposób twoja treść jest znacznie bardziej uporządkowana i łatwiejsza do śledzenia.

Tagi te pomagają również narzędziom takim jak czytniki ekranów generować łatwy w nawigacji zarys dla użytkowników z wadami wzroku. Pozwoli im to przeskakiwać między sekcjami i zrozumieć ogólną strukturę twojej treści.

Jeśli nie jesteś pewien, jak korzystać z tagów nagłówków, możesz przeczytać nasz przewodnik na temat prawidłowego używania tagów nagłówków w WordPressie.

8. Używaj opisowego tekstu kotwicy.

Tekst kotwicy lub odnośnika to w zasadzie klikalne słowa lub frazy w odnośniku. Zazwyczaj można stwierdzić, który tekst jest odnośnikiem, ponieważ będzie on miał inny kolor.

Często blogerzy używają tekstu odnośnika „kliknij tutaj” lub „Dowiedz się więcej”, aby skierować odwiedzających na stronę.

Nie jest to dobra praktyka z punktu widzenia dostępności, ponieważ nie daje żadnych informacji o tym, dokąd prowadzi odnośnik. Utrudnia to osobom korzystającym z technologii wspomagających zrozumienie celu odnośnika.

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

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

Zamiast dodawać odnośnik do „Śledź ten przewodnik” lub gdziekolwiek indziej w tym zdaniu, należy wstawić go do „najlepszych usług hostingowych WordPress„. W ten sposób użytkownik otrzyma przegląd tego, co znajdzie w treści, do której prowadzi odnośnik

Więcej informacji na temat odnośników i tekstu kotwicy można znaleźć w naszym przewodniku dla początkujących na temat linkowania w WordPress.

9. Dodawanie podpisów lub transkrypcji 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 filmowych i podcastów dodaje podpisy lub transkrypcje.

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

Jeśli chodzi o treści audio, warto 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 twojej treści audio.

Sprawdź naszą listę najlepszych usług transkrypcji, aby uzyskać więcej informacji.

10. Testowanie użyteczności i dostępności

Jeśli wdrożyłeś wszystkie wskazówki z tego przewodnika, ostatnim krokiem jest przeprowadzenie testów użyteczności i dostępności na twojej witrynie internetowej WordPress.

Testy te mogą pomóc zidentyfikować wszelkie pozostałe problemy i pomóc uczynić twoją witrynę internetową przyjazną dla użytkownika i dostępną dla wszystkich.

WebAIM posiada narzędzie do oceny dostępności sieci (WAVE), z którego można korzystać bezpłatnie.

Wystarczy wpisać nazwę domeny twojej witryny internetowej, a narzędzie zidentyfikuje wszelkie problemy związane z dostępnością.

Możesz także użyć skanera dostępności. Zalecamy sprawdzenie Accessibility Checker firmy Equalize Digital. Posiada on również darmową wersję wtyczki do skanowania nieograniczonej liczby wpisów i stron w twojej witrynie internetowej.

Po zainstalowaniu wtyczki wystarczy przejść do edytora bloków twojej strony lub wpisu. Jeśli przewiniesz w dół do sekcji meta box, znajdziesz narzędzie Accessibility Checker, które zidentyfikuje twoje problemy z dostępnością.

Inną opcją jest przeprowadzenie audytu UX, który zasadniczo oznacza sprawdzenie, czy twoja witryna internetowa ma dobre wrażenia użytkownika. Aby uzyskać więcej informacji, przejdź do naszego przewodnika po audycie UX.

Na koniec zachęcamy do poproszenia o uwagi twoich użytkowników. Podczas gdy testowanie może przynieść wyniki, uzyskanie uwagi od rzeczywistych odwiedzających, którzy korzystają z funkcji dostępności twojej witryny, może zapewnić znacznie dokładniejsze spostrzeżenia.

UserFeedback to najlepsza wtyczka do tego zadania. Umożliwia ona tworzenie ankiet w celu zbierania opinii i przemyśleń twoich użytkowników. Dostępne są również szablony uwag dotyczących projektu witryny internetowej, dzięki czemu nie będziesz musiał tworzyć ankiety od podstaw.

Aby uzyskać więcej informacji, zapoznaj się z naszym przewodnikiem na temat uzyskiwania uwag dotyczących projektowania witryn internetowych w WordPress.

Przewodniki ekspertów dotyczące dostępności WordPressa

Teraz, gdy już wiesz, jak poprawić dostępność na twojej witrynie, być może spodoba ci się kilka innych przewodników związanych z problemami dostępności WordPress:

• Jak dodać widżety WordPress w trybie dostępności?
• Jak wybrać idealny schemat kolorów dla twojej witryny WordPress?
• Jak dodać zmianę rozmiaru czcionki w WordPress dla ułatwienia dostępu?
• Jak łatwo dodać atrybut tytułu do obrazków w WordPressie
• Jak wyróżnić tekst w WordPress (przewodnik dla początkujących)
• Tekst alternatywny obrazka a tytuł obrazka w WordPress – jaka jest różnica?

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.