Dialogu pārvaldība: Pieejamības nodrošināšana modālajos un nemodālajos logos

Lietotāja saskarnes (UI) dizaina jomā dialogiem ir būtiska loma, mijiedarbojoties ar lietotājiem, sniedzot informāciju vai pieprasot ievadi. Šie dialogi var izpausties kā modāli vai nemodāli logi, un katram no tiem ir unikāli pieejamības apsvērumi. Šī rokasgrāmata iedziļinās dialogu pārvaldības sarežģītībās, koncentrējoties uz pieejamības nodrošināšanu visiem lietotājiem, neatkarīgi no viņu spējām, ievērojot tādus standartus kā Tīmekļa satura pieejamības vadlīnijas (WCAG) un izmantojot Pieejamo bagātināto interneta lietojumprogrammu (ARIA) atribūtus.

Izpratne par modālajiem un nemodālajiem dialogiem

Pirms iedziļināties pieejamības apsvērumos, ir svarīgi definēt, ko mēs saprotam ar modālajiem un nemodālajiem dialogiem:

Modālie dialogi: Modālais dialogs, zināms arī kā modālais logs, ir UI elements, kas rada režīmu, kurš atspējo galveno logu, bet saglabā to redzamu ar modālo logu kā bērnlogu. Lietotājiem ir jāmijiedarbojas ar modālo dialogu un parasti tas jāaizver (piemēram, noklikšķinot uz apstiprinājuma pogas vai "X" ikonas), pirms viņi var atgriezties galvenajā lietojumprogrammas logā. Bieži piemēri ir brīdinājuma logi, apstiprinājuma uzvednes un iestatījumu paneļi.
Nemodālie dialogi: Pretstatā tam, nemodālais dialogs ļauj lietotājiem vienlaikus mijiedarboties gan ar dialogu, gan ar galveno lietojumprogrammas logu. Dialogs paliek atvērts, nebloķējot piekļuvi citām lietojumprogrammas daļām. Piemēri ietver rīku paletes grafikas rediģēšanas programmatūrā vai tērzēšanas logus ziņojumapmaiņas lietojumprogrammās.

Pieejamības apsvērumi dialogiem

Pieejamība ir vissvarīgākā UI dizainā. Nodrošinot, ka dialogi ir pieejami, nozīmē, ka visi lietotāji, ieskaitot tos ar invaliditāti, var tos efektīvi izmantot. Tas ietver dažādu apsvērumu risināšanu, tostarp:

Navigācija ar tastatūru: Lietotājiem, kuri paļaujas uz navigāciju ar tastatūru, ir jāspēj viegli navigēt uz dialogiem, to iekšienē un ārā no tiem.
Ekrāna lasītāju saderība: Ekrāna lasītājiem ir precīzi jāpaziņo par dialoga mērķi un saturu, kā arī par jebkādiem interaktīviem elementiem tajā.
Fokusa pārvaldība: Pareiza fokusa pārvaldība nodrošina, ka tastatūras fokuss tiek atbilstoši novietots, kad dialogs tiek atvērts, pārvietojas dialoga iekšienē un atgriežas pie sākotnējā elementa, kad dialogs tiek aizvērts.
Vizuālā skaidrība: Dialogiem jābūt ar pietiekamu kontrastu starp teksta un fona krāsām, un vizuālajam izkārtojumam jābūt skaidram un viegli saprotamam.
Pieskāriena mērķa lielums: Uz pieskārieniem balstītām saskarnēm interaktīvajiem elementiem dialogos jābūt ar atbilstoša izmēra pieskāriena mērķiem.
Kognitīvā pieejamība: Valodai un saturam dialogos jābūt skaidram, kodolīgam un viegli saprotamam, samazinot kognitīvo slodzi.

ARIA atribūti dialogu pieejamībai

ARIA (Pieejamās bagātinātās interneta lietojumprogrammas) atribūti nodrošina semantisko informāciju palīgtehnoloģijām, piemēram, ekrāna lasītājiem, ļaujot tām precīzāk interpretēt un prezentēt UI elementus. Galvenie ARIA atribūti dialogu pieejamībai ietver:

`role="dialog"` vai `role="alertdialog"`: Šis atribūts identificē elementu kā dialogu. `alertdialog` jāizmanto dialogiem, kas sniedz svarīgu vai steidzamu informāciju.
`aria-labelledby="[ID of heading]"`: Šis atribūts saista dialogu ar virsraksta elementu, kas apraksta tā mērķi.
`aria-describedby="[ID of description]"`: Šis atribūts saista dialogu ar aprakstošu elementu, kas sniedz papildu kontekstu vai instrukcijas.
`aria-modal="true"`: Šis atribūts norāda, ka dialogs ir modāls, novēršot mijiedarbību ar elementiem ārpus dialoga. Tas ir kritiski svarīgi, lai paziņotu par modālo uzvedību palīgtehnoloģijām.
`tabindex="0"`: Iestatot `tabindex="0"` elementam dialoga iekšienē, tas var saņemt fokusu, izmantojot navigāciju ar tastatūru.

Modālo dialogu pieejamība: Labākā prakse

Modālie dialogi rada unikālus pieejamības izaicinājumus to bloķējošās dabas dēļ. Šeit ir dažas labākās prakses, kā nodrošināt modālo dialogu pieejamību:

1. Pareizi ARIA atribūti

Kā jau minēts, `role="dialog"` (vai `role="alertdialog"` steidzamiem ziņojumiem), `aria-labelledby`, `aria-describedby` un `aria-modal="true"` izmantošana ir būtiska, lai identificētu dialogu un tā mērķi palīgtehnoloģijām.

Piemērs:


 <div role="dialog" aria-labelledby="confirmation-heading" aria-modal="true">
  <h2 id="confirmation-heading">Apstiprināt dzēšanu</h2>
  <p>Vai esat pārliecināts, ka vēlaties dzēst šo vienumu? Šo darbību nevar atsaukt.</p>
  <button>Apstiprināt</button>
  <button>Atcelt</button>
 </div>

2. Fokusa pārvaldība

Kad tiek atvērts modālais dialogs, tastatūras fokuss nekavējoties jāpārvieto uz pirmo interaktīvo elementu dialoga iekšienē (piemēram, pirmo pogu vai ievades lauku). Kad dialogs tiek aizvērts, fokusam jāatgriežas pie elementa, kas izsauca dialogu.

Ieviešanas apsvērumi:

JavaScript: Izmantojiet JavaScript, lai programmatiski iestatītu fokusu uz atbilstošo elementu, kad dialogs tiek atvērts un aizvērts.
Fokusa slazds: Ieviesiet fokusa slazdu, lai nodrošinātu, ka tastatūras fokuss paliek dialoga iekšienē, kamēr tas ir atvērts. Tas novērš lietotājus no nejaušas izkļūšanas no dialoga ar Tab taustiņu un pazaudēšanas. To bieži panāk, izmantojot JavaScript, lai klausītos Tab taustiņa nospiešanu un, ja nepieciešams, ciklētu fokusu atpakaļ uz dialoga sākumu vai beigām.

Piemērs (Konceptuāls 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. Pieejamība ar tastatūru

Nodrošiniet, ka visiem interaktīvajiem elementiem dialoga iekšienē var piekļūt un tos aktivizēt, izmantojot tastatūru. Tas ietver pogas, saites, veidlapu laukus un jebkādas pielāgotas vadīklas.

Apsvērumi:

Tabulēšanas secība: Tabulēšanas secībai jābūt loģiskai un intuitīvai. Parasti tabulēšanas secībai ir jāseko dialoga vizuālajam izkārtojumam.
Tastatūras īsceļi: Nodrošiniet tastatūras īsceļus biežākām darbībām dialoga iekšienē (piemēram, izmantojot Escape taustiņu, lai aizvērtu dialogu, vai Enter taustiņu, lai apstiprinātu darbību).

4. Vizuālais dizains

Modālā dialoga vizuālajam dizainam skaidri jānorāda, ka tas ir atdalīts no galvenā lietojumprogrammas loga. To var panākt, izmantojot kontrastējošu fona krāsu, izteiktu apmali vai ēnas efektu. Nodrošiniet pietiekamu krāsu kontrastu starp tekstu un fonu lasāmības nolūkos.

5. Semantiskais HTML

Kad vien iespējams, izmantojiet semantiskos HTML elementus. Piemēram, izmantojiet <button> elementus pogām, <label> elementus, lai apzīmētu veidlapu ievades, un <h2> vai <h3> elementus virsrakstiem.

6. Internacionalizācija un lokalizācija

Izstrādājot un ieviešot dialogus, ņemiet vērā dažādu kultūru lietotāju vajadzības. Tas ietver dialoga satura lokalizētu versiju nodrošināšanu un nodrošināšanu, ka dialoga izkārtojums atbilstoši pielāgojas dažādiem teksta virzieniem (piemēram, valodām, kuras raksta no labās uz kreiso pusi).

Piemērs: Apstiprinājuma dialogs, kas lūdz lietotāju dzēst savu kontu, ir precīzi un kulturāli atbilstoši jāpārtulko katrai mērķa valodai. Izkārtojumam var būt nepieciešami arī pielāgojumi valodām, kuras raksta no labās uz kreiso pusi.

Nemodālo dialogu pieejamība: Labākā prakse

Lai gan nemodālie dialogi ir mazāk traucējoši nekā modālie dialogi, tiem joprojām ir nepieciešama rūpīga uzmanība pieejamībai. Šeit ir dažas labākās prakses:

1. Skaidra vizuāla atšķirība

Nodrošiniet, ka nemodālais dialogs ir vizuāli atšķirīgs no galvenā lietojumprogrammas loga, lai izvairītos no neskaidrībām. To var panākt, izmantojot apmali, fona krāsu vai smalku ēnu.

2. Fokusa pārvaldība

Lai gan nemodālie dialogi nebloķē mijiedarbību ar galveno logu, pareiza fokusa pārvaldība joprojām ir būtiska. Kad dialogs tiek atvērts, fokuss jāpārvieto uz pirmo interaktīvo elementu dialoga iekšienē. Lietotājiem ir jāspēj viegli pārslēgties starp dialogu un galveno logu, izmantojot navigāciju ar tastatūru.

3. ARIA atribūti

Izmantojiet `role="dialog"`, `aria-labelledby` un `aria-describedby`, lai sniegtu semantisko informāciju par dialogu palīgtehnoloģijām. `aria-modal="false"` vai `aria-modal` atribūta neizmantošana ir svarīga, lai atšķirtu nemodālos dialogus no modālajiem.

Piemērs:


 <div role="dialog" aria-labelledby="font-settings-heading">
  <h2 id="font-settings-heading">Fonta iestatījumi</h2>
  <label for="font-size">Fonta lielums:</label>
  <input type="number" id="font-size" value="12">
  <button>Piemērot</button>
 </div>

4. Pieejamība ar tastatūru

Nodrošiniet, ka visiem interaktīvajiem elementiem dialoga iekšienē var piekļūt un tos aktivizēt, izmantojot tastatūru. Tabulēšanas secībai jābūt loģiskai un intuitīvai, ļaujot lietotājiem viegli navigēt starp dialogu un galveno logu.

5. Izvairīšanās no pārklāšanās

Izvairieties no nemodālo dialogu pozicionēšanas tādā veidā, kas aizsedz svarīgu saturu galvenajā lietojumprogrammas logā. Dialogs jānovieto skaidrā un pieejamā vietā.

6. Apzināšanās un komunikācija

Kad tiek atvērts nemodālais dialogs, ir noderīgi vizuāli vai audiāli (izmantojot ARIA "live" reģionus) informēt lietotāju, ka ir parādījies jauns dialogs, it īpaši, ja tas atveras fonā un var nebūt uzreiz pamanāms.

Praktiski piemēri un koda fragmenti

Apskatīsim dažus praktiskus piemērus un koda fragmentus, lai ilustrētu šos jēdzienus.

1. piemērs: Modāls apstiprinājuma dialogs


 <button id="delete-button" onclick="openModal('delete-confirmation-modal', 'delete-button')">Dzēst vienumu</button>

 <div id="delete-confirmation-modal" role="dialog" aria-labelledby="delete-heading" aria-modal="true" style="display:none;">
  <h2 id="delete-heading">Apstiprināt dzēšanu</h2>
  <p>Vai esat pārliecināts, ka vēlaties dzēst šo vienumu? Šo darbību nevar atsaukt.</p>
  <button onclick="//Dzēšanas loģika; closeModal('delete-confirmation-modal', 'delete-button')">Apstiprināt</button>
  <button onclick="closeModal('delete-confirmation-modal', 'delete-button')">Atcelt</button>
 </div>

2. piemērs: Nemodāls fonta iestatījumu dialogs


 <button id="font-settings-button" onclick="openModal('font-settings-dialog', 'font-settings-button')">Fonta iestatījumi</button>

 <div id="font-settings-dialog" role="dialog" aria-labelledby="font-settings-heading" style="display:none;">
  <h2 id="font-settings-heading">Fonta iestatījumi</h2>
  <label for="font-size">Fonta lielums:</label>
  <input type="number" id="font-size" value="12"><br>
  <label for="font-family">Fonta saime:</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="//Piemērot fonta iestatījumu loģiku">Piemērot</button>
 </div>

Testēšana un validācija

Rūpīga testēšana ir būtiska, lai nodrošinātu dialogu pieejamību. Tas ietver:

Manuālā testēšana: Izmantojiet tastatūru un ekrāna lasītāju, lai navigētu un mijiedarbotos ar dialogiem.
Automatizētā testēšana: Izmantojiet pieejamības testēšanas rīkus, lai identificētu iespējamās pieejamības problēmas. Rīki, piemēram, Axe DevTools, WAVE un Lighthouse, var palīdzēt automatizēt pieejamības pārbaudes.
Lietotāju testēšana: Veiciet lietotāju testēšanu ar personām ar invaliditāti, lai apkopotu atsauksmes par dialogu lietojamību un pieejamību.

WCAG atbilstība

Tīmekļa satura pieejamības vadlīniju (WCAG) ievērošana ir būtiska, lai izveidotu pieejamus dialogus. Attiecīgie WCAG veiksmes kritēriji ietver:

1.1.1 Neteksta saturs: Nodrošiniet teksta alternatīvas neteksta saturam (piemēram, attēliem, ikonām).
1.3.1 Informācija un attiecības: Nodrošiniet, ka informācija un attiecības tiek nodotas, izmantojot iezīmēšanu vai datu atribūtus.
1.4.3 Kontrasts (minimālais): Nodrošiniet pietiekamu kontrastu starp teksta un fona krāsām.
2.1.1 Tastatūra: Padariet visu funkcionalitāti pieejamu no tastatūras.
2.4.3 Fokusa secība: Nodrošiniet, ka fokusa secība ir loģiska un intuitīva.
2.4.7 Redzams fokuss: Pārliecinieties, ka fokusa indikators vienmēr ir redzams.
3.2.1 Uz fokusa: Nodrošiniet, ka komponenti nesaņem fokusu negaidīti.
4.1.2 Nosaukums, loma, vērtība: Nodrošiniet, ka visu UI komponentu nosaukumu, lomu un vērtību var programmatiski noteikt palīgtehnoloģijas.

Globālie apsvērumi

Izstrādājot dialogus globālai auditorijai, ņemiet vērā sekojošo:

Lokalizācija: Pārtulkojiet visu teksta saturu atbilstošajās valodās.
Internacionalizācija: Nodrošiniet, ka dialoga izkārtojums atbilstoši pielāgojas dažādiem teksta virzieniem un kultūras paražām. Datuma un laika formāti, valūtas simboli un adrešu formāti dažādās kultūrās ievērojami atšķiras.
Kultūras jutīgums: Izvairieties no attēlu vai simbolu izmantošanas, kas noteiktās kultūrās varētu būt aizskaroši vai nepiemēroti.

Piemērs: Dialogam, kas tiek izmantots Japānā, varētu būt nepieciešams pielāgoties vertikāliem teksta izkārtojumiem un atšķirīgiem datuma formātiem nekā dialogam, kas tiek izmantots Amerikas Savienotajās Valstīs.

Noslēgums

Pieejamu dialogu, gan modālo, gan nemodālo, izveide ir būtisks iekļaujoša UI dizaina aspekts. Ievērojot šajā rokasgrāmatā izklāstītās labākās prakses, ievērojot WCAG vadlīnijas un efektīvi izmantojot ARIA atribūtus, izstrādātāji var nodrošināt, ka visi lietotāji, neatkarīgi no viņu spējām, var netraucēti un efektīvi mijiedarboties ar dialogiem. Atcerieties, ka pieejamība nav tikai par atbilstību; tā ir par iekļaujošākas un taisnīgākas lietotāja pieredzes radīšanu ikvienam. Nepārtraukta testēšana un atsauksmju vākšana no lietotājiem ar invaliditāti ir būtiska, lai identificētu un risinātu pieejamības problēmas un uzlabotu kopējo lietotāja pieredzi. Prioritizējot pieejamību, jūs varat izveidot dialogus, kas ir ne tikai funkcionāli un vizuāli pievilcīgi, bet arī lietojami un patīkami visiem lietotājiem visā pasaulē.