Modaalsed dialoogid: ülemaailmne juhend ülekatte ja hüpikakende ligipääsetavuse standardite kohta

Modaalsed dialoogid, tuntud ka kui ülekattted või hüpikaknad, on tänapäevase veebidisaini kriitiline komponent. Need esitavad teavet, koguvad sisendit või kinnitavad toiminguid eraldiseisvas aknas, mis paikneb peamise sisu peal. Kui neid aga ei rakendata õigesti, võivad need luua märkimisväärseid ligipääsetavuse barjääre puuetega kasutajatele. See põhjalik juhend süveneb modaalsete dialoogide ligipääsetavuse standarditesse, pakkudes ülemaailmset vaatenurka ja praktilisi näiteid, et tagada teie rakenduste kaasatus ja kasutajasõbralikkus.

Modaalsete dialoogide ligipääsetavuse tähtsuse mõistmine

Ligipääsetavad modaalsed dialoogid on hädavajalikud sujuva kasutajakogemuse pakkumiseks kõigile, sealhulgas puuetega inimestele. Halvasti kujundatud modaalid võivad olla frustreerivad, segased ja isegi täiesti ligipääsmatud kasutajatele, kes tuginevad abitehnoloogiatele, nagu ekraanilugejad, klaviatuuriga navigeerimine ja kõnetuvastustarkvara. Ligipääsetavuse standardeid järgides loome võrdsema ja kasutatavama veebi ülemaailmse publiku jaoks.

Miks ligipääsetavus on globaalselt oluline

Ligipääsetavus ei ole pelgalt tehniline nõue; see on põhilist inimõigust. Üle maailma on puuetega inimestel õigus saada teabele ja teenustele võrdselt teistega. Veebipääsetavus annab puuetega inimestele võimaluse täielikult ühiskonnas osaleda, alates haridusest ja tööhõivest kuni sotsiaalse suhtluse ja meelelahutuseni. See on eriti oluline rahvusvahelise arengu ja digitaalse kaasamise kontekstis, kus tehnoloogiale juurdepääs võib olla elukvaliteedi parandamisel kriitilise tähtsusega tegur. Rahvusvahelised seadused ja juhised, nagu Web Content Accessibility Guidelines (WCAG), pakuvad ühist raamistikku veebipääsetavuse saavutamiseks.

Modaalsete dialoogide peamised ligipääsetavuse põhimõtted

Ligipääsetavate modaalsete dialoogide loomist reguleerivad mitmed peamised põhimõtted. Need põhimõtted ühtivad WCAG põhitõdedega, tagades, et sisu on tajutav, toimiv, arusaadav ja robustne. Vaatame mõningaid neist põhiprintsiipidest.

1. Tajutav

Tajutav sisu tähendab, et kasutajad saavad tajuda modaalses dialoogis esitatud teavet. See hõlmab järgmisi kaalutlusi:

• Piltidele alternatiivse teksti pakkumine: Kõikidel modaalide piltidel, sealhulgas nuppudel ja ikoonidel, peaks olema kirjeldav alt-tekst.
• Piisava värvikontrasti tagamine: Tekstil ja interaktiivsetel elementidel peaks olema taustaga piisav kontrast. Kasutage värvikontrasti suhete kontrollimiseks tööriistu, tagades, et need vastavad WCAG juhistele (nt WCAG 2.1 AA-tase).
• Multimeedia jaoks pealdiste ja ärakirjade pakkumine: Kui modaal sisaldab videoid või heli, pakkuge pealdisi ja ärakirju, et muuta sisu kättesaadavaks kurdidele või kuulmispuudega inimestele.
• Sisu kohandatavaks muutmine: Sisu peaks olema võimalik esitada erineval viisil (nt lihtsustatud tekst, erinevad fondisuurused, erinevad paigutused) ilma teavet kaotamata.

Näide: Modaalsel dialoogil, mis kuvab tootepilti, peaks olema alt-tekst, mis kirjeldab toodet täpselt. Näiteks, selle asemel et 'tootepilt', kasutage 'Punane nahktagi lukuga ja kahe esitaskuga'.

2. Toimiv

Toimiv sisu tähendab, et kasutajad saavad modaalse dialoogiga interakteeruda. See hõlmab järgmisi kaalutlusi:

• Klaviatuuriga navigeerimine: Modaalsel dialoogil peaks olema täielikult võimalik navigeerida klaviatuuriga. Kasutajad peaksid saama tabulaatori abil liikuda interaktiivsete elementide vahel loogilises järjekorras.
• Fookuse haldus: Fookus peaks olema selgelt nähtav ja fookus peaks jääma modaalsesse dialoogi. Kui modaal avaneb, peaks fookus liikuma modaali esimesele interaktiivsele elemendile. Kui modaal suletakse, peaks fookus tagasi liikuma modaali käivitanud elemendile.
• Ajastatud sündmuste vältimine: Ärge kasutage ajastatud sündmusi, mis võivad häirida kasutaja interaktsiooni modaaliga. Ajastatud sündmused peaksid olema kasutaja poolt reguleeritavad.
• Selgete tegevuskutsete pakkumine: Veenduge, et modaalis olevad nupud ja lingid oleksid kergesti leitavad ja mõistetavad.

Näide: Kui modaalne dialoog avaneb, peaks fookus automaatselt suunama sulgemisnuppule või esimesele interaktiivsele elemendile. Kasutajad peaksid saama kasutada Tab-klahvi modaali sees olevate elementide vahel liikumiseks ja Shift+Tab-klahve tagasiliikumiseks.

3. Arusaadav

Arusaadav sisu tähendab, et kasutajad saavad aru teabest ja kuidas kasutajaliidesega interakteerida. See hõlmab järgmisi kaalutlusi:

• Selge ja kokkuvõtlik keel: Kasutage selget, lihtsat ja ühtlast keelt. Vältige žargooni ja tehnilisi termineid.
• Juhised: Vajadusel pakkuge selgeid juhiseid.
• Vigade ennetamine: Kujundage modaal vigade ennetamiseks. Näiteks pakkuge informatiivseid veateateid ja valideerige kasutaja sisendit.

Näide: Selle asemel, et kirjutada 'Saada', kasutage nuppu, mille silt selgelt näitab toimingut, nagu 'Saada avaldus' või 'Salvesta muudatused'. Veateated peaksid selgelt selgitama, mis läks valesti ja kuidas kasutaja seda parandada saab. Näiteks, „Palun sisestage kehtiv e-posti aadress” ja esiletõstke sisestusväli.

4. Robustne

Robustne sisu tähendab, et sisu on ühilduv laia valiku kasutajaagenditega, sealhulgas abitehnoloogiatega. See hõlmab järgmisi kaalutlusi:

• Kehtiv HTML: Kasutage kehtivat HTML-i ja järgige kehtestatud kodeerimisstandardeid.
• ARIA atribuudid: Kasutage ARIA (Accessible Rich Internet Applications) atribuute, et pakkuda modaalse dialoogi ja selle elementide kohta semantilist teavet abitehnoloogiatele.
• Ühilduvus: Tagage, et modaalne dialoog oleks ühilduv erinevate brauserite ja abitehnoloogiatega.

Näide: Kasutage ARIA atribuute nagu `aria-modal="true"`, `aria-labelledby`, `aria-describedby` ja `role="dialog"`, et dialoogi ja selle elemente korralikult määratleda. Valideerige oma HTML HTML-validaatoriga.

Ligipääsetavate modaalsete dialoogide rakendamine: samm-sammuline juhend

Siin on praktiline juhend ligipääsetavate modaalsete dialoogide rakendamiseks, integreerides WCAG põhimõtteid ja ARIA atribuute:

1. HTML-i struktuur

Kasutage oma modaalse dialoogi aluse loomiseks semantilist HTML-i. See hõlmab:

• Käivituskomponent: See võib olla nupp või link, mis aktiveerib modaali.
• Modaali konteiner: See on `div`-element, mis sisaldab kõiki teie modaalse dialoogi sisu. Sellel peaks olema `role="dialog"` atribuut ja `aria-modal="true"`.
• Modaali sisu: Modaali sisu peaks olema modaali konteineris.
• Sulgemisnupp: See nupp võimaldab kasutajal modaali sulgeda.

Näide:

            <button id="openModalBtn">Ava modaal</button>

<div id="myModal" role="dialog" aria-modal="true" aria-labelledby="modalTitle">
  <div>
    <h2 id="modalTitle">Modaali pealkiri</h2>
    <p>Modaali sisu siin.</p>
    <button id="closeModalBtn">Sule</button>
  </div>
</div>
            

              
                Copy
              
            
          

2. ARIA atribuudid

ARIA atribuudid pakuvad semantilist tähendust abitehnoloogiatele. Olulised ARIA atribuudid, mida lisada:

• `role="dialog"`: Määratleb elemendi dialoogina.
• `aria-modal="true"`: Näitab, et dialoog on modaalne.
• `aria-labelledby`: Osutab modaali pealkirja sisaldava elemendi ID-le.
• `aria-describedby`: Osutab modaali sisu kirjeldava elemendi ID-le.
• `aria-hidden="true"`: Kasutatakse ülejäänud lehe sisu puhul, kui modaal on avatud, takistades ekraanilugejatel sellele juurdepääsu (seda hallatakse sageli JavaScripti abil).

Näide:

            <div id="myModal" role="dialog" aria-modal="true" aria-labelledby="modalTitle" aria-describedby="modalContent">
  <div>
    <h2 id="modalTitle">Modaali pealkiri</h2>
    <p id="modalContent">Modaali sisu siin.</p>
    <button id="closeModalBtn">Sule</button>
  </div>
</div>
            

              
                Copy
              
            
          

3. CSS-i kujundus

Kasutage modaali, ülekatte ja muude komponentide kujundamiseks CSS-i. Tagage piisav kontrast teksti ja taustavärvide vahel. Kaaluge:

• Ülekatte: Looge ülekatte (sageli poolläbipaistev `div`), mis katab taustasisu, kui modaal on avatud. See aitab modaali visuaalselt eristada ülejäänud lehest.
• Paigutus: Paigutage modaal õigesti CSS-i paigutusomadustega (nt `position: fixed` või `position: absolute`).
• Kontrast: Tagage modaali sees oleva teksti ja taustavärvide piisav kontrast.
• Fookusseisundid: Kujundage fookusseisundid interaktiivsete elementide (nupud, lingid, vormiväljad) jaoks `:focus` pseudo-klassiga, et muuta need selgelt nähtavaks.

Näide:

            
#myModal {
  display: none; /* Algselt peidetud */
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  padding: 20px;
  border: 1px solid #ccc;
  z-index: 1000; /* Veenduge, et see ilmuks kõige peale */
}

#myModal.show {
  display: block;
}

.modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999; /* Modaali all */
}

.modal-overlay.show {
  display: block;
}

#openModalBtn:focus, #closeModalBtn:focus {
  outline: 2px solid blue;
  outline-offset: 2px;
}

            

              
                Copy
              
            
          

4. JavaScripti rakendamine

JavaScript on modaali käitumise haldamiseks ülioluline. See hõlmab:

• Modaali avamine ja sulgemine: Lisage modaali avamiseks käivituskomponendile (nt nupule) sündmuste kuulajad. Lisage sulgemisnupp või mehhanism (nt klõpsates modaali väljaspool) selle sulgemiseks.
• Fookuse haldus: Kui modaal avaneb, liigutage fookus modaali esimesele fookustavale elemendile. Hoidke fookus modaalis ja tagastage fookus käivituskomponendile, kui modaal on suletud.
• Sisu peitmine/näitamine: Kasutage JavaScripti modaali ja ülekatte peitmiseks ja näitamiseks, vajadusel `aria-hidden`-i vahetades.
• Klaviatuuriga interaktsioon: Rakendage klaviatuuriga navigeerimine (Tab-klahv navigeerimiseks, Esc-klahv sulgemiseks).

Näide:

            
const openModalBtn = document.getElementById('openModalBtn');
const closeModalBtn = document.getElementById('closeModalBtn');
const modal = document.getElementById('myModal');
const overlay = document.querySelector('.modal-overlay');

openModalBtn.addEventListener('click', () => {
  modal.classList.add('show');
  overlay.classList.add('show');
  modal.focus(); // Suunake fookus modaali või selle esimesse elementi
  // Valikuliselt keelake modaali taga oleva lehe kerimine.
  document.body.style.overflow = 'hidden';
});

closeModalBtn.addEventListener('click', () => {
  modal.classList.remove('show');
  overlay.classList.remove('show');
  openModalBtn.focus(); // Suunake fookus tagasi nupule
  document.body.style.overflow = 'auto';
});

overlay.addEventListener('click', () => {
    modal.classList.remove('show');
    overlay.classList.remove('show');
    openModalBtn.focus();
    document.body.style.overflow = 'auto';
});

// Sulgege modaal Esc-klahvi vajutamisel
document.addEventListener('keydown', (event) => {
  if (event.key === 'Escape') {
    modal.classList.remove('show');
    overlay.classList.remove('show');
    openModalBtn.focus();
    document.body.style.overflow = 'auto';
  }
});



            

              
                Copy
              
            
          

Täpsemad kaalutlused ja parimad tavad

Lisaks peamistele ligipääsetavuse põhimõtetele võivad mitmed täpsemad kaalutlused teie modaalsete dialoogide kasutatavust ja kaasatust veelgi parandada:

1. Klaviatuurilõks ja fookuse haldus

Klaviatuurilõksud võivad olla äärmiselt frustreerivad. Tagage, et kasutajad saaksid modaali abil ainult klaviatuuri abil navigeerida. Kui modaal on avatud, peaks fookus jääma modaali. Kasutajad ei tohiks enne selle sulgemist modaalist välja tabuleerida. Selle saavutamiseks kaaluge järgmisi punkte:

• Fookuse lõksutamine: Kui modaal avaneb, liigutage fookus modaali esimesele fookustavale elemendile.
• Fookuse silmamine: Kui kasutaja liigub tabulaatoriga modaalis, suunake fookus viimaselt fookustavale elemendilt esimesele ja vastupidi. See hoiab fookuse modaali piirides.
• Fookuse tagastamine: Kui modaal suletakse, tagastage fookus komponendile, mis käivitas modaali, et säilitada kontekst.

2. Ülekatte haldus

Ülekatte pakub visuaalset vihjet, et modaal on aktiivne ja tavaliselt keelab interaktsiooni taustasisuga. Veenduge, et ülekatte:

• On täielikult läbipaistmatu: Pakub piisavat visuaalset eristust.
• Peidab taustasisu: Hoiab ära juhusliku interaktsiooni alusega sisuga.
• On eemaldatav: Võimaldab kasutajatel modaali sulgeda, klõpsates ülekatet (kui see on modaali eesmärgi kohaselt sobiv).

3. Keerulise sisu käsitlemine

• Loogiline struktuur: Korraldage sisu pealkirjade, alapealkirjade ja loenditega, et hõlbustada navigeerimist.
• Vormi valideerimine: Rakendage nõuetekohane vormi valideerimine, et pakkuda selgeid ja kasulikke veateateid.
• Edusammunäitajad: Kasutage pikkade protsesside jaoks edusammunäitajaid.

4. Mobiilne reageerivus

• Paigutuse kohandamine: Reguleerige modaali mõõtmeid ja sisu väiksematele ekraanidele sobivaks.
• Puutefunktsioonidega interaktsioonid: Veenduge, et nupud ja interaktiivsed elemendid oleksid piisavalt suured ja neid oleks lihtne puudutada.
• Klaviatuuri haldamine mobiilseadmetes: Testige klaviatuuri käitumist mobiilseadmetes.

5. Testimine ja valideerimine

• Manuaalne testimine: Testige oma modaale käsitsi klaviatuuri ja ekraanilugejaga.
• Automaatne testimine: Kasutage automaatseid ligipääsetavuse testimise tööriistu (nt WAVE, Axe DevTools), et tuvastada võimalikke probleeme.
• Kasutajate testimine: Viige läbi kasutajate testimisi puuetega inimestega, et koguda tagasisidet ja tuvastada kasutatavusprobleeme.

Rahvusvahelise leviku ja lokaliseerimise kaalutlused

• Teksti suund: Käsitsege erinevaid teksti suundi (vasakult paremale ja paremalt vasakule).
• Kuupäeva ja kellaaja vormingud: Kasutage erinevate piirkondade jaoks sobivaid kuupäeva- ja kellaajavorminguid.
• Valuuta vormingud: Kuvage valuutasümbolid õigesti kasutaja asukoha alusel.
• Keeletugi: Pakkuge modaali sisu ja nuppude siltide tõlkeid.
• Kultuuriline tundlikkus: Olge teadlik kultuurilistest erinevustest, mis võivad mõjutada modaali kujundust või sisu. Vältige kultuuriliselt tundlike piltide, ikoonide või sõnastuse kasutamist.
• Tähemärgikodeering: Tagage, et tähemärgikodeering oleks õigesti konfigureeritud, et toetada erinevaid tähemärgikomplekte.

Näide: Kui teie rakendus toetab mitut keelt, peaksid modaalse dialoogi sildid, pealkirjad ja juhised olema tõlgitud kasutaja eelistatud keelde, mis põhineb tema brauseri sätetel või kasutajaprofiilil. Kuupäeva ja kellaaja vormingud peaksid kohanema nende piirkonnaga.

Pärismaailma näited ja juhtumiuuringud

1. E-kaubanduse tellimisprotsess

• Selged sildid ja juhised: Pakkuge vormiväljadele selgeid ja kokkuvõtlikke silte ja juhiseid selle täitmise kohta.
• Vigade käsitlemine: Rakendage põhjalikke veateateid, et näidata probleeme.
• Klaviatuuriga navigeerimine: Kasutaja peaks saama tabulaatoriga liikuda kõigi vormiväljade kaudu järjest ja saama vormi klaviatuuriga esitada.

Näide: Amazon kasutab tellimisprotsessi ajal modaalseid dialooge. Tellimuse iga osa, nagu aadress, makseteave ja tellimuse ülevaade, on struktureeritud modaalis. Need modaalid on tavaliselt hästi struktureeritud ja kujundatud nii, et need vastavad ligipääsetavuse põhimõtetele.

Viga: Modaali, mida ei sulgetud korralikult ja mis võimaldas kasutajal juhuslikult vormi esitada.

2. Sisu kuvamine (nt pildid, videod)

• Alternatiivne tekst: Kõikidel modaalis olevatel piltidel peaks olema ekraanilugejate kasutajatele kirjeldav `alt`-tekst.
• Pealdised ja ärakirjad: Pakkuge videote jaoks pealdisi ja ärakirju, et mahutada kurte või kuulmispuudega inimesi.
• Klaviatuurikontrollid: Veenduge, et video ja pilt oleksid klaviatuuri abil ligipääsetavad.

Näide: Paljud uudiste veebisaidid kasutavad modaalseid dialooge täissuuruses piltide kuvamiseks, kui kasutaja klõpsab pisipildil. Näiteks, kui kasutaja klõpsab fotol, ilmub modaal täissuuruses pildiga ja pealdisega, kus on fotograafi teave.

Viga: Piltidele alt-teksti mittepakkumine, muutes need nägemispuudega kasutajate jaoks tähendusetuks.

3. Kinnitusdialoogid

• Selged küsimused: Märkige selgelt kinnitatav toiming.
• Lihtne valik: Veenduge, et kasutajatel oleks valik jätkamiseks või tühistamiseks.
• Fookuse haldus: Kui modaal ilmub, peaks fookus suunama kõige olulisemale toimingule, nagu 'Kinnita' või 'Tühista'.

Näide: Google kasutab kinnitusmodaale, kui kasutajad kustutavad Gmaili e-kirju. Modaali ilmub, paludes kasutajal oma kavatsust kinnitada.

Viga: Ebaselge või segadusttekitav keelekasutus, mis ei kirjelda tegevust selgelt.

Ligipääsetavuse testimise tööriistad ja ressursid

• WAVE (Web Accessibility Evaluation Tool): Brauseri laiendus ja veebipõhine tööriist, mis analüüsib veebilehti ligipääsetavuse probleemide osas.
• Axe DevTools: Brauseri laiendus, mis pakub automaatset ligipääsetavuse testimist.
• Accessibility Insights for Web: Brauseri laiendus, mis pakub erinevaid ligipääsetavuse kontrolle ja automaatset testimist.
• Ekraanilugejad (nt JAWS, NVDA, VoiceOver): Kasutage ekraanilugejaid, et testida, kuidas teie modaalsed dialoogid on välja kuulutatud ja navigeeritud.
• Ainult klaviatuuriga navigeerimine: Testige oma modaale ainult klaviatuuri kasutades.
• Värvikontrasti kontrollijad: Kasutage värvikontrasti suhete kontrollimise tööriistu (nt WebAIMi kontrastikontrollija).

Kokkuvõte