Sammkomponendid: juurdepääsetavuse tagamine mitmeastmelistes protsessides

Näide:

<ol aria-label="Edenemine">
  <li aria-current="step">Samm 1: Konto andmed</li>
  <li>Samm 2: Tarneaadress</li>
  <li>Samm 3: Makseinfo</li>
  <li>Samm 4: Ülevaatus ja kinnitamine</li>
</ol>

2. ARIA atribuudid

ARIA (Accessible Rich Internet Applications ehk juurdepääsetavad rikkalikud internetirakendused) atribuudid pakuvad abitehnoloogiatele täiendavat semantilist teavet. Kasutage ARIA atribuute oma sammkomponendi juurdepääsetavuse parandamiseks.

Peamised ARIA atribuudid, mida kaaluda:

• aria-label: Pakub sammkomponendile kirjeldava sildi.
• aria-current="step": Näitab protsessi praegust sammu.
• aria-describedby: Seostab sammu kirjeldava tekstiga.
• aria-invalid: Näitab, kas samm sisaldab kehtetuid andmeid.
• aria-required: Näitab, kas samm nõuab andmeid.
• role="tablist", role="tab", role="tabpanel": Kui kasutatakse sammude jaoks vahekaardilaadset struktuuri.
• aria-orientation="vertical" või aria-orientation="horizontal": Edastab sammude paigutuse suuna abitehnoloogiatele.

Näide:

<div role="tablist" aria-label="Ostuprotsess">
  <button role="tab" aria-selected="true" aria-controls="step1" id="tab1">Samm 1: Tarne</button>
  <button role="tab" aria-selected="false" aria-controls="step2" id="tab2">Samm 2: Arveldus</button>
  <button role="tab" aria-selected="false" aria-controls="step3" id="tab3">Samm 3: Ülevaade</button>
</div>
<div role="tabpanel" id="step1" aria-labelledby="tab1"><!-- Tarnevormi sisu --></div>
<div role="tabpanel" id="step2" aria-labelledby="tab2" hidden><!-- Arveldusvormi sisu --></div>
<div role="tabpanel" id="step3" aria-labelledby="tab3" hidden><!-- Ülevaate sisu --></div>

3. Klaviatuuri juurdepääsetavus

Tagage, et kasutajad saaksid sammkomponendis navigeerida ainult klaviatuuri abil. See on ülioluline kasutajatele, kes ei saa hiirt või muud osutusseadet kasutada.

Peamised kaalutlused klaviatuuri juurdepääsetavuse osas:

• Fookuse haldamine: Veenduge, et fookus oleks alati nähtav ja prognoositav. Kasutage fookuses oleva elemendi tähistamiseks CSS-i piirjooni või muid visuaalseid vihjeid.
• Tabulatsioonijärjekord: Veenduge, et tabulatsioonijärjekord oleks loogiline ja järgiks sammkomponendi visuaalset voogu. Vajadusel kasutage tabulatsioonijärjekorra juhtimiseks atribuuti tabindex.
• Klaviatuurisündmused: Kasutage sammude aktiveerimiseks või nende vahel navigeerimiseks sobivaid klaviatuurisündmusi (nt Enter-klahv, tühikuklahv).
• Vahelejätmise lingid: Pakkuge vahelejätmise linki, et kasutajad saaksid sammkomponendist mööda minna, kui nad seda kasutama ei pea.

Näide:

<a href="#content" class="skip-link">Liigu põhisisu juurde</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. Visuaalne disain ja kontrastsus

Pöörake tähelepanu visuaalsele disainile ja kontrastsusele, et tagada sammkomponendi lihtne nähtavus ja arusaadavus. See on eriti oluline halva nägemisega või värvipimedatele kasutajatele.

Peamised kaalutlused visuaalse disaini ja kontrastsuse osas:

• Värvikontrastsus: Tagage, et teksti ja taustavärvide kontrastsus vastaks WCAG kontrastsusnõuetele. Kasutage kontrastsussuhete kontrollimiseks tööriistu nagu WebAIM Contrast Checker.
• Visuaalsed vihjed: Kasutage selgeid visuaalseid vihjeid praeguse, lõpetatud ja tulevaste sammude tähistamiseks.
• Fondi suurus ja loetavus: Kasutage piisavalt suurt fondisuurust, et seda oleks lihtne lugeda, ja valige selge ning loetav font. Vältige liiga dekoratiivsete fontide kasutamist.
• Reavahe ja paigutus: Kasutage piisavalt reavahet ja selget paigutust, et sammkomponenti oleks lihtne skaneerida ja mõista.
• Vältige ainult värvile tuginemist: Ärge kasutage teabe edastamiseks ainult värvi. Kasutage värvi tähenduse tugevdamiseks täiendavaid visuaalseid vihjeid, näiteks ikoone või teksti. See on oluline värvipimedatele kasutajatele.

5. Selged ja lühikesed sildid ning juhised

Kasutage selgeid ja lühikesi silte ning juhiseid, et suunata kasutajaid läbi mitmeastmelise protsessi. Vältige žargooni või tehniliste terminite kasutamist, mida kasutajad ei pruugi mõista. Võimaluse korral kasutage globaalselt tunnustatud termineid ja fraase.

Peamised kaalutlused siltide ja juhiste osas:

• Kirjeldavad sildid: Kasutage protsessi iga sammu jaoks kirjeldavaid silte.
• Juhised: Pakkuge iga sammu jaoks selgeid juhiseid.
• Veateated: Pakkuge selgeid ja abistavaid veateateid, kui kasutajad teevad vigu.
• Edenemisindikaatorid: Kasutage edenemisindikaatoreid, et näidata kasutajatele, kui kaugele nad protsessis on jõudnud.
• Lokaliseerimine: Kaaluge vajadust lokaliseerida mitmesse keelde, et rahuldada globaalse publiku vajadusi.

6. Veakäsitlus ja valideerimine

Rakendage töökindel veakäsitlus ja valideerimine, et vältida kasutajate vigu ja suunata neid protsessi edukalt lõpule viima. See on eriti oluline vormipõhiste sammkomponentide puhul.

Peamised kaalutlused veakäsitluse ja valideerimise osas:

• Reaalajas valideerimine: Valideerige kasutaja sisendit reaalajas, et anda kohest tagasisidet.
• Selged veateated: Pakkuge selgeid ja konkreetseid veateateid, mis selgitavad, mis läks valesti ja kuidas seda parandada.
• Vea paigutus: Paigutage veateated vastavate vormiväljade lähedale.
• Esitamise vältimine: Vältige vormi esitamist, kui esineb vigu.
• Veateadete juurdepääsetavus: Veenduge, et veateated oleksid juurdepääsetavad puuetega kasutajatele, sealhulgas ekraanilugejate kasutajatele. Kasutage ARIA atribuute veateadete seostamiseks vastavate vormiväljadega.

7. Testimine abitehnoloogiatega

Kõige tõhusam viis oma sammkomponendi juurdepääsetavuse tagamiseks on testida seda abitehnoloogiatega, näiteks ekraanilugejate, klaviatuurinavigatsiooni ja häältuvastustarkvaraga. See aitab teil tuvastada ja parandada juurdepääsetavuse probleeme, mis ei pruugi visuaalsel kontrollimisel ilmneda.

Populaarsed ekraanilugejad hõlmavad:

• NVDA (NonVisual Desktop Access): Tasuta ja avatud lähtekoodiga ekraanilugeja Windowsile.
• JAWS (Job Access With Speech): Kommertslik ekraanilugeja Windowsile.
• VoiceOver: macOS-i ja iOS-i sisseehitatud ekraanilugeja.

8. Mobiilne juurdepääsetavus

Veenduge, et teie sammkomponent oleks juurdepääsetav ka mobiilseadmetes. See hõlmab komponendi kohanduvuse tagamist, puutealade piisavalt suurt suurust ning komponendi head toimimist ekraanilugejatega mobiilseadmetes.

Peamised kaalutlused mobiilse juurdepääsetavuse osas:

• Kohanduv disain: Kasutage kohanduva disaini tehnikaid, et tagada sammkomponendi kohanemine erinevate ekraanisuurustega.
• Puutealad: Veenduge, et puutealad oleksid piisavalt suured ja nende vahel oleks piisavalt ruumi, et vältida juhuslikke puudutusi.
• Mobiilsed ekraanilugejad: Testige sammkomponenti ekraanilugejatega mobiilseadmetes.
• Orientatsioon: Testige nii horisontaal- kui ka vertikaalrežiimis.

9. Keskenduge progressiivsele täiustamisele

Rakendage sammkomponenti progressiivse täiustamise põhimõttel. See tähendab põhilise, funktsionaalse kogemuse pakkumist kõigile kasutajatele ja seejärel kogemuse täiustamist võimekamate brauserite ja abitehnoloogiatega kasutajatele.

Näiteks võite esialgu esitada mitmeastmelise protsessi ühe pika vormina ja seejärel täiustada seda progressiivselt sammkomponendiks kasutajatele, kellel on JavaScript lubatud. See tagab, et puuetega või vanemate brauseritega kasutajad saavad protsessi siiski lõpule viia, isegi kui nad ei saa kasutada täielikku sammkomponenti.

10. Dokumentatsioon ja näited

Pakkuge selget dokumentatsiooni ja näiteid sammkomponendi kasutamise kohta, sealhulgas teavet juurdepääsetavuse parimate tavade kohta. See aitab teistel arendajatel luua teie komponendi abil juurdepääsetavaid rakendusi.

Kaasake teave järgmise kohta:

• Nõutavad ARIA atribuudid.
• Klaviatuuri interaktsioonid.
• Stiilikaalutlused.
• Näidiskoodi lõigud.

Juurdepääsetavate sammkomponentide näited

Siin on mõned näited, kuidas rakendada juurdepääsetavaid sammkomponente erinevates raamistikes ja teekides:

• React: Teegid nagu Reach UI ja ARIA-Kit pakuvad eelnevalt valmistatud juurdepääsetavaid komponente, sealhulgas sammkomponente, mida saate oma Reacti rakendustes kasutada. Need teegid teevad suure osa juurdepääsetavuse tööst teie eest ära.
• Angular: Angular Material pakub sammkomponenti sisseehitatud juurdepääsetavuse funktsioonidega.
• Vue.js: On mitmeid Vue.js komponenditeeke, mis pakuvad juurdepääsetavaid sammkomponente, näiteks Vuetify ja Element UI.
• Puhas HTML/CSS/JavaScript: Kuigi see on keerulisem, on võimalik luua juurdepääsetavaid sammkomponente, kasutades semantilist HTML-i, ARIA atribuute ja JavaScripti oleku ja käitumise haldamiseks.

Levinud vead, mida vältida

• WCAG ignoreerimine: WCAG suuniste eiramine võib põhjustada olulisi juurdepääsetavuse takistusi.
• Ebapiisav kontrastsus: Madal kontrastsus teksti ja tausta vahel võib halva nägemisega kasutajatel sisu lugemise raskeks teha.
• Klaviatuurilõksud: Klaviatuurilõksude loomine võib takistada kasutajatel sammkomponendis navigeerimist.
• Puuduvad ARIA atribuudid: ARIA atribuutide mittekasutamine võib muuta abitehnoloogiate jaoks sammkomponendi struktuuri ja eesmärgi mõistmise raskeks.
• Testimise puudumine: Sammkomponendi testimata jätmine abitehnoloogiatega võib põhjustada avastamata juurdepääsetavuse probleeme.
• Keerulised visuaalsed metafoorid: Väga visuaalsete või animeeritud sammude kasutamine võib olla kognitiivsete puuetega kasutajatele segadust tekitav. Püüdke selguse ja lihtsuse poole.

Kokkuvõte

Juurdepääsetavate sammkomponentide loomine on hädavajalik, et tagada kõigi kasutajate edukas navigeerimine mitmeastmelistes protsessides. Järgides selles artiklis toodud suuniseid ja testides oma komponente abitehnoloogiatega, saate luua kaasavaid kasutajakogemusi, mis vastavad erinevate võimetega kasutajate vajadustele, olenemata nende asukohast või kultuurilisest taustast. Pidage meeles, et juurdepääsetavus ei ole lihtsalt funktsioon; see on hea UI/UX disaini fundamentaalne aspekt.

Keskendudes semantilisele HTML-ile, ARIA atribuutidele, klaviatuuri juurdepääsetavusele, visuaalsele disainile, selgetele siltidele, veakäsitlusele ja testimisele, saate luua sammkomponente, mis on nii kasutatavad kui ka juurdepääsetavad. See ei too kasu mitte ainult puuetega kasutajatele, vaid parandab ka üldist kasutajakogemust kõigi jaoks.

Juurdepääsetavusse investeerimine on investeering paremasse ja kaasavamasse digitaalsesse maailma.