Dialoogide haldamine: juurdepääsetavuse tagamine modaalsetes ja mittemodaalsetes akendes

Kasutajaliidese (UI) disaini valdkonnas mängivad dialoogid olulist rolli kasutajatega suhtlemisel, teabe edastamisel või sisendi küsimisel. Need dialoogid võivad ilmneda kas modaalsete või mittemodaalsete akendena, millest igaüks esitab unikaalseid juurdepääsetavuse kaalutlusi. See juhend süveneb dialoogide haldamise keerukustesse, keskendudes juurdepääsetavuse tagamisele kõigile kasutajatele, olenemata nende võimetest, järgides väljakujunenud standardeid nagu veebisisu juurdepääsetavuse suunised (WCAG) ja kasutades ligipääsetavate rikaste internetirakenduste (ARIA) atribuute.

Modaalsete ja mittemodaalsete dialoogide mõistmine

Enne juurdepääsetavuse kaalutlustesse süvenemist on oluline määratleda, mida me mõtleme modaalsete ja mittemodaalsete dialoogide all:

• Modaalsed dialoogid: Modaalne dialoog, tuntud ka kui modaalne aken, on kasutajaliidese element, mis loob režiimi, mis keelab põhiakna, kuid hoiab selle nähtavana koos modaalse aknaga kui alamaknaga. Kasutajad peavad modaalse dialoogiga suhtlema ja selle tavaliselt sulgema (nt klõpsates kinnitusnupul või "X" ikoonil), enne kui nad saavad naasta põhirakenduse aknasse. Levinud näited on teavitusaknad, kinnitusviibad ja seadete paneelid.
• Mittemodaalsed dialoogid: Seevastu mittemodaalne dialoog võimaldab kasutajatel suhelda samaaegselt nii dialoogi kui ka põhirakenduse aknaga. Dialoog jääb avatuks, blokeerimata juurdepääsu teistele rakenduse osadele. Näideteks on tööriistapalettid graafikatöötlustarkvaras või vestlusaknad sõnumsiderakendustes.

Dialoogide juurdepääsetavuse kaalutlused

Juurdepääsetavus on kasutajaliidese disainis esmatähtis. Dialoogide juurdepääsetavuse tagamine tähendab, et kõik kasutajad, sealhulgas puuetega inimesed, saavad neid tõhusalt kasutada. See hõlmab mitmesuguste kaalutluste käsitlemist, sealhulgas:

• Klaviatuuriga navigeerimine: Kasutajad, kes kasutavad klaviatuuriga navigeerimist, peaksid saama hõlpsasti dialoogidesse navigeerida, nende sees liikuda ja neist väljuda.
• Ekraanilugeja ühilduvus: Ekraanilugejad peaksid täpselt teada andma dialoogi eesmärgi ja sisu ning kõik selles sisalduvad interaktiivsed elemendid.
• Fookuse haldamine: Nõuetekohane fookuse haldamine tagab, et klaviatuuri fookus on dialoogi avamisel sobivalt paigutatud, liigub dialoogi sees ja naaseb dialoogi sulgemisel algsele elemendile.
• Visuaalne selgus: Dialoogidel peab olema piisav kontrast teksti ja taustavärvide vahel ning visuaalne paigutus peab olema selge ja kergesti mõistetav.
• Puuteala suurus: Puutetundlike liideste puhul peavad dialoogide interaktiivsetel elementidel olema piisavalt suured puutealad.
• Kognitiivne juurdepääsetavus: Dialoogide keel ja sisu peavad olema selged, lühikesed ja kergesti mõistetavad, minimeerides kognitiivset koormust.

ARIA atribuudid dialoogide juurdepääsetavuse tagamiseks

ARIA (Accessible Rich Internet Applications) atribuudid pakuvad semantilist teavet abistavatele tehnoloogiatele, nagu ekraanilugejad, võimaldades neil kasutajaliidese elemente täpsemalt tõlgendada ja esitada. Peamised ARIA atribuudid dialoogide juurdepääsetavuse tagamiseks on:

• `role="dialog"` või `role="alertdialog"`: See atribuut identifitseerib elemendi dialoogina. `alertdialog` tuleks kasutada dialoogide puhul, mis edastavad olulist või kiiret teavet.
• `aria-labelledby="[pealkirja ID]"`: See atribuut seostab dialoogi pealkirja elemendiga, mis kirjeldab selle eesmärki.
• `aria-describedby="[kirjelduse ID]"`: See atribuut seostab dialoogi kirjeldava elemendiga, mis pakub täiendavat konteksti või juhiseid.
• `aria-modal="true"`: See atribuut näitab, et dialoog on modaalne, takistades interaktsiooni elementidega väljaspool dialoogi. See on kriitilise tähtsusega modaalse käitumise edastamisel abistavatele tehnoloogiatele.
• `tabindex="0"`: `tabindex="0"` seadmine dialoogis olevale elemendile võimaldab sellel saada fookuse klaviatuuriga navigeerimise kaudu.

Modaalsete dialoogide juurdepääsetavus: parimad praktikad

Modaalsed dialoogid esitavad oma blokeeriva olemuse tõttu unikaalseid juurdepääsetavuse väljakutseid. Siin on mõned parimad praktikad modaalsete dialoogide juurdepääsetavuse tagamiseks:

1. Nõuetekohased ARIA atribuudid

Nagu varem mainitud, on `role="dialog"` (või `role="alertdialog"` kiireloomuliste sõnumite puhul), `aria-labelledby`, `aria-describedby` ja `aria-modal="true"` kasutamine dialoogi ja selle eesmärgi tuvastamiseks abistavatele tehnoloogiatele ülioluline.

Näide:

<div role="dialog" aria-labelledby="confirmation-heading" aria-modal="true"> <h2 id="confirmation-heading">Kinnita kustutamine</h2> <p>Kas olete kindel, et soovite selle üksuse kustutada? Seda toimingut ei saa tagasi võtta.</p> <button>Kinnita</button> <button>Tühista</button> </div>

2. Fookuse haldamine

Kui modaalne dialoog avaneb, tuleks klaviatuuri fookus viivitamatult liigutada esimesele interaktiivsele elemendile dialoogi sees (nt esimesele nupule või sisestusväljale). Kui dialoog sulgub, peaks fookus naasma elemendile, mis dialoogi käivitas.

Rakendamise kaalutlused:

• JavaScript: Kasutage JavaScripti, et fookust programmilselt seadistada sobivale elemendile, kui dialoog avaneb ja sulgub.
• Fookuse lõksustamine: Rakendage fookuse lõksustamist, et tagada klaviatuuri fookuse püsimine dialoogi sees, kui see on avatud. See takistab kasutajatel kogemata dialoogist välja tabeldamist ja koha kaotamist. Seda saavutatakse sageli JavaScripti abil, mis kuulab tabeldusklahvi vajutusi ja vajadusel tsüklib fookuse tagasi dialoogi algusesse või lõppu.

Näide (kontseptuaalne JavaScript):

function openModal(modalId) { const modal = document.getElementById(modalId); modal.style.display = "block"; const firstFocusableElement = modal.querySelector('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'); firstFocusableElement.focus(); } function closeModal(modalId, triggeringElementId) { const modal = document.getElementById(modalId); modal.style.display = "none"; const triggeringElement = document.getElementById(triggeringElementId); triggeringElement.focus(); }

3. Klaviatuuri juurdepääsetavus

Veenduge, et kõikidele dialoogis olevatele interaktiivsetele elementidele pääseb juurde ja neid saab aktiveerida klaviatuuri abil. See hõlmab nuppe, linke, vormivälju ja kõiki kohandatud juhtelemente.

Kaalutlused:

• Tabulatsioonijärjestus: Tabulatsioonijärjestus peab olema loogiline ja intuitiivne. Üldiselt peaks tabulatsioonijärjestus järgima dialoogi visuaalset paigutust.
• Klaviatuuri otseteed: Pakkuge klaviatuuri otseteid tavalistele toimingutele dialoogis (nt Escape-klahvi kasutamine dialoogi sulgemiseks või Enter-klahvi kasutamine toimingu kinnitamiseks).

4. Visuaalne disain

Modaalse dialoogi visuaalne disain peaks selgelt näitama, et see on põhirakenduse aknast eraldi. Seda on võimalik saavutada kontrastse taustavärvi, selgepiirilise äärise või varjuefekti abil. Lugevuse tagamiseks veenduge piisavas värvikontrastis teksti ja tausta vahel.

5. Semantiline HTML

Kasutage võimaluse korral semantilisi HTML-elemente. Näiteks kasutage <button> elemente nuppude jaoks, <label> elemente vormisisendite sildistamiseks ja <h2> või <h3> elemente pealkirjade jaoks.

6. Rahvusvahelistamine ja lokaliseerimine

Dialoogide kujundamisel ja rakendamisel arvestage erineva kultuuritaustaga kasutajate vajadustega. See hõlmab dialoogi sisu lokaliseeritud versioonide pakkumist ja dialoogi paigutuse kohandamist erinevatele teksti suundadele (nt paremalt vasakule keeled).

Näide: Kinnitusdialoog, mis palub kasutajal oma konto kustutada, peab olema iga sihtkeele jaoks täpselt ja kultuuriliselt sobivalt tõlgitud. Paigutus võib vajada ka kohandusi paremalt vasakule kirjutatavate keelte jaoks.

Mittemodaalsete dialoogide juurdepääsetavus: parimad praktikad

Mittemodaalsed dialoogid, kuigi vähem häirivad kui modaalsed dialoogid, nõuavad siiski hoolikat tähelepanu juurdepääsetavusele. Siin on mõned parimad praktikad:

1. Selge visuaalne eristus

Veenduge, et mittemodaalne dialoog on visuaalselt eristatav põhirakenduse aknast, et vältida segadust. Seda saab saavutada äärise, taustavärvi või peene varju abil.

2. Fookuse haldamine

Kuigi mittemodaalsed dialoogid ei blokeeri suhtlust põhiaknaga, on õige fookuse haldamine siiski ülioluline. Kui dialoog avaneb, tuleks fookus viia esimesele interaktiivsele elemendile dialoogi sees. Kasutajad peaksid saama hõlpsasti klaviatuuriga navigeerides dialoogi ja põhiakna vahel lülituda.

3. ARIA atribuudid

Kasutage `role="dialog"`, `aria-labelledby` ja `aria-describedby`, et anda abistavatele tehnoloogiatele semantilist teavet dialoogi kohta. `aria-modal="false"` või `aria-modal` atribuudi puudumine on oluline, et eristada mittemodaalseid dialooge modaalsetest.

Näide:

<div role="dialog" aria-labelledby="font-settings-heading"> <h2 id="font-settings-heading">Fondi seaded</h2> <label for="font-size">Fondi suurus:</label> <input type="number" id="font-size" value="12"> <button>Rakenda</button> </div>

4. Klaviatuuri juurdepääsetavus

Veenduge, et kõikidele dialoogis olevatele interaktiivsetele elementidele pääseb juurde ja neid saab aktiveerida klaviatuuri abil. Tabulatsioonijärjestus peab olema loogiline ja intuitiivne, võimaldades kasutajatel hõlpsasti navigeerida dialoogi ja põhiakna vahel.

5. Vältige kattumist

Vältige mittemodaalsete dialoogide paigutamist viisil, mis varjab olulist sisu põhirakenduse aknas. Dialoog peaks asuma selges ja ligipääsetavas kohas.

6. Teadlikkus ja kommunikatsioon

Kui mittemodaalne dialoog avaneb, on kasulik kasutajat visuaalselt või kuuldavalt (kasutades ARIA live-piirkondi) teavitada uue dialoogi ilmumisest, eriti kui see avaneb taustal ja ei pruugi olla kohe märgatav.

Praktilised näited ja koodilõigud

Vaatame mõningaid praktilisi näiteid ja koodilõike, et neid kontseptsioone illustreerida.

Näide 1: Modaalne kinnitusdialoog

<button id="delete-button" onclick="openModal('delete-confirmation-modal', 'delete-button')">Kustuta üksus</button> <div id="delete-confirmation-modal" role="dialog" aria-labelledby="delete-heading" aria-modal="true" style="display:none;"> <h2 id="delete-heading">Kinnita kustutamine</h2> <p>Kas olete kindel, et soovite selle üksuse kustutada? Seda toimingut ei saa tagasi võtta.</p> <button onclick="//Delete item logic; closeModal('delete-confirmation-modal', 'delete-button')">Kinnita</button> <button onclick="closeModal('delete-confirmation-modal', 'delete-button')">Tühista</button> </div>

Näide 2: Mittemodaalne fondi seadete dialoog

<button id="font-settings-button" onclick="openModal('font-settings-dialog', 'font-settings-button')">Fondi seaded</button> <div id="font-settings-dialog" role="dialog" aria-labelledby="font-settings-heading" style="display:none;"> <h2 id="font-settings-heading">Fondi seaded</h2> <label for="font-size">Fondi suurus:</label> <input type="number" id="font-size" value="12"><br> <label for="font-family">Fondi perekond:</label> <select id="font-family"> <option value="Arial">Arial</option> <option value="Verdana">Verdana</option> <option value="Times New Roman">Times New Roman</option> </select><br> <button onclick="//Apply font settings logic">Rakenda</button> </div>

Testimine ja valideerimine

Põhjalik testimine on dialoogide juurdepääsetavuse tagamiseks hädavajalik. See hõlmab:

• Manuaalne testimine: Kasutage klaviatuuri ja ekraanilugejat dialoogidega navigeerimiseks ja suhtlemiseks.
• Automatiseeritud testimine: Kasutage juurdepääsetavuse testimise tööriistu potentsiaalsete juurdepääsetavuse probleemide tuvastamiseks. Tööriistad nagu Axe DevTools, WAVE ja Lighthouse aitavad juurdepääsetavuse kontrolle automatiseerida.
• Kasutajatestimine: Viige läbi kasutajateste puuetega inimestega, et koguda tagasisidet dialoogide kasutatavuse ja juurdepääsetavuse kohta.

WCAG vastavus

Veebisisu juurdepääsetavuse suuniste (WCAG) järgimine on ligipääsetavate dialoogide loomisel ülioluline. Asjakohased WCAG edukriteeriumid hõlmavad:

• 1.1.1 Mittetekstiline sisu: Pakkuge tekstilisi alternatiive mittetekstilisele sisule (nt pildid, ikoonid).
• 1.3.1 Info ja seosed: Veenduge, et teave ja seosed on edastatud märgistuse või andmeatribuutide kaudu.
• 1.4.3 Kontrastsus (minimaalne): Tagage piisav kontrastsus teksti ja taustavärvide vahel.
• 2.1.1 Klaviatuur: Tehke kogu funktsionaalsus kättesaadavaks klaviatuurilt.
• 2.4.3 Fookuse järjestus: Veenduge, et fookuse järjestus on loogiline ja intuitiivne.
• 2.4.7 Fookus nähtav: Veenduge, et fookuse indikaator on alati nähtav.
• 3.2.1 Fookuses olles: Veenduge, et komponendid ei saaks ootamatult fookust.
• 4.1.2 Nimi, roll, väärtus: Veenduge, et kõigi kasutajaliidese komponentide nimi, roll ja väärtus on abistavate tehnoloogiate poolt programmiliselt määratavad.

Globaalsed kaalutlused

Globaalsele sihtrühmale dialoogide kujundamisel arvestage järgmist:

• Lokaliseerimine: Tõlkige kogu tekstiline sisu sobivatesse keeltesse.
• Rahvusvahelistamine: Veenduge, et dialoogi paigutus kohandub sobivalt erinevate teksti suundade ja kultuuriliste tavadega. Kuupäeva ja kellaaja vormingud, valuutasümbolid ja aadressivormingud varieeruvad kultuuriti märkimisväärselt.
• Kultuuriline tundlikkus: Vältige piltide või sümbolite kasutamist, mis võivad teatud kultuurides olla solvavad või sobimatud.

Näide: Jaapanis kasutatav dialoog võib vajada vertikaalse teksti paigutuse ja erinevate kuupäevavormingute toetust võrreldes Ameerika Ühendriikides kasutatava dialoogiga.

Kokkuvõte

Juurdepääsetavate dialoogide, nii modaalsete kui ka mittemodaalsete, loomine on kaasava kasutajaliidese disaini oluline aspekt. By following the best practices outlined in this guide, adhering to WCAG guidelines, and utilizing ARIA attributes effectively, developers can ensure that all users, regardless of their abilities, can interact with dialogs seamlessly and effectively. Pidage meeles, et juurdepääsetavus ei ole ainult vastavus; see on kaasavama ja õiglasema kasutajakogemuse loomine kõigile. Pidev testimine ja puuetega kasutajatelt tagasiside kogumine on ülioluline juurdepääsetavuse probleemide tuvastamiseks ja lahendamiseks ning üldise kasutajakogemuse parandamiseks. Eelistades juurdepääsetavust, saate luua dialooge, mis pole mitte ainult funktsionaalsed ja visuaalselt meeldivad, vaid ka kasutatavad ja nauditavad kõigile kasutajatele üle maailma.