VisaptveroÅ”s ceļvedis par tÄ«mekļa pieejamÄ«bas API, koncentrÄjoties uz ekrÄna lasÄ«tÄju saderÄ«bu un tastatÅ«ras navigÄciju, lai veidotu iekļaujoÅ”u un lietotÄjam draudzÄ«gu tÄ«mekļa pieredzi globÄlai auditorijai.
TÄ«mekļa pieejamÄ«bas API: LietotÄju iespÄjoÅ”ana, izmantojot ekrÄna lasÄ«tÄja atbalstu un tastatÅ«ras navigÄciju
MÅ«sdienu digitÄlajÄ vidÄ tÄ«mekļa pieejamÄ«bas nodroÅ”inÄÅ”ana nav tikai labÄkÄ prakse, tÄ ir fundamentÄla prasÄ«ba. Patiesi iekļaujoÅ”s tÄ«meklis nodroÅ”ina vienlÄ«dzÄ«gu piekļuvi un iespÄjas visiem lietotÄjiem, neatkarÄ«gi no viÅu spÄjÄm. TÄ«mekļa pieejamÄ«bas API (lietojumprogrammu saskarnes) ir kritiski svarÄ«gi rÄ«ki, kas veicina saziÅu starp tÄ«mekļa saturu un palÄ«gtehnoloÄ£ijÄm (AT), piemÄram, ekrÄna lasÄ«tÄjiem un alternatÄ«vÄm ievades ierÄ«cÄm. Å is raksts iedziļinÄs tÄ«mekļa pieejamÄ«bas API nozÄ«mÄ«gumÄ, Ä«paÅ”u uzmanÄ«bu pievÄrÅ”ot ekrÄna lasÄ«tÄja atbalstam un tastatÅ«ras navigÄcijai ā diviem bÅ«tiskiem aspektiem, veidojot pieejamu tÄ«mekļa pieredzi globÄlai auditorijai.
Izpratne par tīmekļa pieejamības API
TÄ«mekļa pieejamÄ«bas API ir saskarÅu kopas, kas atklÄj informÄciju par tÄ«mekļa saturu palÄ«gtehnoloÄ£ijÄm. TÄs ļauj AT izprast tÄ«mekļa lapas elementu struktÅ«ru, semantiku un stÄvokli, ļaujot lietotÄjiem ar invaliditÄti efektÄ«vi mijiedarboties. Bez Ŕīm API palÄ«gtehnoloÄ£ijas nespÄtu precÄ«zi interpretÄt un pÄrraidÄ«t ekrÄnÄ redzamo informÄciju.
Dažas no svarÄ«gÄkajÄm tÄ«mekļa pieejamÄ«bas API ietver:
- ARIA (Accessible Rich Internet Applications): AtribÅ«tu komplekts, kas pievieno semantisko informÄciju HTML elementiem, Ä«paÅ”i dinamiskam saturam un ar JavaScript veidotiem logrÄ«kiem. ARIA ir plaÅ”i atbalstÄ«ta pÄrlÅ«kprogrammÄs un palÄ«gtehnoloÄ£ijÄs.
- MSAA (Microsoft Active Accessibility): VecÄka API, ko galvenokÄrt izmanto Windows sistÄmÄs. Lai gan tÄ joprojÄm ir aktuÄla mantotÄm lietojumprogrammÄm, jaunai izstrÄdei parasti priekÅ”roka tiek dota ARIA.
- IAccessible2: API, kas balstÄs uz MSAA, nodroÅ”inot detalizÄtÄku informÄciju par pieejamiem objektiem.
- UI Automation (UIA): Microsoft modernÄ pieejamÄ«bas API, kas piedÄvÄ uzlabotu veiktspÄju un funkcionalitÄti salÄ«dzinÄjumÄ ar MSAA.
- PieejamÄ«bas koks (Accessibility Tree): DOM (dokumenta objektu modeļa) attÄlojums, kas pielÄgots palÄ«gtehnoloÄ£ijÄm, noÅemot neatbilstoÅ”us mezglus un atklÄjot semantisko informÄciju, izmantojot pieejamÄ«bas API.
EkrÄna lasÄ«tÄja atbalsts: Satura padarÄ«Å”ana dzirdamu
EkrÄna lasÄ«tÄji ir programmatÅ«ras lietojumprogrammas, kas tekstu un citu vizuÄlo informÄciju pÄrvÄrÅ” runas vai Braila raksta izvadÄ. Tie ir bÅ«tiski cilvÄkiem, kuri ir akli vai ar redzes traucÄjumiem, ļaujot viÅiem piekļūt tÄ«mekļa saturam un ar to mijiedarboties. EfektÄ«vs ekrÄna lasÄ«tÄja atbalsts lielÄ mÄrÄ ir atkarÄ«gs no pareizas tÄ«mekļa pieejamÄ«bas API ievieÅ”anas.
Galvenie apsvÄrumi ekrÄna lasÄ«tÄju saderÄ«bai:
- Semantiskais HTML: Semantisko HTML elementu (piemÄram, <article>, <nav>, <aside>, <header>, <footer>, <main>, <h1> lÄ«dz <h6>, <p>, <ul>, <ol>, <li>) izmantoÅ”ana nodroÅ”ina skaidru struktÅ«ru, ko ekrÄna lasÄ«tÄji var interpretÄt. Izvairieties no vispÄrÄ«gu elementu, piemÄram, <div> un <span>, izmantoÅ”anas, ja ir pieejami specifiskÄki semantiskie elementi.
- ARIA atribÅ«ti: Izmantojiet ARIA atribÅ«tus, lai uzlabotu HTML elementu semantiku, Ä«paÅ”i dinamiskam saturam, pielÄgotiem logrÄ«kiem un elementiem ar nestandarta uzvedÄ«bu. Daži svarÄ«gi ARIA atribÅ«ti ietver:
aria-label: NodroÅ”ina teksta alternatÄ«vu elementiem, kuriem nav redzamu teksta iezÄ«mju. PiemÄram: <button aria-label="AizvÄrt">X</button>aria-labelledby: Saista elementu ar citu elementu, kas nodroÅ”ina tÄ iezÄ«mi. Tas ir noderÄ«gi, ja redzama iezÄ«me jau pastÄv.aria-describedby: Saista elementu ar citu elementu, kas sniedz aprakstu vai instrukcijas.aria-live: NorÄda, ka lapas apgabals tiek dinamiski atjauninÄts, un ekrÄna lasÄ«tÄjiem bÅ«tu jÄpaziÅo par izmaiÅÄm. VÄrtÄ«bas ietveroff(noklusÄjums),polite(paziÅot, kad lietotÄjs ir neaktÄ«vs) unassertive(paziÅot nekavÄjoties, potenciÄli pÄrtraucot lietotÄju).aria-role: DefinÄ elementa semantisko lomu, ignorÄjot noklusÄjuma lomu. PiemÄram: <div role="button">NoklikŔķiniet Å”eit</div>aria-hidden: PaslÄpj elementu no palÄ«gtehnoloÄ£ijÄm. Izmantojiet piesardzÄ«gi, jo satura slÄpÅ”ana vizuÄli un no palÄ«gtehnoloÄ£ijÄm var radÄ«t pieejamÄ«bas problÄmas.aria-expanded: NorÄda, vai izvÄrÅ”ams elements (piemÄram, izvÄlne vai akordeona panelis) paÅ”laik ir izvÄrsts.aria-haspopup: NorÄda, ka elementam ir uznirstoÅ”Ä izvÄlne vai dialoglodziÅÅ”.- AlternatÄ«vais teksts attÄliem: NodroÅ”iniet aprakstoÅ”u alternatÄ«vo tekstu (
altatribÅ«ts) visiem attÄliem. Tas ļauj ekrÄna lasÄ«tÄjiem nodot attÄla saturu un mÄrÄ·i lietotÄjiem, kuri to neredz. Izmantojiet kodolÄ«gus un jÄgpilnus aprakstus. TÄ«ri dekoratÄ«viem attÄliem izmantojiet tukÅ”ualtatribÅ«tu (alt=""). - Formu iezÄ«mes: Saistiet formas ievades laukus ar skaidrÄm un aprakstoÅ”Äm iezÄ«mÄm, izmantojot
<label>elementu unforatribÅ«tu. Tas nodroÅ”ina, ka ekrÄna lasÄ«tÄji paziÅo katra ievades lauka mÄrÄ·i. - Virsraksti un orientieri: Izmantojiet virsrakstus (<h1> lÄ«dz <h6>), lai loÄ£iski strukturÄtu saturu, ļaujot ekrÄna lasÄ«tÄju lietotÄjiem pÄrvietoties pa lapu pÄc virsrakstu lÄ«meÅiem. Izmantojiet orientieru lomas (piemÄram,
role="navigation",role="main",role="banner",role="complementary",role="contentinfo"), lai definÄtu galvenÄs lapas sadaļas, ļaujot lietotÄjiem Ätri pÄriet uz dažÄdÄm zonÄm. - Tabulas: Izmantojiet tabulas tikai tabulÄriem datiem un nodroÅ”iniet atbilstoÅ”as tabulas galvenes (
<th>) un virsrakstus (<caption>). IzmantojietscopeatribÅ«tu<th>elementos, lai definÄtu to saistÄ«bu ar datu ŔūnÄm (piemÄram,scope="col"kolonnu galvenÄm,scope="row"rindu galvenÄm). - Dinamiska satura atjauninÄjumi: Kad saturs tiek atjauninÄts dinamiski (piemÄram, ar AJAX vai JavaScript), izmantojiet ARIA "live" reÄ£ionus (
aria-liveatribÅ«ts), lai paziÅotu ekrÄna lasÄ«tÄjiem par izmaiÅÄm. RÅ«pÄ«gi apsveriet atbilstoÅ”oaria-livevÄrtÄ«bu (politevaiassertive), lai nepÄrslogotu lietotÄju. - Kļūdu apstrÄde: NodroÅ”iniet skaidrus un informatÄ«vus kļūdu ziÅojumus formu validÄcijai un citÄm lietotÄja mijiedarbÄ«bÄm. Saistiet kļūdu ziÅojumus ar attiecÄ«gajiem formas laukiem, izmantojot
aria-describedby.
PiemÄrs: Pieejams attÄls
Nepareizi: <img src="logo.png">
Pareizi: <img src="logo.png" alt="UzÅÄmuma logotips - Example Corp">
PiemÄrs: Pieejama formas iezÄ«me
Nepareizi: <input type="text" id="name"> VÄrds:
Pareizi: <label for="name">VÄrds:</label> <input type="text" id="name">
NavigÄcija ar tastatÅ«ru: DarbspÄjas nodroÅ”inÄÅ”ana bez peles
NavigÄcija ar tastatÅ«ru ir bÅ«tiska lietotÄjiem, kuri nevar izmantot peli vai citu rÄdÄ«tÄjierÄ«ci. Tas ietver personas ar kustÄ«bu traucÄjumiem, personas, kas dod priekÅ”roku Ä«sinÄjumtaustiÅiem, un personas, kas izmanto palÄ«gtehnoloÄ£ijas, kuras balstÄs uz tastatÅ«ras ievadi. NodroÅ”inot stabilu navigÄciju ar tastatÅ«ru, tiek garantÄts, ka visi interaktÄ«vie elementi tÄ«mekļa lapÄ ir pieejami un darbinÄmi ar tastatÅ«ru.
Galvenie apsvÄrumi navigÄcijai ar tastatÅ«ru:
- LoÄ£iska fokusa secÄ«ba: NodroÅ”iniet, lai fokusa secÄ«ba (secÄ«ba, kÄdÄ elementi saÅem fokusu, kad lietotÄjs nospiež Tab taustiÅu) ir loÄ£iska un intuitÄ«va. Fokusa secÄ«bai parasti ir jÄseko lapas vizuÄlajai plÅ«smai.
- Redzams fokusa indikators: NodroÅ”iniet skaidru un redzamu fokusa indikatoru visiem interaktÄ«vajiem elementiem, kad tie saÅem fokusu. Tas ļauj lietotÄjiem viegli noteikt, kurÅ” elements paÅ”laik ir aktÄ«vs. NoklusÄjuma pÄrlÅ«kprogrammas fokusa indikatoru bieži var stilizÄt, izmantojot CSS (piemÄram,
:focuspseidoklasi). NodroÅ”iniet pietiekamu kontrastu starp fokusa indikatoru un apkÄrtÄjo fonu. - TastatÅ«ras slazdi: Izvairieties no tastatÅ«ras slazdu izveides, kur lietotÄjs iestrÄgst noteiktÄ elementÄ vai lapas sadaÄ¼Ä un nevar izkļūt, izmantojot Tab taustiÅu. Tas var bÅ«t Ä«paÅ”i problemÄtiski ar modÄlajiem dialoglodziÅiem un pielÄgotiem logrÄ«kiem.
- NavigÄcijas izlaiÅ”anas saites: Lapas sÄkumÄ nodroÅ”iniet saiti "izlaist navigÄciju", kas ļauj lietotÄjiem apiet atkÄrtotus navigÄcijas elementus un pÄriet tieÅ”i uz galveno saturu. Tas ir Ä«paÅ”i noderÄ«gi lietotÄjiem, kuri paļaujas uz ekrÄna lasÄ«tÄjiem vai tastatÅ«ras navigÄciju.
- Piekļuves taustiÅi (piesardzÄ«gi): Piekļuves taustiÅi (Ä«sinÄjumtaustiÅi, kas aktivizÄ konkrÄtus elementus) var bÅ«t noderÄ«gi, taÄu tie jÄlieto piesardzÄ«gi, jo tie var konfliktÄt ar esoÅ”ajiem pÄrlÅ«kprogrammas vai operÄtÄjsistÄmas Ä«sinÄjumtaustiÅiem. Ja tos izmanto, nodroÅ”iniet skaidru mehÄnismu, lai lietotÄji varÄtu atklÄt un pielÄgot piekļuves taustiÅus. Apsveriet iespÄjamos konfliktus dažÄdÄs valodÄs un tastatÅ«ras izkÄrtojumos.
- PielÄgoti logrÄ«ki un tastatÅ«ras mijiedarbÄ«ba: Veidojot pielÄgotus logrÄ«kus (piemÄram, pielÄgotas nolaižamÄs izvÄlnes, slÄ«dÅus vai datumu atlasÄ«tÄjus), nodroÅ”iniet, ka tie ir pilnÄ«bÄ pieejami ar tastatÅ«ru. NodroÅ”iniet tastatÅ«ras ekvivalentus visÄm uz peli balstÄ«tajÄm mijiedarbÄ«bÄm. Izmantojiet ARIA atribÅ«tus, lai definÄtu logrÄ«ka lomu, stÄvokli un Ä«paŔības. Bieži sastopami ARIA modeļi logrÄ«kiem ietver:
- Pogas: Izmantojiet
role="button"atribÅ«tu un nodroÅ”iniet, ka elementu var aktivizÄt, izmantojot Enter vai atstarpes taustiÅu. - Saites: SaitÄm izmantojiet
<a>elementu ar derÄ«guhrefatribÅ«tu. - Formas elementi: Izmantojiet atbilstoÅ”us formas elementus, piemÄram,
<input>,<select>un<textarea>, un saistiet tos ar iezÄ«mÄm. - IzvÄlnes: Izmantojiet
role="menu",role="menuitem"un saistÄ«tos ARIA atribÅ«tus, lai izveidotu pieejamas izvÄlnes. Ä»aujiet lietotÄjiem pÄrvietoties pa izvÄlni, izmantojot bultiÅu taustiÅus. - DialoglodziÅi: Izmantojiet
role="dialog"vairole="alertdialog"atribÅ«tu, lai izveidotu pieejamus dialoglodziÅus. NodroÅ”iniet, ka fokuss tiek pareizi pÄrvaldÄ«ts, atverot un aizverot dialoglodziÅu, un ka Escape taustiÅÅ” aizver dialoglodziÅu. - Cilnes: Izmantojiet
role="tablist",role="tab"unrole="tabpanel"atribÅ«tus, lai izveidotu pieejamas ciļÅu saskarnes. Ä»aujiet lietotÄjiem pÄrslÄgties starp cilnÄm, izmantojot bultiÅu taustiÅus. - TestÄÅ”ana: RÅ«pÄ«gi pÄrbaudiet navigÄciju ar tastatÅ«ru, izmantojot tikai tastatÅ«ru. PievÄrsiet uzmanÄ«bu fokusa secÄ«bai, fokusa indikatoram un visu interaktÄ«vo elementu darbspÄjai.
PiemÄrs: NavigÄcijas izlaiÅ”anas saite
<a href="#main" class="skip-link">PÄriet uz galveno saturu</a>
<nav><!-- NavigÄcijas izvÄlne --></nav> <main id="main"><!-- Galvenais saturs --></main>PiemÄrs: Fokusa indikatora stilizÄÅ”ana
button:focus {
outline: 2px solid blue;
}
PieejamÄ«bas testÄÅ”ana un validÄcija
RegulÄra pieejamÄ«bas testÄÅ”ana ir ļoti svarÄ«ga, lai identificÄtu un risinÄtu pieejamÄ«bas problÄmas. Ir pieejami dažÄdi rÄ«ki un metodes pieejamÄ«bas testÄÅ”anai, tostarp:
- AutomatizÄtie pieejamÄ«bas pÄrbaudÄ«tÄji: Å ie rÄ«ki skenÄ tÄ«mekļa lapas, meklÄjot bieži sastopamas pieejamÄ«bas kļūdas. PiemÄri ir WAVE, axe DevTools un Google Lighthouse. Lai gan automatizÄtie pÄrbaudÄ«tÄji var bÅ«t noderÄ«gi, uz tiem nevajadzÄtu paļauties kÄ uz vienÄ«go pieejamÄ«bas testÄÅ”anas lÄ«dzekli, jo tie nevar atklÄt visas problÄmas.
- ManuÄlÄ pieejamÄ«bas testÄÅ”ana: TÄ ietver manuÄlu tÄ«mekļa lapu pÄrskatÄ«Å”anu, lai identificÄtu pieejamÄ«bas problÄmas, kuras nevar atklÄt automatizÄtie rÄ«ki. Tas ietver testÄÅ”anu ar ekrÄna lasÄ«tÄjiem, tastatÅ«ras navigÄciju un citÄm palÄ«gtehnoloÄ£ijÄm.
- LietotÄju testÄÅ”ana ar cilvÄkiem ar invaliditÄti: VisefektÄ«vÄkais veids, kÄ nodroÅ”inÄt pieejamÄ«bu, ir iesaistÄ«t testÄÅ”anas procesÄ cilvÄkus ar invaliditÄti. ViÅu atsauksmes var sniegt vÄrtÄ«gu ieskatu vietnes lietojamÄ«bÄ personÄm ar dažÄdÄm vajadzÄ«bÄm.
WCAG un pieejamības standarti
TÄ«mekļa satura pieejamÄ«bas vadlÄ«nijas (WCAG) ir starptautiski atzÄ«tu vadlÄ«niju kopums, kas paredzÄts tÄ«mekļa satura padarÄ«Å”anai pieejamÄku. WCAG izstrÄdÄ Pasaules TÄ«mekļa konsorcijs (W3C), un tÄs sniedz visaptveroÅ”u veiksmes kritÄriju kopumu dažÄdiem pieejamÄ«bas atbilstÄ«bas lÄ«meÅiem (A, AA un AAA). TiekÅ”anÄs pÄc WCAG atbilstÄ«bas ir galvenais solis pieejamas tÄ«mekļa pieredzes veidoÅ”anÄ. DaudzÄs valstÄ«s un reÄ£ionos ir likumi un noteikumi, kas nosaka, ka vietnÄm jÄatbilst WCAG. PiemÄri ietver:
- 508. pants (Amerikas SavienotÄs Valstis): Nosaka, ka federÄlajÄm aÄ£entÅ«rÄm ir jÄnodroÅ”ina, lai to elektroniskÄs un informÄcijas tehnoloÄ£ijas bÅ«tu pieejamas cilvÄkiem ar invaliditÄti.
- OntÄrio iedzÄ«votÄju ar invaliditÄti pieejamÄ«bas akts (AODA) (KanÄda): Nosaka, ka organizÄcijÄm OntÄrio ir jÄnodroÅ”ina, lai to vietnes bÅ«tu pieejamas cilvÄkiem ar invaliditÄti.
- Eiropas PieejamÄ«bas akts (EAA) (Eiropas SavienÄ«ba): Nosaka pieejamÄ«bas prasÄ«bas plaÅ”am produktu un pakalpojumu klÄstam, tostarp vietnÄm un mobilajÄm lietotnÄm.
GlobÄli apsvÄrumi
IzstrÄdÄjot un veidojot pieejamas vietnes globÄlai auditorijai, ir svarÄ«gi Åemt vÄrÄ Å”Ädus aspektus:
- Valoda un lokalizÄcija: NodroÅ”iniet, lai vietne bÅ«tu pareizi lokalizÄta dažÄdÄm valodÄm, ieskaitot alternatÄ«vo tekstu attÄliem, formu iezÄ«mÄm un citiem teksta elementiem. Apsveriet dažÄdu rakstzÄ«mju kopu un teksta virziena (piemÄram, no labÄs uz kreiso pusi rakstÄmÄs valodas) ietekmi.
- KultÅ«ras apsvÄrumi: Apzinieties kultÅ«ras atŔķirÄ«bas, kas var ietekmÄt pieejamÄ«bu. PiemÄram, krÄsu simbolika dažÄdÄs kultÅ«rÄs var atŔķirties, un daži attÄli noteiktos reÄ£ionos var bÅ«t aizskaroÅ”i vai nepiemÄroti.
- PalÄ«gtehnoloÄ£iju lietojums: IzpÄtiet dažÄdu palÄ«gtehnoloÄ£iju izplatÄ«bu dažÄdos reÄ£ionos. Tas var palÄ«dzÄt noteikt testÄÅ”anas un optimizÄcijas pasÄkumu prioritÄtes.
- JuridiskÄs prasÄ«bas: Apzinieties pieejamÄ«bas likumus un noteikumus dažÄdÄs valstÄ«s un reÄ£ionos.
NoslÄgums
TÄ«mekļa pieejamÄ«bas API ir pamatÄ iekļaujoÅ”as tÄ«mekļa pieredzes radÄ«Å”anai lietotÄjiem ar invaliditÄti. Izprotot un pareizi ievieÅ”ot Ŕīs API, izstrÄdÄtÄji var nodroÅ”inÄt, ka tÄ«mekļa saturs ir pieejams ekrÄna lasÄ«tÄju un tastatÅ«ras lietotÄjiem, dodot iespÄju indivÄ«diem pilnÄ«bÄ piedalÄ«ties digitÄlajÄ pasaulÄ. PieejamÄ«bas prioritizÄÅ”ana jau no projekta sÄkuma un regulÄras pieejamÄ«bas testÄÅ”anas iekļauÅ”ana radÄ«s lietotÄjam draudzÄ«gÄku un taisnÄ«gÄku tÄ«mekli visiem. IevÄrojot WCAG vadlÄ«nijas, sekojot labÄkajÄm praksÄm ekrÄna lasÄ«tÄja atbalstam un tastatÅ«ras navigÄcijai, kÄ arÄ« Åemot vÄrÄ globÄlos faktorus, jÅ«s varat izveidot vietnes, kas ir patiesi pieejamas daudzveidÄ«gai un starptautiskai auditorijai. Atcerieties, ka pieejamÄ«ba nav tikai tehniska prasÄ«ba, bet gan apÅemÅ”anÄs veicinÄt iekļauÅ”anu un vienlÄ«dzÄ«gas iespÄjas.
PieÅemiet pieejamÄ«bu. Veidojiet visiem.