Cum să utilizați Skip Links pentru a vă face site-ul WordPress mai accesibil

În seria noastră de introducere a accesibilității, am vorbit despre baza diferitelor orientări privind accesibilitatea conținutului web (WCAG). Acum este timpul să faceți pasul următor, uitându-vă la unele dintre liniile directoare cheie și arătându-vă cum să vă faceți site-ul mai accesibil. Să începem cu blocurile de ocolire, cunoscute mai frecvent ca skip links.

Ce este un skip link?

Un link de ignorare este un link special care este ascuns pe site-ul dvs. până când intră în :focus prin tasta Tab sau un cititor de ecran. Scopul lor este de a oferi utilizatorilor de tehnologii alternative (persoane care folosesc tastaturi și cititoare de ecran) posibilitatea de a sări peste blocuri de conținut. Direct de la standarde:

„Este disponibil un mecanism pentru a ocoli blocurile de conținut care sunt repetate pe mai multe pagini web.” – Standardul WCAG 2.4.1 – Blocuri de ocolire

2.4.1 este un standard de nivel A. Aceasta înseamnă că este acoperit de Secțiunea 508 și este cerut de lege. Trebuie să aveți săriți link-uri.

Poți ghici la ce se aplică cel mai comun bloc de link-uri de ignorare a conținutului? Dacă ai ghici „meniul”, ai avea dreptate. Meniurile apar pe aproape fiecare pagină a unui site. Utilizatorii văzători și utilizatorii mouse-ului tind să deruleze chiar lângă ei, deoarece este unul dintre acele elemente ale site-ului la care te aștepți să fie acolo. Dar meniurile de navigare nu sunt singurele blocuri care necesită săriți linkuri.

O zonă în mod obișnuit trecută cu vederea pentru linkurile de ignorare este barele laterale din stânga (sau barele laterale din dreapta pentru site-uri în limbi de la dreapta la stânga, cum ar fi arabă). Din cauza locului în care au tendința de a se încadra în ordine semantică, utilizatorii vor avea nevoie de o modalitate de a trece peste bara laterală repetată în mod regulat pentru a ajunge direct la conținut.

Același lucru este valabil și pentru blocurile de postări prezentate care apar în afara paginii de pornire. Unele modele de site-uri transportă secțiuni de postări sau glisoare prezentate în paginile interioare. Cu excepția cazului în care conținutul acelor secțiuni se schimbă, de exemplu: pagini de categorie sau de arhivă, ar trebui să existe un link de ignorare.

Cum adaugi linkuri ignorate?

Acum că știți ce este un link ignorat, este timpul să le adăugați pe site-ul dvs. Există câteva moduri de a rezolva această problemă. Calea ușoară (și pentru voi, care nu sunt codificatori, singura cale), este să instalați un plugin. Cel mai greu este să le codificați singur în tema dvs.

Folosind un plugin

Un plugin pe care îl recomandăm când vine vorba de săriți peste linkuri: WP Accessibility de Joe Dolson. Rezolvă mai multe probleme de accesibilitate, inclusiv adăugarea de linkuri de ignorare de bază pentru dvs.

Codați-l singur

Cealaltă opțiune este să codificați singuri link-uri. Codul în sine este destul de simplu și necesită doar câteva cunoștințe de bază HTML și CSS, dar va trebui să vă simțiți confortabil cu modul în care funcționează temele și șabloanele WordPress înainte de a încerca această metodă. Din acest moment, vom presupune că știți cum să găsiți fișierele la care se face referire și cum să le editați.

Vom începe prin a scrie mai întâi linkurile de ignorare reale. Acest lucru va permite copierea și inserarea ușoară în fișierele șablon. Reamintind cunoștințele HTML, va trebui să scrieți o etichetă de ancorare. Rețineți că formatarea aici este pentru lizibilitate.

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

Am lăsat necompletat atributul href intenționat. Acest lucru se datorează faptului că trebuie să definim unde se va trimite linkul nostru de ignorare. Pentru acest exemplu, vom folosi elementul <main> ca țintă. Deoarece nu ne putem conecta direct la un element fără un ID, va trebui să ne asigurăm că elementul nostru <main> are unul. Elementul dvs. <main> va fi probabil găsit în header.php , dar nu întotdeauna. După ce ați localizat elementul, va trebui să vă asigurați că are un ID. Dacă nu, adăugați unul astfel:

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

Valoarea specifică a ID-ului nu este importantă, dar va trebui să o rețineți. Acum veți dori să actualizați codul linkului de ignorare cu valoarea ID.

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

Acum că ați creat linkul de ignorare, reveniți la fișierul header.php sau oriunde se află eticheta de deschidere a temei <body> . Eticheta <body> este o poziție esențială pentru linkurile de ignorare, deoarece acestea trebuie să fie primul lucru absolut care intră în atenție :focus pentru utilizatorii de tastatură și cititoare de ecran.

Imediat după eticheta <body> , după codul HTML completat. Următoarele arată un exemplu mai detaliat cu mai multe link-uri de ignorare. Dacă doriți să adăugați mai multe linkuri la site-ul dvs., asigurați-vă că ID-urile sunt aplicate corect.

 <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]

Acum ai sări peste linkuri în codul tău, dar încă nu ai terminat! Dacă încărcați pagina acum, veți vedea linkurile de ignorare în partea de sus. E timpul să adaugi ceva CSS. Stilul link-urilor de ignorare este destul de simplu, folosind exemplul de mai jos:

 .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; }

Ceea ce nu vedeți este utilizarea display: none . Folosirea acestuia va face ca un cititor de ecran să omite complet linkul, înfrângând în întregime scopul. Ascunderea se face prin plasarea textului în afara ecranului folosind right: 100% și deplasându-l la right: auto on :focus .

Cu CSS aplicat, ești gata. Linkurile dvs. de ignorare sunt la locul lor, dar ascunse. Când un utilizator de tastatură sau un cititor de ecran vă încarcă pagina la initiates :focus , linkurile dvs. de ignorare îi vor permite să treacă direct la conținutul pentru care au venit.

Încheierea

Omiteți link-urile sunt un exemplu perfect de caracteristică de accesibilitate care pare a fi mult de lucru, dar chiar nu este. Tot ce am făcut din partea codului a fost să adăugăm câteva linii de HTML și CSS. Pentru abordarea non-tehnică, am instalat un plugin. Niciuna dintre metode nu durează foarte mult, ceea ce este important de remarcat, deoarece linkurile de ignorare sunt un standard de nivel A pentru WCAG 2.0 (cele mai actuale standarde WCAG). Sunteți obligatprin lege să le aveți pe site-ul dvs.Nu vă puneți în pericol; adăugați linkurile dvs. de ignorare astăzi!