W Qode wnosimy piękno do WordPressa. To dosłownie nasze motto. Ale to nie znaczy, że przedkładamy styl nad treść. Ważną kwestią jest projektowanie pod kątem dostępności. Niezależnie od tego, czy Twoje treści są skierowane konkretnie do osób niepełnosprawnych, czy nie, zastanowienie się nad innymi niepełnosprawnymi gośćmi, którzy mimo wszystko mogą docenić to, co masz do zaoferowania, nigdy nie będzie złe. W tym artykule omówimy kilka rzeczy, które możesz zrobić, aby zwiększyć dostępność swojej witryny WordPress. Ale zanim przejdziemy do mosiężnych pinezek, powiedzmy kilka słów o projektowaniu ułatwień dostępu w WordPressie.
Ogólnie rzecz biorąc, dostępność sieci oznacza, że projektanci stron internetowych podejmują kroki w celu zapewnienia, że: ludzie niepełnosprawniczy to poznawcze, wzrokowe, słuchowe, neurologiczne czy inne, może korzystać ze strony.
W szczególności projektowanie pod kątem dostępności oznacza uwzględnienie tych odwiedzających, którzy są niepełnosprawni, co może uniemożliwić im korzystanie ze wszystkich funkcji Twojej witryny, a nawet uniemożliwić im dostęp do Twoich treści, w najbardziej ekstremalnych przypadkach. Istotą tego jest to, że przystępny projekt oznacza bycie nastawionym na UX dla osób o różnych umiejętnościach.
Najlepsze praktyki w projektowaniu obejmują teraz kilka technik, które pozwalają poprawić dostępność i uczynić witrynę WordPress łatwiejszą w użyciu dla osób, które nie mogą z niej korzystać samodzielnie. Nie oznacza to, że projektowanie pod kątem dostępności przyniesie korzyści tylko niepełnosprawnym odwiedzającym. Może również zasiłek dla osób z czasową niepełnosprawnością, na przykład osoby, które mogły złamać rękę lub chwilowo utracić wzrok z powodu operacji oka, osoby korzystające z bardzo wolnego połączenia lub osoby, które po prostu wolą tekst w formie dźwiękowej.
To wszystko oznacza, że przystępny projekt nie jest przeznaczony dla mniejszości niepełnosprawnych, ale zamiast tego zapewnia lepsze ogólne wrażenia użytkownika – i potencjalny wzrost widowni.
Możesz przetestować swoje strony internetowe pod kątem dostępności za pomocą jednego z kilka internetowych narzędzi oceny dostępności, Jak na przykład FAE, Szachownica lub FALA. Spośród nich uznaliśmy, że WAVE jest najszybszy i najbardziej przyjazny dla użytkownika. Po prostu wklej adres strony internetowej w polu adresu i kliknij ikonę strzałki, aby uzyskać raport.
Opublikowaliśmy raport na temat artykułu z międzynarodowego wydania The Guardian i możemy łatwo zobaczyć, które obszary wymagają poprawy, ponieważ są one oznaczone ikonami. Aby dokładnie przyjrzeć się problemowi, po prostu kliknij ikonę i przeczytaj podpowiedź. W ten sposób dowiesz się, jak rozwiązać każdy problem.
Twórcy WAVE zapewnili również rozszerzenia dla Chrome i Firefox, którego można użyć do zwrócenia raportu dostępności bez wysyłania jakichkolwiek danych na serwery WAVE, dzięki czemu jest on tak bezpieczny, jak to tylko możliwe.
Twórcy WordPressa ustanowili standardy dostępności dla wszystkich nowych kodów i najlepsze praktyki podręcznik dla programistów z przykładami kodu. Ale nie musisz wiedzieć, jak kodować, aby Twoja witryna była bardziej dostępna.
Nagłówki
Na przykład, dobra struktura nagłówków jest bardzo ważna osobom korzystającym z oprogramowania, takiego jak czytniki ekranu. Powiększenie i pogrubienie tekstu nie sprawi, że czytnik ekranu zrozumie, że tekst jest nagłówkiem. Użyć Nagłówek blok w Gutenberg, element nagłówka w Elementorze lub tagi nagłówka, takie jak
w edytorze klasycznym. Nagłówek 1 jest głównym nagłówkiem strony i nie powinien być używany do niczego innego.
Wewnętrzną strukturę tekstu należy podzielić za pomocą nagłówków od 2 do 6, bez pomijania poziomów. Należy również unikać dodawania jakichkolwiek dodatkowych funkcji do nagłówków, takich jak linki. I odwrotnie, nie powinieneś używać nagłówków wyłącznie w celach estetycznych. Po to są rozmiar i styl czcionki. Dobra struktura nagłówków nie tylko pomoże użytkownikom czytników ekranu – będzie to również oznaczać lepszy wynik SEO.
Spinki do mankietów
Tworząc linki, powinieneś upewnij się, że z kontekstu jasno wynika, co jest, a co nie jest linkiem. Jeśli link jest otoczony innym tekstem, zgodnie z najlepszymi praktykami powinien być podkreślony i w innym kolorze.
Dodawanie atrybutów Alt do obrazów
Dodanie atrybutów alt do obrazów sprawia, że są one „czytelne” dla oprogramowania czytnika ekranui jest to bardzo łatwe. Wszystko, co musisz zrobić, to uzyskać dostęp do dowolnego obrazu w bibliotece multimediów.
W menu po prawej stronie znajdziesz pole tekstowe Alt. Wystarczy umieścić sensowny opis obrazu, który w naszym przypadku jest fotografią pejzażową przeznaczoną do celów czysto dekoracyjnych i wymaga jedynie prostego opisu.
Osoba korzystająca z czytnika stron internetowych będzie miała teraz tekstowy opis zdjęcia. Ta funkcja plików multimedialnych jest czymś, czego nie należy przeoczyć – może wpłynąć na Twój wynik SEO. Jeśli chcesz dowiedzieć się więcej, mamy cały dogłębny przewodnik po tytułach tekstu alternatywnego i obrazów.
Niektóre palety kolorów mogą powodować problemy dla użytkowników cierpiących na słaby wzrok, ślepotę barw i podobne schorzenia. Ogólnie rzecz biorąc, im większy kontrast, tym lepiej, chociaż zbyt duży kontrast może powodować problemy dla osób o wrażliwych oczach. Dotyczy to nie tylko tekstu i tła, ale także elementów (takich jak przyciski, ikony, menu i inne) oraz efektów najechania. Więcej informacji na temat zmiany kolorów tekstu w WordPressie znajdziesz w naszym szczegółowym przewodniku.
Zalecany współczynnik kontrastu jasności tła i pierwszego planu wynosi 4,5:1 dla normalnego tekstu lub 3:1 dla dużego tekstu. Istnieje wiele narzędzi, których można użyć do sprawdzenia współczynników kontrastu, takich jak Kontroler kontrastu WebAIM. FALA, będąc wszechstronnym narzędziem, podkreśli również problemy z kontrastem w projekcie Twojej witryny.
Formularze są ważną częścią interakcji w sieci. Jest kilka rzeczy, które możesz zrobić, aby były bardziej dostępne.
Po pierwsze, dobre oznakowanie jest ważne. Oznacz wszystkie pola poprawnie i wyraźnie. Po drugie, użyj tekstu zastępczego – przykłady tekstu, który Twoi odwiedzający muszą wprowadzić do formularzy. Na przykład, jeśli oczekujesz adresu URL, użyj czegoś takiego: www.twojastrona.pl dla symbolu zastępczego. Wreszcie, komplet instrukcji jak wypełnić formularz może być wielką pomocą dla osób niedowidzących.
Nie jest niespodzianką, że istnieje wiele narzędzi, których możesz użyć, aby rozwiązać niektóre z typowych problemów witryn WordPress z dostępnością. Wtyczka, którą uznaliśmy za potencjalnie najbardziej użyteczną, to Dostępność WP. Poprowadzimy Cię przez niektóre z jego ważnych funkcji.
Po zainstalowaniu i aktywacji wtyczki musisz ją skonfigurować. Nawigować do Ustawienia ułatwień dostępu z Zainstalowane wtyczki ekran na desce rozdzielczej.
Aby Twoja witryna była bardziej dostępna dla czytelników, możesz dodać pomijanie linków. Skiplinki sprawiają, że czytelnicy skupiają się na treści, zamiast czytać najpierw wszystkie menu i dane nagłówka. Konfiguracja pomijanych linków wymaga trochę wiedzy o kodzie, więc nie będziemy tutaj wchodzić w szczegóły. Zapewnia użytkownikom przycisk, którego mogą użyć, aby pominąć niepotrzebne treści i przejść bezpośrednio do sedna sprawy. Musisz tylko przypisać atrybut ID do miejsca, w którym link ma prowadzić odwiedzającego.
Dalej są Ustawienia paska narzędzi ułatwień dostępu. Jeśli zaznaczysz Dodaj pasek narzędzi ułatwień dostępu z regulacją rozmiaru czcionki i przełącznikiem kontrastu, Twój użytkownik zobaczy pasek narzędzi z boku swojego ekranu.
Dzięki temu mogą wyświetlić wersję witryny o wysokim kontraście…
…lub powiększyć główną czcionkę.
Nie będziemy wchodzić w sedno ustawień paska narzędzi, ale istnieje kilka opcji, które warto przetestować przed włączeniem ich dla odwiedzających.
Następnie masz Różne ustawienia Sekcja.
Możesz przeglądać każdy z nich z osobna i sprawdzić, które z nich najlepiej sprawdzają się w Twojej witrynie. Na przykład Twoja witryna może używać języka tekstowego RTL (od prawej do lewej) – wtyczka i czytnik witryny muszą o tym wiedzieć. Możesz chcieć, aby Twoje obrazy miały dłuższe opisy, i jest na to również opcja.
Trzy z tych pól wyboru są domyślnie zaznaczone: linki nie mają atrybutu target, witryna zwraca błąd wyszukiwania, gdy pole wyszukiwania nie zawiera ciągu, a tabindex jest usuwany z elementów, na które można ustawić fokus.
Następnie masz Usuń atrybuty tytułu Sekcja. Służy to do poinformowania czytelnika witryny, że niektóre elementy układu nie są tytułami. Sugerujemy, aby przejść przez to i usunąć atrybut tytułu z tego, co go nie potrzebuje.
Masz również poręczne narzędzie do sprawdzania kontrastu. Po prostu wybierz kolory, których używasz lub wklej ich kody szesnastkowe w odpowiednich polach i sprawdź, czy Twoje współczynniki kontrastu są zgodne z Twoimi potrzebami.
Na zakończenie
Jak pokazaliśmy, istnieje wiele rzeczy, które możesz zrobić, aby Twoja witryna była bardziej dostępna. Unikaj pułapki polegającej na myśleniu o przystępnym projektowaniu jedynie jako uwzględniającym mniejszość – w rzeczywistości jedyne, co robisz, to atrakcyjność dla szerszego grona odwiedzających, inwestując tylko trochę więcej czasu i wysiłku w potencjalnie duże zyski. Nie wspominając o tym, że niektóre z tych technik mogą znacznie poprawić Twój wynik SEO. Dlaczego nie chcesz tego wykorzystać?
Wesprzyj naszą pracę ❤️
Jeśli spodobał Ci się ten artykuł, rozważ pozostawienie napiwku, aby pomóc nam dalej publikować wartościowe treści.
