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

W naszym wprowadzeniu do serii ułatwień dostępu omówiliśmy podstawy różnych wytycznych dotyczących dostępności treści internetowych (WCAG). Teraz nadszedł czas, aby wykonać kolejny krok, przyglądając się niektórym kluczowym wskazówkom i pokazując, jak zwiększyć dostępność witryny. Zacznijmy od bloków omijania, bardziej znanych jako linki pomijania.

Co to jest link do pominięcia?

Link do pomijania to specjalny link, który jest ukryty w Twojej witrynie, dopóki nie pojawi się w :focus za pomocą klawisza tabulatora 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, które powtarzają się na wielu stronach internetowych”. – Standard WCAG 2.4.1 – Bloki obejścia

2.4.1 to standard na poziomie A. Oznacza to, że jest to objęte sekcją 508 i wymagane przez prawo. Musisz mieć linki do pomijania.

Czy wiesz, do czego najczęściej odnoszą się linki pomijania treści? Gdybyś odgadł „menu”, miałbyś rację. Menu pojawiają się na prawie każdej stronie witryny. Użytkownicy widzący i użytkownicy myszy mają tendencję do przewijania obok siebie, 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 dla linków pomijania są lewe paski boczne (lub prawe paski boczne w przypadku witryn w językach pisanych od prawej do lewej, takich jak arabski). Ze względu na to, w jakim porządku semantycznym mają tendencję, użytkownicy będą potrzebować sposobu na ominięcie regularnie powtarzanego 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 zawartość tych sekcji nie ulega zmianie, np. strony kategorii lub archiwum, powinien istnieć link do pominięcia.

Wprowadzenie do dostępności: część 1

Dostępność to termin, który wciąż słyszysz, ale możesz nie w pełni zrozumieć. Dzieje się tak po części dlatego, że samo słowo może być nieco mylące. Słowo źródłowe, dostęp, sprawia, że ​​koncepcja wydaje się być powiązana z takimi rzeczami, jak...

Jak dodać linki pomijania?

Teraz, gdy już wiesz, czym jest link do pomijania, nadszedł czas, aby dodać je do swojej witryny. Istnieje kilka sposobów rozwiązania tego problemu. Najłatwiejszym sposobem (a dla nie-koderów jedynym sposobem) jest zainstalowanie wtyczki. Trudnym sposobem jest samodzielne zakodowanie ich w swoim motywie.

Korzystanie z wtyczki

Jeśli chodzi o pomijanie linków, polecam dwie wtyczki: WP Accessibility autorstwa Joe Dolsona i Genesis Accessible autorstwa Riana Rietvelda. Obie wtyczki rozwiązują kilka problemów z dostępnością, w tym dodawanie podstawowych linków do pomijania. Należy pamiętać, że Genesis Accessible jest przeznaczony specjalnie dla witryn zbudowanych przy użyciu Genesis Framework. Jeśli nie masz strony Genesis, użyj WP Accessibility.

Kodujesz to sam

Inną opcją jest samodzielne kodowanie linków pomijających. Sam kod jest dość prosty i wymaga jedynie podstawowej znajomości HTML i CSS, ale przed wypróbowaniem tej metody musisz znać się na motywach i szablonach WordPress. Od tego momentu zakładam, że wiesz, jak znaleźć pliki, do których istnieją odniesienia i jak je edytować.

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

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

Celowo pozostawiliśmy pusty atrybut href . Dzieje się tak, ponieważ musimy zdefiniować, gdzie będzie link do naszego linku pominięcia. 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> ma taki identyfikator. Twój element <main> prawdopodobnie znajdzie się w header.php , ale nie zawsze. Po zlokalizowaniu elementu musisz upewnić się, że ma identyfikator. Jeśli nie, dodaj jedną taką jak:

<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 linku do pominięcia o wartość identyfikatora.

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

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

Tuż za tagiem <body> wklej gotowy kod HTML. Poniżej przedstawiono bardziej szczegółowy przykład z wieloma linkami do 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 linki do pomijania w swoim kodzie, ale jeszcze nie skończyłeś! Jeśli teraz załadujesz swoją stronę, u góry zobaczysz linki do pominięcia. Czas dodać trochę CSS. Stylizacja linków pomijających 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 łącze, całkowicie niszczą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 pominięcia są na miejscu, ale ukryte. Gdy użytkownik klawiatury lub czytnik ekranu wczytuje Twoją stronę przy inicjacjach :focus , Twoje linki do pominięcia pozwolą mu przejść bezpośrednio do treści, po którą przyszli.

Zawijanie tego

Pomijanie linków to doskonały przykład funkcji ułatwień dostępu, która wydaje się wymagać dużo pracy, ale tak naprawdę nie jest. Wszystko, co zrobiliśmy po stronie kodu, to dodanie kilku linijek HTML i CSS. Dla nietechnicznego podejścia zainstalowaliśmy wtyczkę. Żadna z tych metod nie zajmuje dużo czasu, co należy zauważyć, ponieważ linki pomijające są standardem na poziomie A dla WCAG 2.0 (najnowsze standardy WCAG). Zgodnie z prawem musisz mieć je w swojej witrynie. Nie narażaj się na ryzyko; dodaj swoje linki do pominięcia już dziś!