Pakāpju komponentes: pieejamības nodrošināšana daudzsoļu procesos

Piemērs:

<ol aria-label="Progress"
  <li aria-current="step">1. solis: Konta informācija</li>
  <li>2. solis: Piegādes adrese</li>
  <li>3. solis: Maksājuma informācija</li>
  <li>4. solis: Pārskatīšana un apstiprināšana</li>
</ol>

2. ARIA atribūti

ARIA (Accessible Rich Internet Applications) atribūti sniedz papildu semantisko informāciju palīgtehnoloģijām. Izmantojiet ARIA atribūtus, lai uzlabotu savas pakāpju komponentes pieejamību.

Galvenie ARIA atribūti, kas jāņem vērā:

• aria-label: Nodrošina aprakstošu iezīmi pakāpju komponentei.
• aria-current="step": Norāda pašreizējo soli procesā.
• aria-describedby: Saista soli ar aprakstošu tekstu.
• aria-invalid: Norāda, vai solis satur nederīgus datus.
• aria-required: Norāda, vai solī ir nepieciešami dati.
• role="tablist", role="tab", role="tabpanel": Ja soļiem tiek izmantota cilnēm līdzīga struktūra.
• aria-orientation="vertical" vai aria-orientation="horizontal": Paziņo soļu izkārtojuma virzienu palīgtehnoloģijām.

Piemērs:

<div role="tablist" aria-label="Norēķinu process">
  <button role="tab" aria-selected="true" aria-controls="step1" id="tab1">1. solis: Piegāde</button>
  <button role="tab" aria-selected="false" aria-controls="step2" id="tab2">2. solis: Rēķins</button>
  <button role="tab" aria-selected="false" aria-controls="step3" id="tab3">3. solis: Pārskatīšana</button>
</div>
<div role="tabpanel" id="step1" aria-labelledby="tab1"><!-- Piegādes formas saturs --></div>
<div role="tabpanel" id="step2" aria-labelledby="tab2" hidden><!-- Rēķina formas saturs --></div>
<div role="tabpanel" id="step3" aria-labelledby="tab3" hidden><!-- Pārskatīšanas saturs --></div>

3. Pieejamība ar tastatūru

Nodrošiniet, ka lietotāji var pārvietoties pa pakāpju komponenti, izmantojot tikai tastatūru. Tas ir ļoti svarīgi lietotājiem, kuri nevar izmantot peli vai citu rādītājierīci.

Galvenie apsvērumi pieejamībai ar tastatūru:

• Fokusa pārvaldība: Nodrošiniet, ka fokuss vienmēr ir redzams un paredzams. Izmantojiet CSS kontūras vai citus vizuālus norādījumus, lai norādītu fokusēto elementu.
• Tabulēšanas secība: Nodrošiniet, ka tabulēšanas secība ir loģiska un atbilst pakāpju komponentes vizuālajai plūsmai. Ja nepieciešams, izmantojiet tabindex atribūtu, lai kontrolētu tabulēšanas secību.
• Tastatūras notikumi: Izmantojiet atbilstošus tastatūras notikumus (piem., Enter taustiņu, atstarpes taustiņu), lai aktivizētu soļus vai pārvietotos starp tiem.
• Izlaišanas saites: Nodrošiniet izlaišanas saiti, lai ļautu lietotājiem apiet pakāpju komponenti, ja viņiem to nevajag izmantot.

Piemērs:

<a href="#content" class="skip-link">Pāriet uz galveno saturu</a>
<style>
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #000;
  color: white;
  padding: 8px;
  z-index: 100;
}
.skip-link:focus {
  top: 0;
}
</style>

4. Vizuālais dizains un kontrasts

Pievērsiet uzmanību vizuālajam dizainam un kontrastam, lai nodrošinātu, ka pakāpju komponente ir viegli saskatāma un saprotama. Tas ir īpaši svarīgi lietotājiem ar vāju redzi vai krāsu aklumu.

Galvenie apsvērumi vizuālajam dizainam un kontrastam:

• Krāsu kontrasts: Nodrošiniet, ka kontrasts starp teksta un fona krāsām atbilst WCAG kontrasta prasībām. Izmantojiet rīkus, piemēram, WebAIM Contrast Checker, lai pārbaudītu kontrasta attiecības.
• Vizuālie norādījumi: Izmantojiet skaidrus vizuālos norādījumus, lai norādītu pašreizējo soli, pabeigtos soļus un nākamos soļus.
• Fonta lielums un lasāmība: Izmantojiet pietiekami lielu fonta izmēru, lai to būtu viegli lasīt, un izvēlieties skaidru un lasāmu fontu. Izvairieties no pārlieku dekoratīvu fontu lietošanas.
• Atstarpes un izkārtojums: Izmantojiet pietiekamas atstarpes un skaidru izkārtojumu, lai pakāpju komponenti būtu viegli pārskatīt un saprast.
• Neatbalstieties tikai uz krāsu: Neizmantojiet tikai krāsu informācijas nodošanai. Izmantojiet papildu vizuālos norādījumus, piemēram, ikonas vai tekstu, lai pastiprinātu krāsas nozīmi. Tas ir svarīgi lietotājiem ar krāsu aklumu.

5. Skaidras un kodolīgas iezīmes un instrukcijas

Izmantojiet skaidras un kodolīgas iezīmes un instrukcijas, lai vadītu lietotājus cauri daudzsoļu procesam. Izvairieties no žargona vai tehnisku terminu lietošanas, ko lietotāji varētu nesaprast. Ja iespējams, izmantojiet globāli atzītus terminus un frāzes.

Galvenie apsvērumi iezīmēm un instrukcijām:

• Aprakstošas iezīmes: Izmantojiet aprakstošas iezīmes katram procesa solim.
• Instrukcijas: Sniedziet skaidras instrukcijas katram solim.
• Kļūdu ziņojumi: Sniedziet skaidrus un noderīgus kļūdu ziņojumus, kad lietotāji pieļauj kļūdas.
• Progresa indikatori: Izmantojiet progresa indikatorus, lai parādītu lietotājiem, cik tālu viņi ir tikuši procesā.
• Lokalizācija: Apsveriet nepieciešamību lokalizēt vairākās valodās, lai apkalpotu globālu auditoriju.

6. Kļūdu apstrāde un validācija

Ieviesiet robustu kļūdu apstrādi un validāciju, lai novērstu lietotāju kļūdas un vadītu viņus uz veiksmīgu procesa pabeigšanu. Tas ir īpaši svarīgi uz formām balstītās pakāpju komponentēs.

Galvenie apsvērumi kļūdu apstrādei un validācijai:

• Reāllaika validācija: Validējiet lietotāja ievadi reāllaikā, lai sniegtu tūlītēju atgriezenisko saiti.
• Skaidri kļūdu ziņojumi: Sniedziet skaidrus un konkrētus kļūdu ziņojumus, kas paskaidro, kas nogāja greizi un kā to labot.
• Kļūdu novietojums: Novietojiet kļūdu ziņojumus tuvu attiecīgajiem formas laukiem.
• Novērst iesniegšanu: Neļaujiet lietotājiem iesniegt formu, ja tajā ir kļūdas.
• Kļūdu ziņojumu pieejamība: Nodrošiniet, ka kļūdu ziņojumi ir pieejami lietotājiem ar invaliditāti, ieskaitot tos, kuri izmanto ekrāna lasītājus. Izmantojiet ARIA atribūtus, lai saistītu kļūdu ziņojumus ar attiecīgajiem formas laukiem.

7. Testēšana ar palīgtehnoloģijām

Visefektīvākais veids, kā nodrošināt jūsu pakāpju komponentes pieejamību, ir to testēt ar palīgtehnoloģijām, piemēram, ekrāna lasītājiem, tastatūras navigāciju un balss atpazīšanas programmatūru. Tas palīdzēs jums identificēt un novērst jebkādas pieejamības problēmas, kas var nebūt pamanāmas vizuālās pārbaudes laikā.

Populāri ekrāna lasītāji ietver:

• NVDA (NonVisual Desktop Access): Bezmaksas un atvērtā koda ekrāna lasītājs operētājsistēmai Windows.
• JAWS (Job Access With Speech): Komerciāls ekrāna lasītājs operētājsistēmai Windows.
• VoiceOver: Ekrāna lasītājs, kas iebūvēts macOS un iOS.

8. Mobilā pieejamība

Nodrošiniet, ka jūsu pakāpju komponente ir pieejama mobilajās ierīcēs. Tas ietver pārliecināšanos, ka komponente ir responsīva, ka pieskārienu mērķi ir pietiekami lieli un ka komponente labi darbojas ar ekrāna lasītājiem mobilajās ierīcēs.

Galvenie apsvērumi mobilajai pieejamībai:

• Responsīvs dizains: Izmantojiet responsīvā dizaina tehnikas, lai nodrošinātu, ka pakāpju komponente pielāgojas dažādiem ekrāna izmēriem.
• Pieskārienu mērķi: Pārliecinieties, ka pieskārienu mērķi ir pietiekami lieli un ar pietiekamu atstarpi starp tiem, lai novērstu nejaušus pieskārienus.
• Mobilie ekrāna lasītāji: Testējiet pakāpju komponenti ar ekrāna lasītājiem mobilajās ierīcēs.
• Orientācija: Testējiet gan ainavas, gan portreta režīmā.

9. Koncentrējieties uz progresīvo uzlabošanu

Ieviesiet pakāpju komponenti, domājot par progresīvo uzlabošanu. Tas nozīmē nodrošināt pamata, funkcionālu pieredzi visiem lietotājiem un pēc tam uzlabot pieredzi lietotājiem ar spējīgākām pārlūkprogrammām un palīgtehnoloģijām.

Piemēram, sākotnēji jūs varētu pasniegt daudzsoļu procesu kā vienu garu formu un pēc tam to progresīvi uzlabot par pakāpju komponenti lietotājiem ar iespējotu JavaScript. Tas nodrošina, ka lietotāji ar invaliditāti vai lietotāji ar vecākām pārlūkprogrammām joprojām var pabeigt procesu, pat ja viņi nevar izmantot pilnvērtīgu pakāpju komponenti.

10. Dokumentācija un piemēri

Nodrošiniet skaidru dokumentāciju un piemērus, kā izmantot pakāpju komponenti, ieskaitot informāciju par pieejamības labākajām praksēm. Tas palīdzēs citiem izstrādātājiem veidot pieejamas lietojumprogrammas, izmantojot jūsu komponenti.

Iekļaujiet informāciju par:

• Nepieciešamajiem ARIA atribūtiem.
• Tastatūras mijiedarbībām.
• Stila apsvērumiem.
• Koda fragmentu piemēriem.

Pieejamu pakāpju komponenšu piemēri

Šeit ir daži piemēri, kā ieviest pieejamas pakāpju komponentes dažādās ietvarprogrammās un bibliotēkās:

• React: Bibliotēkas, piemēram, Reach UI un ARIA-Kit, nodrošina iepriekš sagatavotas pieejamas komponentes, ieskaitot pakāpju komponentes, kuras varat izmantot savās React lietojumprogrammās. Šīs bibliotēkas paveic lielu daļu pieejamības darba jūsu vietā.
• Angular: Angular Material nodrošina pakāpju komponenti ar iebūvētām pieejamības funkcijām.
• Vue.js: Ir vairākas Vue.js komponenšu bibliotēkas, kas piedāvā pieejamas pakāpju komponentes, piemēram, Vuetify un Element UI.
• Vienkāršs HTML/CSS/JavaScript: Lai gan sarežģītāk, ir iespējams izveidot pieejamas pakāpju komponentes, izmantojot semantisko HTML, ARIA atribūtus un JavaScript, lai pārvaldītu stāvokli un uzvedību.

Biežākās kļūdas, no kurām jāizvairās

• WCAG ignorēšana: WCAG vadlīniju neievērošana var radīt būtiskus pieejamības šķēršļus.
• Nepietiekams kontrasts: Zems kontrasts starp tekstu un fonu var apgrūtināt satura lasīšanu lietotājiem ar vāju redzi.
• Tastatūras slazdi: Tastatūras slazdu izveidošana var liegt lietotājiem pārvietoties pa pakāpju komponenti.
• Trūkstoši ARIA atribūti: ARIA atribūtu neizmantošana var apgrūtināt palīgtehnoloģijām saprast pakāpju komponentes struktūru un mērķi.
• Testēšanas trūkums: Pakāpju komponentes netestēšana ar palīgtehnoloģijām var novest pie neatklātām pieejamības problēmām.
• Sarežģītas vizuālās metaforas: Ļoti vizuālu vai animētu soļu izmantošana var būt mulsinoša lietotājiem ar kognitīviem traucējumiem. Tiecieties pēc skaidrības un vienkāršības.

Noslēgums

Pieejamu pakāpju komponenšu izveide ir būtiska, lai nodrošinātu, ka visi lietotāji var veiksmīgi pārvietoties daudzsoļu procesos. Ievērojot šajā rakstā izklāstītās vadlīnijas un testējot savas komponentes ar palīgtehnoloģijām, jūs varat radīt iekļaujošu lietotāja pieredzi, kas atbilst lietotāju ar dažādām spējām vajadzībām neatkarīgi no viņu atrašanās vietas vai kultūras piederības. Atcerieties, ka pieejamība nav tikai funkcija; tas ir labs UI/UX dizaina pamataspekts.

Koncentrējoties uz semantisko HTML, ARIA atribūtiem, pieejamību ar tastatūru, vizuālo dizainu, skaidrām iezīmēm, kļūdu apstrādi un testēšanu, jūs varat izveidot pakāpju komponentes, kas ir gan lietojamas, gan pieejamas. Tas ne tikai sniedz labumu lietotājiem ar invaliditāti, bet arī uzlabo kopējo lietotāja pieredzi visiem.

Ieguldījums pieejamībā ir ieguldījums labākā, iekļaujošākā digitālajā pasaulē.