Jak korzystać z pomijanych linków, aby Twoja witryna WordPress była bardziej dostępna

We wstępie do serii o ułatwieniach dostępu omówiliśmy podstawy różnych wytycznych dotyczących dostępności treści internetowych (WCAG). Teraz nadszedł czas, aby zrobić kolejny krok, zapoznając się z niektórymi kluczowymi wskazówkami i pokazując, jak zwiększyć dostępność witryny. Zacznijmy od bloków obejściowych, bardziej znanych jako pomijanie linków.

Co to jest łącze pomijania?

Pomiń link to specjalny link, który jest ukryty w Twojej witrynie, dopóki nie wejdzie do :focus za pomocą klawisza Tab lub czytnika ekranu. Ich celem jest umożliwienie użytkownikom alternatywnych technologii (osobom korzystającym z klawiatur i czytników ekranu) pomijania bloków treści. Prosto ze standardów:

„Dostępny jest mechanizm omijania bloków treści powtarzających się na wielu stronach internetowych”. – Standard WCAG 2.4.1 – Blokady omijania

2.4.1 to standard poziomu A. Oznacza to, że jest objęty sekcją 508 i wymagany przez prawo. Musisz mieć pomijane linki.

Czy zgadniesz, do czego najczęściej odnoszą się bloki linków do pomijania treści? Jeśli odgadłeś „menu”, miałbyś rację. Menu pojawiają się na prawie każdej stronie witryny. Widzący użytkownicy i użytkownicy myszy mają tendencję do przewijania tuż obok nich, ponieważ jest to jeden z tych elementów witryny, których po prostu oczekujesz. Ale menu nawigacyjne nie są jedynymi blokami, które wymagają pomijania linków.

Często pomijanym obszarem pomijania linków są lewe paski boczne (lub prawe paski boczne w przypadku witryn w językach zapisywanych od prawej do lewej, takich jak arabski). Ze względu na miejsce, w którym zwykle mieszczą się w porządku semantycznym, użytkownicy będą potrzebować sposobu na ominięcie regularnie powtarzającego się paska bocznego, aby przejść bezpośrednio do treści.

To samo dotyczy polecanych bloków postów, które pojawiają się poza stroną główną. Niektóre projekty witryn przenoszą polecane sekcje postów lub suwaki na strony wewnętrzne. O ile nie zmienia się zawartość tych sekcji, tj. stron kategorii lub archiwum, powinien istnieć link do pominięcia.

Jak dodać pomijane linki?

Teraz, gdy już wiesz, co to jest link pomijania, nadszedł czas, aby dodać go do swojej witryny. Istnieje kilka sposobów rozwiązania tego problemu. Najłatwiejszym sposobem (i dla niekodujących, jedynym sposobem) jest zainstalowanie wtyczki. Trudnym sposobem jest samodzielne zakodowanie ich w swoim motywie.

Korzystanie z wtyczki

Jedna wtyczka, którą polecamy, jeśli chodzi o pomijanie linków: Dostępność WP autorstwa Joe Dolsona. Rozwiązuje kilka problemów z ułatwieniami dostępu, w tym dodaje podstawowe linki do pomijania.

Kodowanie samemu

Inną opcją jest samodzielne kodowanie pomijanych linków. Sam kod jest dość prosty i wymaga jedynie podstawowej wiedzy o HTML i CSS, ale przed wypróbowaniem tej metody musisz zapoznać się z działaniem motywów i szablonów WordPress. Od tego momentu zakładamy, że wiesz, jak znaleźć pliki, do których się odwołujesz, i jak je edytować.

Zaczniemy od napisania rzeczywistych linków do pomijania. Umożliwi to łatwe kopiowanie i wklejanie do plików szablonów. Pamiętając o znajomości HTML, musisz napisać tag kotwicy. Pamiętaj, że formatowanie tutaj ma na celu czytelność.

 <a href=”[don't fill this in yet]” class=”skip-link”> Skip to Main Content </a>

Celowo zostawiliśmy pusty atrybut href . Dzieje się tak, ponieważ musimy określić, dokąd będzie prowadził nasz link pomijania. W tym przykładzie użyjemy elementu <main> jako naszego celu. Ponieważ nie możemy połączyć się bezpośrednio z elementem bez identyfikatora, musimy upewnić się, że nasz element <main> go posiada. Twój <main> element prawdopodobnie zostanie znaleziony w header.php , ale nie zawsze. Po zlokalizowaniu elementu musisz upewnić się, że ma on identyfikator. Jeśli nie, dodaj taki:

 <main id=”main-content”> [a bunch more code below]

Konkretna wartość identyfikatora nie jest ważna, ale musisz ją zapamiętać. Teraz będziesz chciał zaktualizować kod pominiętego łącza o wartość identyfikatora.

 <a href=”#main-content” class=”skip-link”> Skip to Main Content </a>

Teraz, gdy masz już zbudowany link do pominięcia, wróć do pliku header.php lub gdziekolwiek znajduje się otwierający tag <body> motywu. Znacznik <body> jest niezbędnym miejscem na pominięcie linków, ponieważ muszą one być absolutnie pierwszą rzeczą, która pojawia się w :focus dla użytkowników klawiatury i czytnika ekranu.

Tuż za tagiem <body> obok wypełnionego kodu HTML. Poniżej przedstawiono bardziej szczegółowy przykład z wieloma łączami pomijania. Jeśli chcesz dodać wiele linków do swojej witryny, upewnij się, że identyfikatory są prawidłowo zastosowane.

 <body> <a href=”#left-sidebar” class=”skip-link”>Skip to Sidebar</a> <a href=”#featured-posts-block” class=”skip-link”>Skip to Featured Posts</a> <a href=”#main-content” class=”skip-link”>Skip to Main Content</a> [Header navigation goes here]

Teraz masz pomijanie linków w swoim kodzie, ale to jeszcze nie koniec! Jeśli teraz załadujesz swoją stronę, u góry zobaczysz linki pomijania. Czas dodać CSS. Stylizacja pomijanych linków jest dość prosta, korzystając z poniższego przykładu:

 .skip-link { position: absolute; top: 0; z-index: 9999; right: 100%; padding: 5px; padding: 0.5rem; font-size: 20px; font-size: 2rem; color: #000; background: #FFF; } .admin-bar .skip-link { top: 32px; } .skip-link:focus { right: auto; }

To, czego nie widzisz, to użycie display: none . Użycie go spowoduje, że czytnik ekranu całkowicie pominie link, całkowicie pokonując cel. Ukrywanie odbywa się poprzez umieszczenie tekstu poza ekranem za pomocą right: 100% i przesunięcie go w right: auto on :focus .

Po zastosowaniu CSS wszystko gotowe. Twoje linki do pomijania są na swoim miejscu, ale są ukryte. Gdy użytkownik klawiatury lub czytnik ekranu załaduje Twoją stronę w inicjuje :focus , Twoje pomijane linki pozwolą mu przejść bezpośrednio do treści, po którą przyszedł.

Podsumowanie

Pomiń linki to doskonały przykład funkcji ułatwień dostępu, która wydaje się wymagać dużo pracy, ale tak naprawdę nią nie jest. Wszystko, co zrobiliśmy po stronie kodu, to dodanie kilku linii HTML i CSS. Dla podejścia nietechnicznego zainstalowaliśmy wtyczkę. Żadna metoda nie zajmuje dużo czasu, co jest ważne, ponieważ pomijanie linków jest standardem poziomu A dla WCAG 2.0 (najbardziej aktualne standardy WCAG). Są Państwoprawnie zobowiązani do posiadania ich na swojej stronie.Nie narażaj się na ryzyko; dodaj swoje linki do pomijania już dziś!