Kuna veebist saab üha enam igapäevaelu lahutamatu osa, on teie WordPressi teema kõigile kasutajatele juurdepääsetav tagamine nii moraalne vastutus kui ka strateegiline eelis. Juurdepääsetavust silmas pidades kujundamine avab teie sisu erinevate võimete ja sirvimistingimustega inimestele. Samuti aitab see teil järgida arenevaid eeskirju, parandada SEO-d ja üldist kasutajate rahulolu. Olenemata sellest, kas olete kogenud arendaja või alles alustate, aitab juurdepääsetavuse parimate tavade järgimine algusest peale luua teemasid, mis on nii esteetiliselt meeldivad kui ka kõikehõlmavad.
1. Alustage semantilise HTML-iga
Tegevus: Kasutage tähenduse ja struktuuri edastamiseks õigeid HTML-elemente – pealkirju, lõike, loendeid, nuppe ja vormi juhtelemente. Miks: Abitehnoloogiad, nagu ekraanilugejad, toetuvad sisu tõlgendamiseks ja navigeerimiseks semantilistele märgistustele. Loogiline dokumendistruktuur hõlbustab kasutajatel lehe erinevate osade vaheliste seoste mõistmist. Vihje: Määrake pealkirjad hierarhilises järjekorras (H1 põhipealkirja jaoks, seejärel H2/H3 jaotiste ja alajaotiste jaoks), et luua selge sisukava.
2. Kaasake ARIA atribuudid läbimõeldult
Tegevus: Kasutage ARIA (juurdepääsetavad rikkalikud Interneti-rakendused) atribuute, et täiustada keeruliste kasutajaliidese komponentide (nt menüüd, liugurid või vahekaardid) semantikat. Miks: ARIA aitab abitehnoloogiatel mõista nende elementide rolli, olekut ja omadusi, mis ei ole oma olemuselt semantilised. Samuti tagab see dünaamiliste sisuvärskenduste tõhusa edastamise. Vihje: Lisage ARIA atribuudid ainult siis, kui HTML-i algelementidest või atribuutidest ei piisa. ARIA liigkasutamine võib tekitada pigem segadust kui selgust.
3. Veenduge, et klaviatuuril oleks navigeeritavus
Tegevus: Veenduge, et kõik interaktiivsed elemendid – lingid, nupud, vormiväljad, menüüd – oleksid juurdepääsetavad ainult klaviatuuri kaudu (kasutades klahvi Tab, Shift+Tab ja Enter). Miks: Paljud kasutajad ei saa liikumis- või nägemispuude tõttu hiirt kasutada. Selge fookusnäidiku ja loogilise vahekaartide järjestuse pakkumine võimaldab neil täielikult teie teema funktsionaalsust kasutada. Vihje: Testige oma teemat, eemaldades hiire vooluvõrgust ja navigeerides sellel täielikult klaviatuuri abil. Reguleerige CSS-is fookuse stiile, et see oleks alati nähtav, kus kasutaja lehel on.
4. Tagage piisav värvikontrast
Tegevus: Valige teksti- ja taustavärvid, mis vastavad või ületavad WCAG kontrastsuse nõudeid (4.5:1 tavalise teksti jaoks, 3:1 suure teksti jaoks). Miks: Õige kontrastsus aitab vaeg- või värvinägemishäiretega kasutajatel teie sisu lugeda ja sellega suhelda. Samuti suurendab see kasutatavust heledates keskkondades ja väiksematel ekraanidel. Tööriist: Kasuta WebAIM-i kontrastikontroll oma värvivaliku kinnitamiseks.
5. Optimeerige pealkirja struktuure ja maamärke
Tegevus: Määrake järjekindlalt pealkirjad ja kaaluge ARIA orientiiride kasutamist (role="main", role="navigation"jne), et tuvastada olulised lehejaotised. Miks: Ekraanilugeja kasutajad navigeerivad sageli pealkirjade ja orientiiride järgi. Loogiline hierarhia võimaldab neil hüpata otse kõige asjakohasemasse jaotisesse. Vihje: Lisage lehe ülaossa link „Jäta vahele”, et klaviatuuri kasutajad saaksid korduvatest navigeerimismenüüdest hõlpsasti mööda minna.
6. Pakkuge mittetekstilise sisu jaoks tekstialternatiive
Tegevus: Lisage piltidele alt atribuudid, heli transkriptsioonid ja videote pealdised, et kõik kasutajad saaksid teabele juurde pääseda. Miks: Asendustekst võimaldab ekraanilugejatel kirjeldada pilte nägemispuudega kasutajatele. Subtiitrid ja transkriptsioonid muudavad multimeediumisisu kurtidele või vaegkuuljatele kättesaadavaks. Vihje: Kirjutage lühike, kuid sisukas alternatiivtekst. Kui pilt on dekoratiivne, võite alt atribuudi tühjaks jätta (alt=””), et abitehnoloogiad teaksid, et see pole ülioluline.
7. Keskenduge vormidele ja siltidele
Tegevus: Veenduge, et igal vormielemendil (sisend, valik, tekstiala) oleks seotud silt. Miks: Ilma selgete siltideta ei pruugi ekraanilugejatele tuginevad kasutajad teada, millist teavet on vaja. Nähtavad sildid aitavad ka kognitiivsete häiretega või saidil uusi kasutajaid. Vihje: Kasuta <label> element ja for atribuut siltide seostamiseks vormi juhtelementidega. Vajadusel kaaluge aaria-describedby või aaria-required lisamist.
8. Austage kasutaja liikumis- ja eelistusseadeid
Tegevus: Lubage kasutajatel keelata automaatselt esitatavad liugurid, karussellid või taustavideod. Austage eelistuste vähendatud liikumisega meediapäringut. Miks: Mõned kasutajad leiavad, et liigsed animatsioonid häirivad või ajavad isegi iiveldama. Kasutaja eelistuste austamine aitab luua rahulikuma ja kontrollitavama kogemuse. Vihje: Pakkuge liikuvate elementide jaoks pausi- või peatamisnuppe ja tagage, et kriitiline sisu oleks nähtav isegi siis, kui animatsioonid on keelatud.
9. Kasutage juurdepääsetavaid valmiskomponente
Tegevus: Navigeerimismenüüde, liugurite või modaalide lisamisel kaaluge eelehitatud juurdepääsetavusele keskendunud teekide või mustrite kasutamist. Miks: Neid teeke testitakse sageli abitehnoloogiatega põhjalikult, mis säästab teie aega ja vähendab juurdepääsuvigade tekkimise ohtu. Vihje: Vaadake WordPressi teemade ülevaatemeeskonna juhiseid või otsige teadaolevaid juurdepääsetavaid disainisüsteeme. Ratta taasleiutamise asemel kasutage tõestatud mustreid uuesti.
10. Test abistavate tehnoloogiatega
Tegevus: Enne teema viimistlemist testige seda ekraanilugejatega, nagu NVDA (Windows) või VoiceOver (macOS) ja ainult klaviatuuriga navigeerimisega. Miks: Automatiseeritud tööriistad võivad probleeme esile tõsta, kuid abitehnoloogiatega käsitsi testimine paljastab tegelikud probleemid, millest tööriistad võivad tähelepanuta jätta. Vihje: Võimalusel julgustage puuetega kasutajaid tagasisidet andma. Nende arusaamad võivad viia täiustusteni, mida te poleks võib-olla kunagi mõelnud.
11. Kaaluge keelt ja loetavust
Tegevus: Kasutage selget ja kokkuvõtlikku keelt ja veenduge, et tekst oleks kergesti mõistetav. Määratlege akronüümid ja vältige žargooni igal võimalusel. Miks: Juurdepääsetavus ei seisne ainult koodis; see puudutab ka seda, kui hõlpsalt saavad kasutajad sisu sõeluda ja sellest aru saada. Vihje: Kasuta lang atribuut peal html element, mis aitab abitehnoloogiatel teie sisu õiges keeles lugeda.
12. Paku kasutajale fondi suuruse ja kontrasti kontrolli
Tegevus: Võimaluse korral kasutage lihtsaid viise, kuidas kasutajad fondi suurust kohandada või suure kontrastsusega režiimidele lülituda. Miks: Kasutajate vaatamiskogemuse kohandamise võimaldamine tagab, et igaüks saab kohandada saiti oma isiklike vajadustega, suurendades seeläbi üldist rahulolu. Vihje: Mõned teemad või pistikprogrammid pakuvad sisseehitatud lüliteid. Kui ei, siis kaaluge lihtsa pistikprogrammi lisamist, mis neid juhtelemente pakub.
13. Pakkuge järjepidevat ja prognoositavat paigutust
Tegevus: Hoidke navigeerimismenüüd, otsingukastid ja muud levinud elemendid igal lehel samades kohtades. Miks: Järjepidevus aitab kõigil kasutajatel saidil liikumise kiiresti selgeks õppida. See on eriti kasulik kognitiivsete häiretega kasutajatele, kes saavad kasu prognoositavatest mustritest. Vihje: Kasutage seotud elementide jaoks loogilisi rühmitusi ja veenduge, et menüüd laieneksid või aheneksid ettenähtud viisil.
14. Kinnitage oma kood ja kasutage automatiseeritud testimist
Tegevus: Käivitage oma teema automaatsete juurdepääsetavuse kontrollijate kaudu ja kinnitage oma HTML ja CSS W3C standardite järgi. Miks: Puhas ja kehtiv kood vähendab võimalust, et abitehnoloogiad tõlgendavad sisu valesti, ja tagab teie teema pikaealisuse. Tööriist: Tööriistad, nagu WAVE, AXE või WordPressi spetsiaalne WP One Tap pistikprogramm, võivad esile tõsta probleeme, millest võisite märkamata jääda.
15. Jätkake õppimist ja kordamist
Tegevus: Püsige kursis viimaste parimate tavadega, jälgides juurdepääsetavuse ajaveebi, W3C veebi juurdepääsetavuse algatust ja WordPressi juurdepääsetavuse meeskonda. Miks: Juurdepääsetavusstandardid arenevad ning uued tööriistad ja tehnikad ilmuvad regulaarselt. Informatsiooni hoidmine aitab teil säilitada kõrgeid standardeid ja hoida oma teema tulevikukindlana. Vihje: Osalege juurdepääsetavuse foorumitel, veebiseminaridel või liituge kaasavale disainile keskendunud veebikogukondadega.