Poprawa dostępności Twojej witryny WordPress

Poprawa dostępności witryny WordPress nie oznacza, że ​​strona internetowa będzie użyteczna dla osób niedowidzących. To mały obrazek. Oto niepełnosprawności, które W3C zaleca, aby rozważyć, aby internet stał się bardziej dostępny:

• niepełnosprawność słuchowa
• zaburzenia poznawcze
• zaburzenia neurologiczne
• upośledzenia fizyczne
• zaburzenia mowy
• niepełnosprawność wzroku

Ponadto, strona internetowa postępując zgodnie ze standardowymi wytycznymi dotyczącymi dostępności nie tylko poprawia użyteczność dla osób niepełnosprawnych, ale również korzyści osób pełnosprawnych. Oto kilka przykładów z tego samego dokumentu W3C:

• osoby korzystające z telefonów komórkowych, inteligentnych zegarków, inteligentnych telewizorów i innych urządzeń z małymi ekranami, różnymi trybami wprowadzania itp.
• osoby starsze o zmieniających się zdolnościach z wiekiem
• osoby z „przejściową niepełnosprawnością” taką jak złamana ręka lub zgubione okulary
• osoby z „ograniczeniami sytuacyjnymi”, np. w jasnym świetle słonecznym lub w środowisku, w którym nie mogą słuchać dźwięku
• osoby korzystające z wolnego łącza internetowego lub o ograniczonej lub drogiej przepustowości

Uczynienie witryny bardziej dostępną oznacza więc zaprojektowanie witryny w taki sposób, aby nawet osoby z różnymi niepełnosprawnościami mogły z łatwością korzystać z treści witryny.

Istnieje wiele najlepszych praktyk, których musisz przestrzegać, aby Twoja witryna była bardziej dostępna, i jest kilka praktyk, których musisz przestrzegać, aby uzyskać wyższą pozycję w wyszukiwarkach. Dobra wiadomość jest taka, że ​​wiele z tych najlepszych praktyk jest powszechnych.

Tak więc zwiększenie dostępności witryny automatycznie zwiększa jej pozycję w wyszukiwarkach. Technicznie ma to sens. Wyszukiwarki używają specjalistycznego oprogramowania o nazwie „przeszukiwacz” do indeksowania wszystkich witryn w Internecie.

Jednak roboty indeksują tylko tekstową wersję Twojej witryny. Nie rozumieją obrazów i filmów. Jeśli Twoja witryna jest zgodna ze standardami dostępności, oznacza to, że Twoja witryna ma już zoptymalizowaną wersję tekstową. Dlatego wyszukiwarki łatwo zrozumieją, o czym jest Twoja witryna.

Teraz, gdy znasz już korzyści płynące z poprawy dostępności Twojej witryny, zobaczmy, jak możesz zwiększyć dostępność swojej witryny WordPress.

Mam lekką krótkowzroczność. Mimo to, jeśli złamię specyfikacje, co często robię, mam trudności z czytaniem niektórych stron internetowych. Bardzo dużo stron internetowych używa małych czcionek. Jednak będąc użytkownikiem WordPress, masz przewagę.

Prawie wszystkie motywy umożliwiają zmianę rozmiaru czcionki za pomocą WordPress Customizer. Ogólnie czcionka 15–16 pikseli jest idealna do tekstu podstawowego w widoku pulpitu. Wiele motywów używa 14px, ale polecam 15px.

Nie daj się zwieść nieograniczonej liczbie czcionek dostępnych na rynku. Możesz być zbyt kreatywny z czcionką, ale odwiedzający będzie miał trudności z przeczytaniem tekstu.

Niektóre dobre opcje czcionek to Times New Roman, Georgia, szeryfowa, Arial, Helvetica i bezszeryfowa.

Niektóre dobre czcionki Google to PT Serif, Noto Serif i Noto Sans.

Wiele motywów umożliwia również zmianę kolorów pierwszego planu i tła. Wybierając kolory pierwszego planu i tła, upewnij się, że jest między nimi znaczny kontrast. Zgodnie z W3C minimalny współczynnik kontrastu tekstu powinien wynosić 4,5:1.

Określenie kontrastów kolorów innych niż w skali szarości może być trudne. Możesz użyć narzędzia do sprawdzania kontrastu WebAIM, aby określić współczynnik kontrastu kombinacji kolorów pierwszego planu i tła.

Odwiedzający musi mieć kontrolę nad funkcjami wstrzymywania i odtwarzania dowolnych mediów, takich jak wideo lub audio. Google zaczyna również zniechęcać strony internetowe z automatycznie odtwarzającymi się mediami.

Wiele motywów umożliwia również autorom przesyłanie wielu obrazów i wyświetlanie ich jako karuzeli. Nie używaj go, każdy rodzaj automatycznie odtwarzanych mediów powoduje stres u osób z zaburzeniami poznawczymi i neurologicznymi.

Osoby niedowidzące nie widzą obrazów w Twoim poście, ale czytniki ekranu odczytują im tagi alt obrazów. Dlatego do opisywania obrazów zawsze używaj tekstu alternatywnego. Zwiększa to również SEO Twoich obrazów w wynikach graficznych.

Na przykład, jeśli dołączasz zdjęcie zachodu słońca, umieść „zdjęcie zachodu słońca” w tagu alt, aby osoby korzystające z czytników ekranu, które nie widzą tego zdjęcia, zrozumiały, że w Twoim poście znajduje się zdjęcie zachodu słońca .

Kiedy przesyłasz obraz, WordPress daje możliwość określenia tekstu alternatywnego po prawej stronie:

Zrób to zarówno dla obrazów postów, jak i polecanych obrazów.

Obecnie domyślny edytor wizualny WordPressa nie obsługuje wymieniania skrótów. Możesz to zrobić ręcznie: zaznacz skrócony tekst (np. „HTTP”) w trybie wizualnym edytora postów, a następnie kliknij zakładkę „Tekst” w prawym górnym rogu, aby przejść do trybu tekstowego.

W trybie tekstowym owiń zaznaczony tekst tagiem w następujący sposób:

HTTP

Najlepsze są filmy z napisami, a jeśli umieścisz pod nimi transkrypcję filmu, staniesz się bohaterem osób z wadami słuchu lub wolnym połączeniem internetowym.

Dużo słucham podcastów i oglądam wiele filmów non-fiction na YouTube. Jeśli kiedyś stracę słuch, a internet będzie pełen filmów i podcastów bez transkrypcji, świat będzie dla mnie smutnym miejscem.

Opublikuj transkrypcje, gdy przesyłasz film lub podcast do swojego bloga. Jeśli jesteś twórcą treści wideo, dołącz napisy do swoich filmów.

Jest kilka zmian, których po prostu nie możesz zrobić w dostosowywaniu WordPressa, jest to bardziej na poziomie kodu twojego motywu. Jeśli szukasz motywu z dobrą dostępnością, poszukaj następujących rzeczy w swoim motywie:

Omówiliśmy już, że należy dodać tekst alternatywny do wszystkich przesyłanych obrazów. Jednak obraz nagłówka motywu zazwyczaj nie daje opcji ustawienia tekstu alternatywnego. Motyw powinien automatycznie ustawić tekst alternatywny obrazu nagłówka na tytuł witryny lub powinien umożliwiać ustawienie tekstu alternatywnego w module dostosowania.

Osoby z niepełnosprawnością ruchową, stałą i czasową, mają trudności z używaniem myszy lub gładzika. Udostępnienie witryny za pomocą klawiatury ułatwia im poruszanie się po witrynie.

Dwie główne rzeczy, na które należy zwrócić uwagę, to czy kolejność kart jest poprawna i czy menu rozwijane działają poprawnie przy użyciu klawiatury.

Indeks elementów tabulatora określa kolejność, w jakiej elementy będą wybierane, gdy użytkownik naciśnie klawisz „Tab”. Również klawisze „Shift+Tab” powinny wybierać elementy w odwrotnej kolejności.

Naciskaj klawisz „Tab” i zwróć uwagę na kolejność wybierania elementów. Kolejność powinna być ciągła i logiczna. W ten sam sposób sprawdź naciskając „Shift + Tab”.

HTML zawiera element rozwijany, element wyboru.

<wybierz></wybierz>

Ale wiele motywów korzysta z niestandardowych list rozwijanych. Te listy rozwijane wyglądają świetnie, ale nie są dostępne bez myszy lub gładzika. Dlatego zawsze sprawdzaj, czy listy rozwijane można wybierać za pomocą klawiatury.
Ponadto pasek nawigacyjny Twojej witryny prawdopodobnie używa menu rozwijanych do wyświetlania podmenu. Upewnij się, że podmenu można otwierać, a pozycje podmenu można wybierać za pomocą klawiatury.

Zwykle nagłówek, pasek nawigacyjny i wezwanie do działania są umieszczane nad główną treścią stron internetowych. W rezultacie użytkownik klawiatury może być zmuszony do wielokrotnego naciskania klawisza „Tab” przed dotarciem do sekcji głównej. Osoby korzystające z czytników ekranu również napotykają ten sam problem.

Link pominięcia to pierwszy link na stronie. Po kliknięciu linku „pomiń” kolejność zakładek jest ustawiana bezpośrednio na sekcję główną. Tak więc od następnego naciśnięcia klawisza „Tab” użytkownik zostanie przeniesiony do elementów wewnątrz sekcji głównej.

Kiedy poruszamy się po stronie za pomocą klawisza „Tab”, aktywny element wyświetli wokół niego przerywaną ramkę. Pomaga to zidentyfikować aktualnie wybrany element. Wiele motywów WordPress wyłącza tę funkcję.

Zaleca się pozostawienie tej funkcji włączonej, ponieważ pomaga ona użytkownikowi określić, który element jest zaznaczony, gdy użytkownik klika „Tab” lub „Shift + Tab”, aby nawigować. Zwiększa dostępność Twojej witryny.

HTML5 wprowadził przydatne elementy semantyczne, takie jak <header>, <footer>, <article>, <aside>, <nav>, <main> i <section>. Smutne jest to, że wiele motywów WordPress nadal używa ogólnego elementu <div> , w którym można użyć jednego z elementów semantycznych.