Share
În general, acesta este principiul pe care site-ul dvs. trebuie să îl poată avea în siguranță navigat pentru toți utilizatorii. Aceasta include orientarea că întregul dvs. site web ar trebui să fie accesibil numai cu ajutorul tastaturii. În plus, modul în care site-ul dvs. răspunde la intrarea utilizatorului (prin tastatură sau altfel) ar trebui să fie predictibil, clar și sigur.
Acest ultim punct se referă în primul rând la asigurarea faptului că orice caracteristică potențială care provoacă convulsiile site-ului dvs. este dezactivată în mod prestabilit, iar utilizatorii au avertizat înainte de al activa. Acest principiu oferă, de asemenea, îndrumări privind asigurarea "timpului suficient" pentru ca utilizatorii să-și îndeplinească sarcinile, dar nu-l acoperim aici.
Fiind capabil să navigați și să utilizați site-ul dvs. numai cu o tastatură este unul dintre cele mai importante aspecte ale accesibilității. Utilizatorii orbi se vor baza aproape exclusiv pe claviaturi, iar cei cu dizabilități motorii pot avea dificultăți în controlul mouse-ului și, astfel, se bazează și pe accesul la tastatură. Unele persoane pot folosi mâinile lor puțin sau deloc și se bazează pe tastaturi mai mari, bastoane, capace, un singur comutator sau Sip 'n' Puff.
Puteți găsi descrieri ale acestor dispozitive pe site-ul WebAIM, dar toate acestea, în mod esențial, canalizează introducerea utilizatorilor în curse de tastatură. Dacă site-ul dvs. nu este accesibil prin intermediul tastaturii, atunci toți utilizatorii care se bazează pe aceste dispozitive nu vor putea să utilizeze site-ul dvs..
Din fericire, accesarea tastaturii temei sau a plugin-ului este relativ simplă. Iată câteva puncte cheie:
Multe teme se bazează pe deplasarea pe un element de meniu pentru a dezvălui orice submeniu. Acest lucru este bine, dar, în general, sub-meniul va nu apare dacă elementul din meniul părinte se concentrează (mai degrabă decât să stea). Dacă duplicați orice reguli relevante pentru :planare și să le aplicați : focus de asemenea, acest lucru vă va aduce la jumătatea drumului: elementele de submeniu vor apărea ca filele utilizatorilor din meniu. Cu toate acestea, odată ce utilizatorul accesează submeniul, meniul părinte pierde focalizarea și submeniul dispare. Acest lucru poate fi corectat folosind JavaScript. Detalii despre acest lucru și despre modul de furnizare a unei rezervări non-JavaScript vor fi acoperite în următorul articol din această serie.
Nu este nevoie să faceți nimic pentru a face accesibilitatea tastaturii de intrare (selectați, introduceți, radio etc.). Cu toate acestea, în cazul în care orice aspect al paginii dvs. (inclusiv câmpurile de formular) se concentreze, aceasta trebuie sa să fie posibil să se îndepărteze de el folosind doar o tastatură - în caz contrar, utilizatorul este în mod efectiv prins. Acesta este, în mod normal, un comportament implicit, deci trebuie să evitați să îl înlocuiți.
Această orientare are două tipuri de recomandări: face să găsească unde este utilizatorul în prezent este evident, și să ajungă acolo unde doresc să meargă mai ușor.
O parte din respectarea recomandărilor făcute în acest sens implică ceva deja realizat de mai multe teme: Aveți un meniu consecvent de navigare în pagini, evidențiați pagina curentă și permiteți utilizatorilor să determine rapid locul în care se află pe site (de exemplu, cu paine).
O parte esențială a utilizării unei tastaturi pentru a naviga în jurul unei pagini web este posibilitatea de a vedea exact ceea ce sa concentrat în prezent. Elementul care se concentrează în prezent trebuie să fie vizibil diferit și să se distingă de restul paginii. Din acest motiv ar trebui să evitați schiță: nici una; cu excepția cazului în care veți oferi un stil alternativ:
a: focalizare contur: nici unul; fundal: # ee7b00; culoare: #fff;
O altă parte importantă a accesibilității tastaturii este că tabbing-ul se comportă în mod previzibil și într-un mod natural. De exemplu, dacă focalizarea este în prezent un câmp de formă, mă aștept ca următoarea filă să mă ducă la următorul câmp în acea formă. Dacă tab-ul face ca focalizarea să sară în sus și în jos pagina erratic, atunci acest lucru va împiedica și dezorienta utilizatorul.
Evitați utilizarea tabindex: Atributul tabindex vă permite să modificați ordinea în care sunt atinse elementele prin tabbing. Cu toate acestea, dacă ați urmat sfatul din articolul 2 din această serie referitor la structura DOM, ordinea filelor ar trebui să reflecte ordinea "naturală" a paginii. În timp ce tabindex are utilizările sale, acestea sunt rare, iar utilizarea sa pentru a "patch" structura site-ului slab poate crea probleme suplimentare. Cea mai bună metodă este să evitați utilizarea tabindex-ului și, în schimb, tema să producă o structură DOM logică, cu CSS folosit pentru a modifica prezentarea vizuală.
Utilizatorii de cititoare de ecran vor sări de multe ori între link-uri, sărind peste text, iar la fiecare link cititorul de ecran va citi "link [link text]". Ca atare, este incredibil de nefolositor pentru acești utilizatori dacă au auzit în repetate rânduri "link-ul citi mai mult", "link-ul clic aici" sau "continuați lectură link-ul". Adăugarea contextului la link în acest caz implică doar furnizarea titlului postului. Deci, în loc de "Continuați lectură", avem "Continuați lectură [titlu postare]".
Pentru a face acest lucru într-o temă WordPress, trebuie pur și simplu să cârlig pe excerpt_more filtrați și adăugați linkul nostru "Continuați să citiți":
// adaugă funcția de legătură "continuă să citească X" mytheme_continue_reading_link () return '". sprintf (__ ('Continuați să citiți% s', 'mytheme'), esc_url (get_permalink ()), esc_html (get_the_title ())).
„; // Înlocuiește "[...]" (anexat extraselor generate automat) cu o elipsă și mytheme_continue_reading_link (). funcția mytheme_auto_excerpt_more ($ more) return ' …". mytheme_continue_reading_link (); add_filter ('excerpt_more', 'mytheme_auto_excerpt_more');
Aceasta oferă contextul "citește mai mult". Cu toate acestea, există câteva îmbunătățiri care pot fi făcute.
În primul rând, adăugarea titlului articolului va ruina, de obicei, estetica temei și, pentru utilizatorii cu deficiențe de vedere, va fi redundantă, deoarece poziția linkului "citește mai mult" în legătură cu titlul articolului și extrasul va face contextul evident. Pentru a rezolva aceste probleme, putem "ascunde" titlul articolului, dar într-un fel în care cititorii de ecran le vor citi în continuare.
Asta înseamnă că noi Nu pot folosidisplay: none sau vizibilitate: ascunse; în timp ce cititorii de ecran înțeleg aceste proprietăți și vor ignora conținutul. În schimb, putem plasa textul off-screen sau utilizați clamă proprietate:
.ecran-cititor poziție: absolut! important; lățime: 1px; înălțime: 1px; umplutura: 0; margine: -1px; overflow: ascuns; clip: rect (0,0,0,0); frontieră: 0;
Există o mulțime de exemple diferite de "clase de cititoare de ecran"; acest lucru este luat de la Bootstrap 3. Apoi, adăugați clasa potrivită la titlul articolului, înlocuind în mod special linia 5 de mai sus cu:
Accentsconagua
__( 'Continuați lectură % s',' mytheme '), În al doilea rând, în timp ce acest lucru ar oferi utilizatorilor o indicație cu privire la locul în care link-ul ar fi indicat, ei ar trebui totuși să asculte prin "link-ul continuă să citească ..." înainte de a ajunge la titlul postului. În mod ideal, ar trebui să puneți informații redundante la sfârșitul textului linkului sau omiteți-o complet din eticheta de ancorare, pentru a reduce timpul necesar identificării unui link.
Un alt avantaj pentru utilizatorii de cititoare de ecran care nu precede textul legat cu informații redundante este că cititorii de ecran vor genera adesea o listă de linkuri de pe o pagină. Dacă o mulțime de link-uri încep cu același text, acest lucru poate face mai greu să găsești un link dorit - mai ales dacă link-ul pentru pagina ta de contact este sub "H" deoarece citește "Cum să ne contactezi".
</code> Marcați corespunzător</h3><p> <code><title></code> tag-ul ar trebui să fie utilizat pentru a identifica locația curentă a utilizatorului. Acest lucru este citit de cititorii de ecran și apare în rezultatele căutării și în fereastra ecranului și în fila browser. Pentru a facilita identificarea utilizatorilor de către utilizatori (sau ceea ce a găsit căutarea), această etichetă trebuie să conțină titlul paginii și numele site-ului. În mod ideal, numele site-ului ar trebui să vină ultimul, astfel încât utilizatorii care utilizează cititoarele de ecran să nu trebuiască să asculte numele site-ului dvs. în fiecare încărcare de pagină înainte de a auzi titlul paginii.</p><p>Eticheta titlului poate fi adăugată la o temă cu:</p><pre><title><?php wp_title(); ?> Pentru a adăuga titlul site-ului:
/ ** * Adăugați titlul site-ului la titlul paginii * / funcția mytheme_wp_title ($ title, $ sep, $ seplocation) return $ title. '| ". get_bloginfo ( 'name'); add_filter ('wp_title', 'mytheme_wp_title', 10, 3);Sari la conținut
În mod obișnuit, site-urile web vor avea un antet comun și meniu de navigare care, cu excepția evidențierii poziției curente a utilizatorului, vor rămâne exact identice. Faptul de a filtrezi prin toate aceste link-uri sau de a asculta un cititor de ecran le repeta pe fiecare încărcare de pagină, este obositor și frustrant. Aceia dintre noi cu o viziune bună și cu abilități motorii pot să sară imediat la conținut - și putem face acest lucru la fel de ușor pentru cei care nu.
Dacă sunteți în administratorul WordPress și apăsați Tab după încărcarea paginii, veți observa un link care spune Treci la conținutul principal apare în partea stângă sus (Dacă apăsați din nou fila, a Treceți la bara de instrumente link-ul va apărea). Această legătură se află chiar în partea superioară a paginii, astfel încât aceasta este prima legătură care primește focalizare în timpul tab-urilor și primul link al site-ului citit de un cititor de ecran. În urma acestui link, utilizatorul sare direct la conținutul principal, ignorând toate legăturile inutile și logo-urile site-urilor între.
Crearea unei sărituri către conținut este o modalitate excelentă de a face site-ul dvs. mai ușor de navigat și este incredibil de ușor, necesitând doar un pic mic de cod HTML și unele CSS.
Mai întâi codul HTML. Linkul ar trebui să meargă chiar în partea de sus a paginii, imediat sub header.php fişier:
// Restul conținutului paginii
Singurele lucru pe care trebuie să le menționăm sunt:
- Valoarea href, în acest caz "principal". Aceasta trebuie să se potrivească cu ID-ul elementului care conține conținutul paginii.
- Clasa link-ului, pe care o vom folosi pentru styling.
În ceea ce privește (1), buclă dvs. va arata apoi ceva de genul:
//Bucla // Nu s-a găsit niciun mesaj ... căutarea afișată
iar șabloanele dvs. de pagină ar putea arăta mai degrabă:
>
Acum tot ce rămâne este să adăugați un stil la link.
În primul rând, dorim ca linkul să fie ascuns, dar nu ascuns cititorilor de ecran, așa că vom plasa link-ul off-screen mai degrabă decât să îl folosim display: none (în acest caz cititorii de ecran ignoră).
În al doilea rând, atunci când se concentrează atenția, dorim să facem legătura evidentă, deci este clar că o legătură ascunsă anterior este acum vizibilă și se concentrează.
.skip-link poziție: absolut; stânga: 6px; sus: -100px; / * poziție offscreen astfel încât nu este vizibil, dar poate primi focus * / z-index: 100000; / * Poziția peste bara de instrumente WordPress '* / font-size: 1em; font-weight: bold; afișare: bloc; fundal: # ee7b00; culoare albă; / * Stilul link-ul, astfel că este clar * / înălțime: auto; lățime: auto; linia-înălțime: normală; padding: 15px 25px; text-decoration: nici unul; -webkit-transition: top 1s ease-out; tranziție: facilități de top 1s; .skip-link: focalizare top: 5px; / * Deplasare pe ecran * / -webkit-tranziție: dreapta 0s; tranziție: dreapta 0s; / * Animați, pentru a vă face aparent evident * /
Asigurați navigarea în siguranță a site-ului dvs. (2.3)
În cele din urmă, rețineți că unii oameni sunt susceptibili la crize epileptice fotosensibile. Acest lucru poate fi cauzat de pâlpâirea sau efecte intermitente. În decembrie anul trecut, Jeff Chandler a eliminat efectul "zăpezii" de la WP Tavern, după ce un vizitator la avertizat că ar putea declanșa o criză.
Acest lucru nu se limitează la convulsii - poate provoca migrene sau atacuri de panică la unele persoane. Nici nu este limitat la efectele de zăpadă - un videoclip, un carusel sau o redare automată a fișierelor audio poate declanșa și acestea.
Deși acest lucru este în mare măsură o decizie a editorului și ca dezvoltatori nu este treaba noastră împiedica auto-play, putem cel puțin să o descurajăm, dezactivând-o implicit. Jeff menționează în articolul său că nu a putut găsi un plugin care să ofere efectul "zăpezii" pe care vizitatorii înșiși l-ar putea juca.
