Dialogų valdymas: modalinių ir nemodalinių langų prieinamumo užtikrinimas

Vartotojo sąsajos (UI) dizaino srityje dialogų langai atlieka lemiamą vaidmenį bendraujant su vartotojais, teikiant informaciją ar prašant įvesties. Šie dialogų langai gali būti modaliniai arba nemodaliniai, ir kiekvienas iš jų kelia unikalių prieinamumo iššūkių. Šiame vadove gilinamasi į dialogų valdymo subtilybes, daugiausia dėmesio skiriant prieinamumo užtikrinimui visiems vartotojams, nepriklausomai nuo jų gebėjimų, laikantis nustatytų standartų, tokių kaip Žiniatinklio turinio prieinamumo gairės (WCAG), ir naudojant Prieinamų turtingųjų interneto programų (ARIA) atributus.

Modalinių ir nemodalinių dialogų supratimas

Prieš pradedant nagrinėti prieinamumo aspektus, svarbu apibrėžti, ką reiškia modaliniai ir nemodaliniai dialogų langai:

Modaliniai dialogai: Modalinis dialogas, dar vadinamas modaliniu langu, yra vartotojo sąsajos elementas, sukuriantis režimą, kuris išjungia pagrindinį langą, tačiau palieka jį matomą su modaliniu langu kaip antriniu langu. Vartotojai privalo sąveikauti su modaliniu dialogu ir paprastai jį uždaryti (pvz., paspaudus patvirtinimo mygtuką arba „X“ piktogramą), kad galėtų grįžti į pagrindinį programos langą. Dažniausi pavyzdžiai yra perspėjimo langeliai, patvirtinimo užklausos ir nustatymų skydeliai.
Nemodaliniai dialogai: Priešingai, nemodalinis dialogas leidžia vartotojams vienu metu sąveikauti tiek su dialogu, tiek su pagrindiniu programos langu. Dialogas lieka atidarytas, neblokuodamas prieigos prie kitų programos dalių. Pavyzdžiai apima įrankių paletes grafikos redagavimo programinėje įrangoje arba pokalbių langus pranešimų siuntimo programose.

Dialogų prieinamumo aspektai

Prieinamumas yra svarbiausias UI dizaino aspektas. Užtikrinant, kad dialogai būtų prieinami, reiškia, kad visi vartotojai, įskaitant ir turinčius negalią, gali jais efektyviai naudotis. Tai apima įvairių aspektų sprendimą, įskaitant:

Naršymas klaviatūra: Vartotojai, kurie naudojasi naršymu klaviatūra, turėtų galėti lengvai naršyti į dialogų langus, juose ir iš jų.
Ekrano skaitytuvų suderinamumas: Ekrano skaitytuvai turėtų tiksliai pranešti apie dialogo tikslą ir turinį, taip pat apie visus jame esančius interaktyvius elementus.
Fokusavimo valdymas: Tinkamas fokusavimo valdymas užtikrina, kad atidarius dialogą, klaviatūros fokusas būtų tinkamai nukreiptas, judėtų dialogo viduje ir grįžtų į pradinį elementą, kai dialogas uždaromas.
Vizualinis aiškumas: Dialogų langai turėtų turėti pakankamą kontrastą tarp teksto ir fono spalvų, o vizualinis išdėstymas turėtų būti aiškus ir lengvai suprantamas.
Lietimo srities dydis: Lietimui jautriose sąsajose interaktyvūs elementai dialogų languose turėtų turėti pakankamo dydžio lietimo sritis.
Kognityvinis prieinamumas: Kalba ir turinys dialogų languose turėtų būti aiškūs, glausti ir lengvai suprantami, sumažinant kognityvinę apkrovą.

ARIA atributai dialogų prieinamumui

ARIA (Prieinamos turtingosios interneto programos) atributai suteikia semantinę informaciją pagalbinėms technologijoms, tokioms kaip ekrano skaitytuvai, leidžiant joms tiksliau interpretuoti ir pateikti UI elementus. Pagrindiniai ARIA atributai dialogų prieinamumui apima:

`role="dialog"` arba `role="alertdialog"`: Šis atributas identifikuoja elementą kaip dialogą. `alertdialog` turėtų būti naudojamas dialogams, kurie perteikia svarbią ar skubią informaciją.
`aria-labelledby="[antraštės ID]"`: Šis atributas susieja dialogą su antraštės elementu, kuris apibūdina jo tikslą.
`aria-describedby="[aprašymo ID]"`: Šis atributas susieja dialogą su aprašomuoju elementu, kuris suteikia papildomą kontekstą ar instrukcijas.
`aria-modal="true"`: Šis atributas nurodo, kad dialogas yra modalinis, užkertant kelią sąveikai su elementais už dialogo ribų. Jis yra labai svarbus perduodant modalinio elgesio informaciją pagalbinėms technologijoms.
`tabindex="0"`: Nustačius `tabindex="0"` elementui dialogo viduje, jis gali gauti fokusą naršant klaviatūra.

Modalinių dialogų prieinamumas: geriausios praktikos

Modaliniai dialogai kelia unikalių prieinamumo iššūkių dėl jų blokuojančio pobūdžio. Štai keletas geriausių praktikų, kaip užtikrinti modalinių dialogų prieinamumą:

1. Tinkami ARIA atributai

Kaip minėta anksčiau, naudojant `role="dialog"` (arba `role="alertdialog"` skubiems pranešimams), `aria-labelledby`, `aria-describedby` ir `aria-modal="true"`, yra labai svarbu identifikuoti dialogą ir jo paskirtį pagalbinėms technologijoms.

Pavyzdys:


 <div role="dialog" aria-labelledby="confirmation-heading" aria-modal="true">
  <h2 id="confirmation-heading">Patvirtinti ištrynimą</h2>
  <p>Ar tikrai norite ištrinti šį elementą? Šio veiksmo negalima atšaukti.</p>
  <button>Patvirtinti</button>
  <button>Atšaukti</button>
 </div>

2. Fokusavimo valdymas

Atidarius modalinį dialogą, klaviatūros fokusas turėtų būti nedelsiant perkeltas į pirmąjį interaktyvų elementą dialogo viduje (pvz., pirmąjį mygtuką ar įvesties lauką). Uždarius dialogą, fokusas turėtų grįžti į elementą, kuris iškvietė dialogą.

Įgyvendinimo aspektai:

JavaScript: Naudokite JavaScript, kad programiškai nustatytumėte fokusą į atitinkamą elementą, kai dialogas atidaromas ir uždaromas.
Fokusavimo spąstai: Įdiekite fokusavimo spąstus, kad užtikrintumėte, jog klaviatūros fokusas liktų dialogo viduje, kol jis atidarytas. Tai apsaugo vartotojus nuo atsitiktinio išėjimo iš dialogo naudojant „Tab“ klavišą ir praradimo orientacijos. Tai dažnai pasiekiama naudojant JavaScript, stebint „Tab“ klavišo paspaudimus ir, jei reikia, perkeliant fokusą atgal į dialogo pradžią ar pabaigą.

Pavyzdys (Konceptualus 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. Prieinamumas klaviatūra

Užtikrinkite, kad visi interaktyvūs elementai dialogo viduje būtų pasiekiami ir aktyvuojami naudojant klaviatūrą. Tai apima mygtukus, nuorodas, formos laukus ir bet kokius pasirinktinius valdiklius.

Aspektai:

Tabuliavimo tvarka: Tabuliavimo tvarka turėtų būti logiška ir intuityvi. Paprastai tabuliavimo tvarka turėtų atitikti vizualų dialogo išdėstymą.
Spartieji klavišai: Pateikite sparčiuosius klavišus įprastiems veiksmams dialogo viduje (pvz., naudojant „Escape“ klavišą dialogui uždaryti arba „Enter“ klavišą veiksmui patvirtinti).

4. Vizualinis dizainas

Modalinio dialogo vizualinis dizainas turėtų aiškiai parodyti, kad jis yra atskiras nuo pagrindinio programos lango. Tai galima pasiekti naudojant kontrastingą fono spalvą, aiškų rėmelį ar šešėlio efektą. Užtikrinkite pakankamą spalvų kontrastą tarp teksto ir fono, kad būtų užtikrintas skaitomumas.

5. Semantinis HTML

Kai tik įmanoma, naudokite semantinius HTML elementus. Pavyzdžiui, naudokite <button> elementus mygtukams, <label> elementus formos įvesties laukų žymėms ir <h2> arba <h3> elementus antraštėms.

6. Internacionalizavimas ir lokalizavimas

Kuriant ir diegiant dialogus, atsižvelkite į skirtingų kultūrinių aplinkų vartotojų poreikius. Tai apima lokalizuotų dialogo turinio versijų teikimą ir užtikrinimą, kad dialogo išdėstymas tinkamai prisitaikytų prie skirtingų teksto krypčių (pvz., kalbų, rašomų iš dešinės į kairę).

Pavyzdys: Patvirtinimo dialogas, prašantis vartotojo ištrinti savo paskyrą, turėtų būti tiksliai ir kultūriškai tinkamai išverstas į kiekvieną tikslinę kalbą. Išdėstymą taip pat gali tekti koreguoti kalboms, rašomoms iš dešinės į kairę.

Nemodalinių dialogų prieinamumas: geriausios praktikos

Nors nemodaliniai dialogai yra mažiau trikdantys nei modaliniai, jie vis tiek reikalauja didelio dėmesio prieinamumui. Štai keletas geriausių praktikų:

1. Aiškus vizualinis atskyrimas

Užtikrinkite, kad nemodalinis dialogas būtų vizualiai atskirtas nuo pagrindinio programos lango, kad būtų išvengta painiavos. Tai galima pasiekti naudojant rėmelį, fono spalvą ar subtilų šešėlį.

2. Fokusavimo valdymas

Nors nemodaliniai dialogai neblokuoja sąveikos su pagrindiniu langu, tinkamas fokusavimo valdymas vis tiek yra labai svarbus. Atidarius dialogą, fokusas turėtų būti perkeltas į pirmąjį interaktyvų elementą dialogo viduje. Vartotojai turėtų galėti lengvai persijungti tarp dialogo ir pagrindinio lango naudodamiesi klaviatūra.

3. ARIA atributai

Naudokite `role="dialog"`, `aria-labelledby` ir `aria-describedby`, kad suteiktumėte semantinę informaciją apie dialogą pagalbinėms technologijoms. `aria-modal="false"` arba `aria-modal` praleidimas yra svarbus, norint atskirti nemodalinius dialogus nuo modalinių.

Pavyzdys:


 <div role="dialog" aria-labelledby="font-settings-heading">
  <h2 id="font-settings-heading">Šrifto nustatymai</h2>
  <label for="font-size">Šrifto dydis:</label>
  <input type="number" id="font-size" value="12">
  <button>Taikyti</button>
 </div>

4. Prieinamumas klaviatūra

Užtikrinkite, kad visi interaktyvūs elementai dialogo viduje būtų pasiekiami ir aktyvuojami naudojant klaviatūrą. Tabuliavimo tvarka turėtų būti logiška ir intuityvi, leidžianti vartotojams lengvai naršyti tarp dialogo ir pagrindinio lango.

5. Venkite persidengimo

Venkite nemodalinių dialogų išdėstymo taip, kad jie uždengtų svarbų turinį pagrindiniame programos lange. Dialogas turėtų būti patalpintas aiškioje ir prieinamoje vietoje.

6. Informavimas ir komunikacija

Atidarius nemodalinį dialogą, naudinga vizualiai arba garsu (naudojant ARIA „live regions“) informuoti vartotoją, kad atsirado naujas dialogas, ypač jei jis atsidaro fone ir gali būti ne iš karto pastebimas.

Praktiniai pavyzdžiai ir kodo fragmentai

Panagrinėkime keletą praktinių pavyzdžių ir kodo fragmentų, kad iliustruotume šias koncepcijas.

1 pavyzdys: Modalinis patvirtinimo dialogas


 <button id="delete-button" onclick="openModal('delete-confirmation-modal', 'delete-button')">Ištrinti elementą</button>

 <div id="delete-confirmation-modal" role="dialog" aria-labelledby="delete-heading" aria-modal="true" style="display:none;">
  <h2 id="delete-heading">Patvirtinti ištrynimą</h2>
  <p>Ar tikrai norite ištrinti šį elementą? Šio veiksmo negalima atšaukti.</p>
  <button onclick="//Ištrinti elemento logika; closeModal('delete-confirmation-modal', 'delete-button')">Patvirtinti</button>
  <button onclick="closeModal('delete-confirmation-modal', 'delete-button')">Atšaukti</button>
 </div>

2 pavyzdys: Nemodalinis šrifto nustatymų dialogas


 <button id="font-settings-button" onclick="openModal('font-settings-dialog', 'font-settings-button')">Šrifto nustatymai</button>

 <div id="font-settings-dialog" role="dialog" aria-labelledby="font-settings-heading" style="display:none;">
  <h2 id="font-settings-heading">Šrifto nustatymai</h2>
  <label for="font-size">Šrifto dydis:</label>
  <input type="number" id="font-size" value="12"><br>
  <label for="font-family">Šrifto šeima:</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="//Taikyti šrifto nustatymų logiką">Taikyti</button>
 </div>

Testavimas ir patvirtinimas

Išsamus testavimas yra būtinas norint užtikrinti dialogų prieinamumą. Tai apima:

Rankinis testavimas: Naudokite klaviatūrą ir ekrano skaitytuvą naršymui ir sąveikai su dialogais.
Automatizuotas testavimas: Naudokite prieinamumo testavimo įrankius, kad nustatytumėte galimas prieinamumo problemas. Įrankiai, tokie kaip „Axe DevTools“, WAVE ir „Lighthouse“, gali padėti automatizuoti prieinamumo patikrinimus.
Vartotojų testavimas: Atlikite vartotojų testavimą su asmenimis, turinčiais negalią, kad surinktumėte atsiliepimus apie dialogų naudojimo patogumą ir prieinamumą.

Atitiktis WCAG

Laikytis Žiniatinklio turinio prieinamumo gairių (WCAG) yra labai svarbu kuriant prieinamus dialogus. Atitinkami WCAG sėkmės kriterijai apima:

1.1.1 Netekstinis turinys: Pateikite tekstines alternatyvas netekstiniam turiniui (pvz., paveikslėliams, piktogramoms).
1.3.1 Informacija ir ryšiai: Užtikrinkite, kad informacija ir ryšiai būtų perteikiami per žymėjimą arba duomenų atributus.
1.4.3 Kontrastas (minimalus): Užtikrinkite pakankamą kontrastą tarp teksto ir fono spalvų.
2.1.1 Klaviatūra: Užtikrinkite, kad visos funkcijos būtų pasiekiamos naudojant klaviatūrą.
2.4.3 Fokusavimo tvarka: Užtikrinkite, kad fokusavimo tvarka būtų logiška ir intuityvi.
2.4.7 Matomas fokusas: Užtikrinkite, kad fokusavimo indikatorius visada būtų matomas.
3.2.1 Fokusuojant: Užtikrinkite, kad komponentai negautų fokuso netikėtai.
4.1.2 Pavadinimas, vaidmuo, vertė: Užtikrinkite, kad visų UI komponentų pavadinimą, vaidmenį ir vertę galėtų programiškai nustatyti pagalbinės technologijos.

Globalūs aspektai

Kuriant dialogus globaliai auditorijai, atsižvelkite į šiuos dalykus:

Lokalizavimas: Išverskite visą tekstinį turinį į atitinkamas kalbas.
Internacionalizavimas: Užtikrinkite, kad dialogo išdėstymas tinkamai prisitaikytų prie skirtingų teksto krypčių ir kultūrinių konvencijų. Datos ir laiko formatai, valiutų simboliai ir adresų formatai labai skiriasi įvairiose kultūrose.
Kultūrinis jautrumas: Venkite naudoti paveikslėlius ar simbolius, kurie tam tikrose kultūrose gali būti įžeidžiantys ar netinkami.

Pavyzdys: Japonijoje naudojamam dialogui gali prireikti pritaikyti vertikalų teksto išdėstymą ir skirtingus datos formatus nei dialogui, naudojamam Jungtinėse Amerikos Valstijose.

Išvada

Prieinamų dialogų, tiek modalinių, tiek nemodalinių, kūrimas yra esminis įtraukiojo UI dizaino aspektas. Laikydamiesi šiame vadove aprašytų geriausių praktikų, WCAG gairių ir efektyviai naudodami ARIA atributus, kūrėjai gali užtikrinti, kad visi vartotojai, nepriklausomai nuo jų gebėjimų, galėtų sklandžiai ir efektyviai sąveikauti su dialogais. Atminkite, kad prieinamumas – tai ne tik atitiktis reikalavimams; tai – įtraukesnės ir teisingesnės vartotojo patirties kūrimas visiems. Nuolatinis testavimas ir atsiliepimų rinkimas iš vartotojų, turinčių negalią, yra labai svarbus nustatant ir sprendžiant prieinamumo problemas bei gerinant bendrą vartotojo patirtį. Teikdami pirmenybę prieinamumui, galite sukurti dialogus, kurie yra ne tik funkcionalūs ir vizualiai patrauklūs, bet ir patogūs bei malonūs naudoti visiems vartotojams visame pasaulyje.