Žingsnių komponentai: prieinamumo užtikrinimas daugiapakopiuose procesuose

Pavyzdys:

<ol aria-label="Eiga"
  <li aria-current="step">1 žingsnis: Paskyros duomenys</li>
  <li>2 žingsnis: Pristatymo adresas</li>
  <li>3 žingsnis: Mokėjimo informacija</li>
  <li>4 žingsnis: Peržiūra ir patvirtinimas</li>
</ol>

2. ARIA atributai

ARIA (Accessible Rich Internet Applications) atributai suteikia papildomos semantinės informacijos pagalbinėms technologijoms. Naudokite ARIA atributus, kad pagerintumėte savo žingsnių komponento prieinamumą.

Svarbiausi ARIA atributai, į kuriuos reikia atsižvelgti:

• aria-label: Suteikia aprašomąją etiketę žingsnių komponentui.
• aria-current="step": Nurodo dabartinį proceso žingsnį.
• aria-describedby: Susieja žingsnį su aprašomuoju tekstu.
• aria-invalid: Nurodo, ar žingsnyje yra neteisingų duomenų.
• aria-required: Nurodo, ar žingsniui reikalingi duomenys.
• role="tablist", role="tab", role="tabpanel": Kai žingsniams naudojama į skirtukus panaši struktūra.
• aria-orientation="vertical" arba aria-orientation="horizontal": Praneša pagalbinei technologijai apie žingsnių išdėstymo kryptį.

Pavyzdys:

<div role="tablist" aria-label="Atsiskaitymo procesas">
  <button role="tab" aria-selected="true" aria-controls="step1" id="tab1">1 žingsnis: Pristatymas</button>
  <button role="tab" aria-selected="false" aria-controls="step2" id="tab2">2 žingsnis: Apmokėjimas</button>
  <button role="tab" aria-selected="false" aria-controls="step3" id="tab3">3 žingsnis: Peržiūra</button>
</div>
<div role="tabpanel" id="step1" aria-labelledby="tab1"><!-- Pristatymo formos turinys --></div>
<div role="tabpanel" id="step2" aria-labelledby="tab2" hidden><!-- Apmokėjimo formos turinys --></div>
<div role="tabpanel" id="step3" aria-labelledby="tab3" hidden><!-- Peržiūros turinys --></div>

3. Prieinamumas klaviatūra

Užtikrinkite, kad vartotojai galėtų naršyti žingsnių komponente naudodami tik klaviatūrą. Tai labai svarbu vartotojams, kurie negali naudotis pele ar kitu žymėjimo įrenginiu.

Svarbiausi klaviatūros prieinamumo aspektai:

• Fokusavimo valdymas: Užtikrinkite, kad fokusas visada būtų matomas ir nuspėjamas. Naudokite CSS kontūrus ar kitus vizualius ženklus, kad nurodytumėte sufokusuotą elementą.
• Tabuliavimo tvarka: Užtikrinkite, kad tabuliavimo tvarka būtų logiška ir atitiktų vizualų žingsnių komponento srautą. Jei reikia, naudokite tabindex atributą tabuliavimo tvarkai valdyti.
• Klaviatūros įvykiai: Naudokite atitinkamus klaviatūros įvykius (pvz., Enter klavišą, tarpo klavišą), kad aktyvuotumėte žingsnius ar naršytumėte tarp jų.
• Praleidimo nuorodos: Pateikite praleidimo nuorodą, kad vartotojai galėtų apeiti žingsnių komponentą, jei jiems jo nereikia naudoti.

Pavyzdys:

<a href="#content" class="skip-link">Pereiti prie pagrindinio turinio</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. Vizualinis dizainas ir kontrastas

Atkreipkite dėmesį į vizualinį dizainą ir kontrastą, kad užtikrintumėte, jog žingsnių komponentas būtų lengvai matomas ir suprantamas. Tai ypač svarbu vartotojams su silpnu regėjimu ar spalvų suvokimo sutrikimais.

Svarbiausi vizualinio dizaino ir kontrasto aspektai:

• Spalvų kontrastas: Užtikrinkite, kad teksto ir fono spalvų kontrastas atitiktų WCAG kontrasto reikalavimus. Naudokite įrankius, tokius kaip WebAIM Contrast Checker, kontrasto santykiams patikrinti.
• Vizualūs ženklai: Naudokite aiškius vizualius ženklus, kad nurodytumėte dabartinį žingsnį, baigtus žingsnius ir būsimus žingsnius.
• Šrifto dydis ir skaitomumas: Naudokite pakankamai didelį šrifto dydį, kad jį būtų lengva skaityti, ir pasirinkite aiškų bei skaitomą šriftą. Venkite pernelyg dekoratyvių šriftų.
• Tarpai ir išdėstymas: Naudokite pakankamai tarpų ir aiškų išdėstymą, kad žingsnių komponentą būtų lengva peržvelgti ir suprasti.
• Venkite remtis tik spalva: Nenaudokite tik spalvos informacijai perteikti. Naudokite papildomus vizualius ženklus, tokius kaip piktogramos ar tekstas, kad sustiprintumėte spalvos reikšmę. Tai svarbu vartotojams su spalvų suvokimo sutrikimais.

5. Aiškios ir glaustos etiketės bei instrukcijos

Naudokite aiškias ir glaustas etiketes bei instrukcijas, kad padėtumėte vartotojams pereiti daugiapakopį procesą. Venkite naudoti žargono ar techninių terminų, kurių vartotojai gali nesuprasti. Kur įmanoma, naudokite visame pasaulyje pripažintus terminus ir frazes.

Svarbiausi etikečių ir instrukcijų aspektai:

• Aprašomosios etiketės: Naudokite aprašomąsias etiketes kiekvienam proceso žingsniui.
• Instrukcijos: Pateikite aiškias instrukcijas kiekvienam žingsniui.
• Klaidų pranešimai: Pateikite aiškius ir naudingus klaidų pranešimus, kai vartotojai padaro klaidų.
• Eigos indikatoriai: Naudokite eigos indikatorius, kad parodytumėte vartotojams, kiek jie pažengė procese.
• Lokalizacija: Apsvarstykite lokalizacijos į kelias kalbas poreikį, kad prisitaikytumėte prie pasaulinės auditorijos.

6. Klaidų tvarkymas ir tikrinimas

Įdiekite patikimą klaidų tvarkymą ir tikrinimą, kad išvengtumėte vartotojų klaidų ir padėtumėte jiems sėkmingai užbaigti procesą. Tai ypač svarbu formomis pagrįstuose žingsnių komponentuose.

Svarbiausi klaidų tvarkymo ir tikrinimo aspektai:

• Tikrinimas realiuoju laiku: Tikrinkite vartotojo įvestį realiuoju laiku, kad pateiktumėte neatidėliotiną grįžtamąjį ryšį.
• Aiškiūs klaidų pranešimai: Pateikite aiškius ir konkrečius klaidų pranešimus, kurie paaiškina, kas nutiko negerai ir kaip tai ištaisyti.
• Klaidų pranešimų vieta: Talpinkite klaidų pranešimus arti atitinkamų formos laukų.
• Neleisti pateikti: Neleiskite vartotojams pateikti formos, jei joje yra klaidų.
• Klaidų pranešimų prieinamumas: Užtikrinkite, kad klaidų pranešimai būtų prieinami vartotojams su negalia, įskaitant tuos, kurie naudoja ekrano skaitytuvus. Naudokite ARIA atributus, kad susietumėte klaidų pranešimus su atitinkamais formos laukais.

7. Testavimas su pagalbinėmis technologijomis

Efektyviausias būdas užtikrinti, kad jūsų žingsnių komponentas yra prieinamas, yra jį išbandyti su pagalbinėmis technologijomis, tokiomis kaip ekrano skaitytuvai, naršymas klaviatūra ir balso atpažinimo programinė įranga. Tai padės jums nustatyti ir ištaisyti bet kokias prieinamumo problemas, kurios gali būti nepastebimos vizualiai tikrinant.

Populiarūs ekrano skaitytuvai:

• NVDA (NonVisual Desktop Access): Nemokamas ir atvirojo kodo ekrano skaitytuvas, skirtas „Windows“.
• JAWS (Job Access With Speech): Komercinis ekrano skaitytuvas, skirtas „Windows“.
• VoiceOver: Ekrano skaitytuvas, integruotas į macOS ir iOS.

8. Prieinamumas mobiliuosiuose įrenginiuose

Užtikrinkite, kad jūsų žingsnių komponentas būtų prieinamas mobiliuosiuose įrenginiuose. Tai apima užtikrinimą, kad komponentas būtų prisitaikantis, kad lietimo taikiniai būtų pakankamai dideli ir kad komponentas gerai veiktų su ekrano skaitytuvais mobiliuosiuose įrenginiuose.

Svarbiausi mobiliojo prieinamumo aspektai:

• Prisitaikantis dizainas: Naudokite prisitaikančio dizaino technikas, kad užtikrintumėte, jog žingsnių komponentas prisitaiko prie skirtingų ekrano dydžių.
• Lietimo taikiniai: Įsitikinkite, kad lietimo taikiniai yra pakankamai dideli ir tarp jų yra pakankamai tarpo, kad išvengtumėte atsitiktinių paspaudimų.
• Mobiliųjų įrenginių ekrano skaitytuvai: Išbandykite žingsnių komponentą su ekrano skaitytuvais mobiliuosiuose įrenginiuose.
• Orientacija: Išbandykite tiek gulsčiuoju, tiek stačiuoju režimais.

9. Dėmesys laipsniškam tobulinimui

Įdiekite žingsnių komponentą atsižvelgdami į laipsnišką tobulinimą. Tai reiškia, kad reikia suteikti pagrindinę, funkcionalią patirtį visiems vartotojams, o tada pagerinti patirtį tiems vartotojams, kurie turi pajėgesnes naršykles ir pagalbines technologijas.

Pavyzdžiui, iš pradžių galėtumėte pateikti daugiapakopį procesą kaip vieną ilgą formą, o tada laipsniškai jį patobulinti į žingsnių komponentą vartotojams, kurių naršyklėje įjungtas „JavaScript“. Tai užtikrina, kad vartotojai su negalia arba vartotojai su senesnėmis naršyklėmis vis tiek galės užbaigti procesą, net jei jie negali naudoti viso žingsnių komponento.

10. Dokumentacija ir pavyzdžiai

Pateikite aiškią dokumentaciją ir pavyzdžių, kaip naudoti žingsnių komponentą, įskaitant informaciją apie geriausias prieinamumo praktikas. Tai padės kitiems kūrėjams kurti prieinamas programas naudojant jūsų komponentą.

Įtraukite informaciją apie:

• Reikalingus ARIA atributus.
• Sąveiką klaviatūra.
• Stiliaus ypatumus.
• Kodo pavyzdžius.

Prieinamų žingsnių komponentų pavyzdžiai

Štai keletas pavyzdžių, kaip įdiegti prieinamus žingsnių komponentus skirtingose sistemose ir bibliotekose:

• React: Bibliotekos, tokios kaip „Reach UI“ ir „ARIA-Kit“, teikia iš anksto paruoštus prieinamus komponentus, įskaitant žingsnių komponentus, kuriuos galite naudoti savo „React“ programose. Šios bibliotekos atlieka didelę dalį prieinamumo darbo už jus.
• Angular: „Angular Material“ teikia žingsnių komponentą su integruotomis prieinamumo funkcijomis.
• Vue.js: Yra keletas „Vue.js“ komponentų bibliotekų, kurios siūlo prieinamus žingsnių komponentus, pavyzdžiui, „Vuetify“ ir „Element UI“.
• Grynas HTML/CSS/JavaScript: Nors tai sudėtingiau, įmanoma sukurti prieinamus žingsnių komponentus naudojant semantinį HTML, ARIA atributus ir „JavaScript“ būsenai ir elgsenai valdyti.

Dažniausios klaidos, kurių reikia vengti

• WCAG ignoravimas: Nesilaikant WCAG gairių, gali kilti didelių prieinamumo kliūčių.
• Nepakankamas kontrastas: Dėl mažo kontrasto tarp teksto ir fono vartotojams su silpnu regėjimu gali būti sunku skaityti turinį.
• Klaviatūros spąstai: Sukūrus klaviatūros spąstus, vartotojai gali negalėti naršyti žingsnių komponente.
• Trūkstami ARIA atributai: Nenaudojant ARIA atributų, pagalbinėms technologijoms gali būti sunku suprasti žingsnių komponento struktūrą ir paskirtį.
• Testavimo trūkumas: Neišbandžius žingsnių komponento su pagalbinėmis technologijomis, gali likti neaptiktų prieinamumo problemų.
• Sudėtingos vizualinės metaforos: Labai vizualūs ar animuoti žingsniai gali klaidinti vartotojus su kognityvinėmis negaliomis. Siekite aiškumo ir paprastumo.

Išvada

Prieinamų žingsnių komponentų kūrimas yra būtinas siekiant užtikrinti, kad visi vartotojai galėtų sėkmingai pereiti daugiapakopius procesus. Laikydamiesi šiame straipsnyje aprašytų gairių ir testuodami savo komponentus su pagalbinėmis technologijomis, galite sukurti įtraukias vartotojo patirtis, pritaikytas įvairių gebėjimų vartotojams, nepriklausomai nuo jų buvimo vietos ar kultūrinės aplinkos. Atminkite, kad prieinamumas yra ne tik funkcija; tai pagrindinis gero UI/UX dizaino aspektas.

Sutelkdami dėmesį į semantinį HTML, ARIA atributus, prieinamumą klaviatūra, vizualinį dizainą, aiškias etiketes, klaidų tvarkymą ir testavimą, galite sukurti žingsnių komponentus, kurie yra ir naudingi, ir prieinami. Tai ne tik naudinga vartotojams su negalia, bet ir pagerina bendrą vartotojo patirtį visiems.

Investavimas į prieinamumą yra investicija į geresnį, labiau įtraukų skaitmeninį pasaulį.