Accentsconagua
Share
Într-un articol anterior am vorbit de ce este importantă accesibilitatea, în ceea ce privește afacerea, SEO, utilitatea și chiar legea. În acest articol vă voi explica cum să creați teme WordPress accesibile, deși aceleași idei se aplică oricărei platforme.
Nu există nicio modalitate prin care să putem acoperi toate cele mai bune practici posibile din acest articol, dar elementele de bază rămân valabile pentru fiecare site web. Voi folosi câteva resurse ca oasele din spate ale acestui articol:
Vom acoperi următoarele sfaturi:
Nu pot sublinia suficient importanța HTML-ului semantic: este fundația site-ului dvs. accesibil. Léonie Watson explică perfect ce semnifică semantica în semantica sa de înțelegere a articolului:
"Semantica HTML este, prin urmare, importantă în două moduri: obținem o înțelegere consecventă a structurii conținutului și a comportamentului nativ și avem o înțelegere comună a sensului și scopului conținutului. Cel mai bun lucru este să primim aceste lucruri gratuit ori de câte ori folosim codul HTML așa cum a fost intenționat. "
Când scriem elemente HTML, nu trebuie doar să ne gândim la modul în care sunt proiectate sau la modul în care arată. Ar trebui să ne gândim și la felul în care funcționează ...
Un exemplu foarte comun este utilizarea lui Utilizare Notă: în spatele scenei, API-ul de acces oferă informații despre tehnologiile de asistență cu privire la numele, rolul și starea fiecărui element. Iată un exemplu de legătură, Construirea unui Web incluziv: De ce are legătură cu accesibilitatea, cu modul în care un vizualizator de accesibilitate îl vede: În practică, aceasta înseamnă că cititorii de ecran și alte AT-uri recunosc ancora și pot anunța rolul și numele elementului. De exemplu: "Link, construirea unui web incluziv: de ce contează accesibilitatea". De asemenea, pot naviga pe pagină utilizând numai linkurile: Utilizare Pentru a rezuma, Bacsis: În Chrome 64 există un Accesibilitate panou care vă arată poziția elementului selectat în arborele de accesibilitate, precum și atributele sale ARIA și proprietățile calculate. Utilizare Citiți mai multe despre Link-uri, Butoane, Subiecte și Div-uri de Adrian Roselli. În următoarea secțiune vom analiza elementele de secționare HTML5 și cum arată marcajul semantic. Multe elemente HTML5 definesc implicit rolurile ARIA. Acestea identifică secțiunile unei pagini și ajută utilizatorii AT să navigheze către fiecare dintre acestea. Din acest motiv, tot conținutul ar trebui să fie în interiorul elementelor semnificative din punct de vedere semantic, pentru a nu fi ratat de utilizator. Acestea sunt cele mai comune elemente de reper: Notă: combinațiile mai vechi de browser și AT nu recunosc neapărat elementele HTML5 și le mută pe rolurile corecte. În aceste cazuri, puteți adăuga roluri manual astfel: Pentru mai multe informații, verificați marcajul exemplificativ în pagina manualului WordPress cu privire la reperele ARIA și pagina exemplificativă ARIA. Ai citit un articol cu adevărat lung, fără titluri? Ați fost greu să citiți? Sigur că am. Titlurile ajută utilizatorii să scaneze și să înțeleagă rapid conținutul paginii. În același timp, rubricile oferă utilizatorilor AT o modalitate de a naviga în conținut și de a defini structura paginii. Abordările variază, dar recomandarea mea este aceeași cu cea prezentată în structura titlurilor în dezvoltarea temelor: Notă: utilizatorii pot rupe ierarhia titlurilor atunci când introduc propriul conținut utilizând H1 sau sărind peste nivelele de titlu. Îi recomandăm să le îndreptați către documentația noastră despre modul de utilizare a titlurilor în conținut. Folosesc aceste instrumente pentru a verifica structura titlurilor: Până în prezent am menționat mai multe moduri de a naviga pe pagină: utilizând linkuri, titluri sau repere. Și același lucru este valabil și pentru alte elemente HTML semantice, cum ar fi listele, tabelele sau imaginile. Utilizatorii tehnologiei de asistență pot naviga și utilizând aceste elemente. Aici este un scurt video care demonstrează utilizarea cititorului de ecran Voiceover, ceva ce ar trebui să vă testați cu siguranță tema cu: Citiți mai multe despre utilizarea programului Voiceover sau consultați acest articol similar utilizând NVDA. Regula numărul unu: nu eliminați stilurile de contur utilizând Există o mulțime de utilizatori care sunt dependenți de tastatură și nu pot folosi un mouse. Pentru utilizatorii de tastatură, este esențial să existe stiluri de focalizare vizuală pe toate elementele interactive: linkuri, câmpuri de formate, butoane și așa mai departe. Cu alte cuvinte, utilizatorii trebuie să poată vedea care element interactiv are focalizarea actuală a tastaturii atunci când navigați prin pagină. Cele mai comune comenzi ale tastaturii pentru navigare sunt Tab, Shift + Tab, introduce, Spaţiu, și sagetile. Notă: stilurile de focalizare implicite ale browserului nu sunt întotdeauna cele mai accesibile soluții - stilurile personalizate de schiță sunt câteodată mai bune. De asemenea, rețineți: Uneori, stilurile de schiță nu sunt cea mai bună abordare de proiectare, deoarece conturul nu respectă raza de graniță a unui element. O soluție este de a utiliza Aici este un truc frumos, care utilizează o schiță transparentă pentru modul Windows High Contrast. Puteți citi mai multe informații despre acest lucru de la Gutenberg PR 5138 și biletul Trac 41286. Pe de altă parte, navigarea de pe tastatură nu este numai despre stilurile de focalizare. Toate acţiuni trebuie să fie posibil și cu tastatura. Un exemplu obișnuit este atunci când un utilizator nu poate naviga la elementele de submeniu utilizând fie tasta tab sau folosind tastele săgeată. Subiectele subtitrate pentru începători au soluția JavaScript pentru aceasta: de fiecare dată când un link de meniu este focalizat sau neclară, aceștia stabilesc sau elimină Un alt exemplu este atunci când navigarea acționează similar unui dialog modal, cum ar fi o navigare pe ecran complet. În aceste cazuri, este important să setați corect focalizarea. Încă văd multe desene cu contrast redus de culoare. Acest lucru poate face imposibil pentru utilizatorii color blind, pentru utilizatorii cu vedere slabă sau pentru utilizatorii care folosesc monitori de calitate scăzută să citească conținutul. Contrastul între fundal și culorile prim-planului ar trebui să aibă un raport de contrast de Există multe instrumente pentru verificarea contrastului de culoare, cum ar fi controlul raportului de contrast. Veți găsi mai multe informații în articole cum ar fi cea despre utilizarea culorilor și a contrastului de culoare ca cerință pentru temele pregătite pentru accesibilitate. O legătură "săriți la conținut" permite o modalitate de a sări peste toate elementele suplimentare înaintea conținutului principal și îndreptați-vă direct către conținut. S-ar putea să te întrebi de ce reper În orice caz, utilizatorii AT încă utilizează link-uri de sărituri în conformitate cu acest sondaj cititor de ecran: Citiți mai multe despre cum să utilizați linkurile de sărituri din manual. Încercați să evitați textele de legături repetitive precum "Citiți mai multe" sau "Aflați mai multe". Pentru utilizatorii de cititoare de ecran care navighează folosind link-uri, rezultatul poate arăta astfel: Tema Twenty Seventeen prezintă exemple bune de adăugare a titlului postului în extras: % 2 $ s Pentru cititorii de ecran, textul linkului va fi citit ca "Continuați să citești titlul postului". Iată un exemplu similar pentru conținut: Clasă Am atins doar suprafața de accesibilitate în teme WordPress, dar sperăm că acest lucru vă va face să începeți. HTML-ul semantic și folosirea înțeleaptă a CSS merg foarte mult. Nu uitați să verificați toate indicațiile de accesibilitate pentru teme și să citiți mai multe sfaturi în manualul de accesibilitate., , și . Vom folosi aceste pentru a ilustra punctul meu de vedere.Când să utilizați
(o etichetă de ancorare) atunci când creați un link către o altă pagină, fișier, e-mail sau o ancoră pe aceeași pagină.
Mozilla Inapoi sus.Meniul. Ar trebui să fie .
Accessibility Viewer afișează numele legăturii, rolul, statul și alte informații
Lista legăturilor de pagină din VoiceoverCând să utilizați
când trebuie să declanșați o acțiune, cum ar fi deschiderea unui meniu. Acest videoclip de la Rob Dodson explică de ce se cheamă această situație in loc de . elementul are toate avantajele următoare:
buton, care ajută utilizatorii AT să înțeleagă că este un element interactiv.invalid atribut, pentru că butonul nu trebuie să mai fie interactiv.
Panoul de acces din Chrome care afișează informații despre elementul de butonCând să utilizați
atunci când aveți nevoie de un element pentru scopuri de styling. Firește, mai întâi verificați dacă există elemente HTML native care ar fi mai bune. De exemplu , , , , , sau
2. Structura cu elemente de secționare HTML5
Elementul HTML5 Rolul de reper implicit stindard navigare principal complementar contentinfo 3. Eliminați ierarhia titlurilor
4. Navigați prin pagina cu ajutorul tehnologiei de asistență
Accesibilitate: Care este marcajul dvs. care vă spune?
Astăzi vom examina accesibilitatea și semantica. Să începem cu o întrebare: ați folosit vreodată un cititor de ecran? Dacă răspunsul este negativ, ar trebui să încercați ... 5. Luați în considerare stilul de navigare și focalizare a tastaturii
: focalizare contur: nici unul; !box-shadow în schimb, ... stilurile de focalizare ar trebui să funcționeze în toate scenariile, cum ar fi în modul High Contrast Windows care elimină stilurile box-shadow.: focalizare box-shadow: inset 0 0 0 1px # 6c7781; / * Vizibil numai în modul Windows High Contrast * / contur: 2px solid transparent;
.concentra clasa de pe link-ul de meniu. Consultați funcția toggleFocus.
Crearea temei WordPress cu sublinieri
Subliniază tema starter, de către producătorii de WordPress ei înșiși, este conceput pentru a vă oferi un "start de 1000 de ore de start" pe crearea temelor WordPress. Acest curs… 6. Verificați contrastul culorii
Bazele accesibilității: Proiectarea pentru deficiențe vizuale
Cu 4,5% din populația globală care se confruntă cu orbire colorată, 4% suferă de vederea scăzută, iar alte 0,6% sunt orbi, dificultăți vizuale cu utilizarea ... 7. Amintiți-vă că ați trecut Link-urile
nu este suficient, deoarece utilizatorii AT pot naviga la conținutul principal folosind repere? De fapt, grupul țintă principal al liniei de salt este utilizatorii tastaturii, care probabil nu utilizează niciun dispozitiv AT. Deci nu au comenzi rapide sau alte regiuni de reper."Este important să rețineți că, în timp ce utilizarea a scăzut în rândul utilizatorilor de cititoare de ecran, link-urile" săriți "oferă încă beneficii notabile altor utilizatori de tastatură."
8. Evitați textul legăturii repetitive
Lista citește mai multe linkuri nu ajută la navigare/ ** * Înlocuiește "[...]" (anexat extraselor generate automat) cu ... și * a link "Continuați lectură". * * @ din Twenty Seventeen 1.0 * * @ param string $ link Legătură la un singur mesaj / pagină. * @ string retur "Continue reading" link prefixat cu o elipsă. * / funcția twentyseventeen_excerpt_more ($ link) if (is_admin ()) return $ link; $ link = sprintf ('/ * traducători:% s: Numele postului curent * / the_content (sprintf (__ ('Continuați lectură "% S""," douăzeci și șaptesprezece "), get_the_title ())); cititor de ecran text ascunde vizibil titlul postului, dar utilizatorii de cititoare de ecran pot accesa în continuare textul. Verificați cel mai recent exemplu de cod al textului cititorului de ecran din manual.Concluzie
