Valintaikkunoiden hallinta: Saavutettavuuden varmistaminen modaalisissa ja ei-modaalisissa ikkunoissa

Käyttöliittymäsuunnittelussa (UI) valintaikkunoilla on keskeinen rooli käyttäjien kanssa vuorovaikutuksessa, tiedon tarjoamisessa tai syötteen pyytämisessä. Nämä valintaikkunat voivat ilmetä joko modaalisina tai ei-modaalisina ikkunoina, joista jokainen esittää ainutlaatuisia saavutettavuusnäkökohtia. Tämä opas perehtyy valintaikkunoiden hallinnan monimutkaisuuteen keskittyen kaikkien käyttäjien, heidän kyvyistään riippumatta, saavutettavuuden varmistamiseen noudattamalla vakiintuneita standardeja, kuten Web Content Accessibility Guidelines (WCAG), ja hyödyntämällä Accessible Rich Internet Applications (ARIA) -attribuutteja.

Modaalisten ja ei-modaalisten valintaikkunoiden ymmärtäminen

Ennen kuin sukellamme saavutettavuusnäkökohtiin, on tärkeää määritellä, mitä tarkoitamme modaalisilla ja ei-modaalisilla valintaikkunoilla:

Modaaliset valintaikkunat: Modaalinen valintaikkuna, joka tunnetaan myös nimellä modaalinen ikkuna, on käyttöliittymäelementti, joka luo tilan, joka poistaa käytöstä pääikkunan, mutta pitää sen näkyvissä siten, että modaalinen ikkuna on alaikkuna. Käyttäjien on oltava vuorovaikutuksessa modaalisen valintaikkunan kanssa ja yleensä suljettava se (esim. napsauttamalla vahvistuspainiketta tai "X"-kuvaketta), ennen kuin he voivat palata pääsovellusikkunaan. Yleisiä esimerkkejä ovat hälytysruudut, vahvistuskehotteet ja asetusruudut.
Ei-modaaliset valintaikkunat: Sitä vastoin ei-modaalinen valintaikkuna sallii käyttäjien olla vuorovaikutuksessa sekä valintaikkunan että pääsovellusikkunan kanssa samanaikaisesti. Valintaikkuna pysyy avoinna estämättä pääsyä sovelluksen muihin osiin. Esimerkkejä ovat työkalupaletit graafisessa editointiohjelmistossa tai chat-ikkunat viestisovelluksissa.

Valintaikkunoiden saavutettavuusnäkökohdat

Saavutettavuus on ensiarvoisen tärkeää käyttöliittymäsuunnittelussa. Sen varmistaminen, että valintaikkunat ovat saavutettavissa, tarkoittaa, että kaikki käyttäjät, mukaan lukien vammaiset, voivat käyttää niitä tehokkaasti. Tämä edellyttää useiden näkökohtien huomioimista, mukaan lukien:

Näppäimistönavigointi: Käyttäjien, jotka luottavat näppäimistönavigointiin, tulisi pystyä navigoimaan helposti valintaikkunoihin, niiden sisällä ja niistä ulos.
Näytönlukijayhteensopivuus: Näytönlukijoiden tulisi ilmoittaa tarkasti valintaikkunan tarkoitus ja sisältö sekä kaikki sen interaktiiviset elementit.
Kohdistuksen hallinta: Oikea kohdistuksen hallinta varmistaa, että näppäimistön kohdistus on asianmukaisesti sijoitettu, kun valintaikkuna avautuu, liikkuu valintaikkunassa ja palaa alkuperäiseen elementtiin, kun valintaikkuna sulkeutuu.
Visuaalinen selkeys: Valintaikkunoissa tulee olla riittävä kontrasti tekstin ja taustavärien välillä, ja visuaalisen asettelun tulee olla selkeä ja helppo ymmärtää.
Kosketuskoon koko: Kosketuspohjaisissa käyttöliittymissä valintaikkunoiden interaktiivisilla elementeillä tulisi olla riittävän kokoiset kosketuskohdat.
Kognitiivinen saavutettavuus: Valintaikkunoiden kielen ja sisällön tulee olla selkeitä, tiiviitä ja helppoja ymmärtää, mikä minimoi kognitiivisen kuormituksen.

ARIA-attribuutit valintaikkunoiden saavutettavuutta varten

ARIA (Accessible Rich Internet Applications) -attribuutit tarjoavat semanttista tietoa avustaville teknologioille, kuten näytönlukijoille, joiden avulla ne voivat tulkita ja esittää käyttöliittymäelementtejä tarkemmin. Tärkeimpiä ARIA-attribuutteja valintaikkunoiden saavutettavuuden kannalta ovat:

role="dialog" tai role="alertdialog": Tämä attribuutti tunnistaa elementin valintaikkunaksi. alertdialog-ominaisuutta tulisi käyttää valintaikkunoissa, jotka välittävät tärkeää tai kiireellistä tietoa.
aria-labelledby="[Otsikon tunnus]": Tämä attribuutti liittää valintaikkunan otsikkoelementtiin, joka kuvaa sen tarkoitusta.
aria-describedby="[Kuvauksen tunnus]": Tämä attribuutti liittää valintaikkunan kuvaavaan elementtiin, joka tarjoaa lisäkontekstia tai ohjeita.
aria-modal="true": Tämä attribuutti osoittaa, että valintaikkuna on modaalinen ja estää vuorovaikutuksen valintaikkunan ulkopuolisten elementtien kanssa. Se on kriittinen modaalisen käyttäytymisen välittämiseksi avustaville teknologioille.
tabindex="0": tabindex="0" -ominaisuuden asettaminen valintaikkunan elementille mahdollistaa sen kohdistuksen näppäimistönavigoinnin avulla.

Modaalisen valintaikkunan saavutettavuus: Parhaat käytännöt

Modaaliset valintaikkunat aiheuttavat ainutlaatuisia saavutettavuushaasteita estävän luonteensa vuoksi. Tässä on joitain parhaita käytäntöjä modaalisen valintaikkunan saavutettavuuden varmistamiseksi:

1. Oikeat ARIA-attribuutit

Kuten aiemmin mainittiin, role="dialog" -ominaisuuden (tai role="alertdialog" kiireellisille viesteille), aria-labelledby-, aria-describedby- ja aria-modal="true" -ominaisuuden käyttö on ratkaisevan tärkeää valintaikkunan ja sen tarkoituksen tunnistamiseksi avustavien teknologioiden avulla.

Esimerkki:


 <div role="dialog" aria-labelledby="confirmation-heading" aria-modal="true">
  <h2 id="confirmation-heading">Vahvista poisto</h2>
  <p>Haluatko varmasti poistaa tämän kohteen? Tätä toimintoa ei voi kumota.</p>
  <button>Vahvista</button>
  <button>Peruuta</button>
 </div>

2. Kohdistuksen hallinta

Kun modaalinen valintaikkuna avautuu, näppäimistön kohdistuksen tulisi siirtyä välittömästi ensimmäiseen interaktiiviseen elementtiin valintaikkunassa (esim. ensimmäiseen painikkeeseen tai syöttökenttään). Kun valintaikkuna sulkeutuu, kohdistuksen tulisi palata elementtiin, joka käynnisti valintaikkunan.

Toteutusnäkökohdat:

JavaScript: Käytä JavaScriptiä asettaaksesi kohdistuksen ohjelmallisesti sopivaan elementtiin, kun valintaikkuna avautuu ja sulkeutuu.
Kohdistuksen lukitus: Ota käyttöön kohdistuksen lukitus varmistaaksesi, että näppäimistön kohdistus pysyy valintaikkunassa sen ollessa auki. Tämä estää käyttäjiä siirtymästä vahingossa pois valintaikkunasta ja menettämästä paikkaansa. Tämä saavutetaan usein JavaScriptin avulla kuuntelemalla sarkainnäppäimen painalluksia ja tarvittaessa kierrättämällä kohdistus takaisin valintaikkunan alkuun tai loppuun.

Esimerkki (konseptuaalinen 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. Näppäimistön saavutettavuus

Varmista, että kaikki valintaikkunan interaktiiviset elementit ovat käytettävissä ja aktivoitavissa näppäimistön avulla. Tähän sisältyvät painikkeet, linkit, lomakekentät ja kaikki mukautetut ohjaimet.

Huomioitavaa:

Sarkainjärjestys: Sarkainjärjestyksen tulee olla looginen ja intuitiivinen. Yleensä sarkainjärjestyksen tulisi noudattaa valintaikkunan visuaalista asettelua.
Pikanäppäimet: Tarjoa pikanäppäimiä valintaikkunan yleisiin toimintoihin (esim. Esc-näppäimen käyttäminen valintaikkunan sulkemiseen tai Enter-näppäimen käyttäminen toiminnon vahvistamiseen).

4. Visuaalinen suunnittelu

Modaalisen valintaikkunan visuaalisen suunnittelun tulisi selvästi osoittaa, että se on erillinen pääsovellusikkunasta. Tämä voidaan saavuttaa käyttämällä kontrastiväriä, erillistä reunusta tai varjostustehostetta. Varmista riittävä värikontrasti tekstin ja taustan välillä luettavuuden varmistamiseksi.

5. Semanttinen HTML

Käytä semanttisia HTML-elementtejä aina kun mahdollista. Käytä esimerkiksi <button>-elementtejä painikkeille, <label>-elementtejä lomakkeen syötteiden merkitsemiseen ja <h2>- tai <h3>-elementtejä otsikoille.

6. Kansainvälistäminen ja lokalisointi

Ota huomioon eri kulttuuritaustoista tulevien käyttäjien tarpeet suunnitellessasi ja toteuttaessasi valintaikkunoita. Tähän sisältyy valintaikkunan sisällön lokalisoidut versiot ja sen varmistaminen, että valintaikkunan asettelu mukautuu asianmukaisesti eri tekstisuuntiin (esim. oikealta vasemmalle -kieliin).

Esimerkki: Vahvistusvalintaikkuna, jossa käyttäjää pyydetään poistamaan tilinsä, tulisi kääntää tarkasti ja kulttuurisesti sopivasti jokaiselle kohdekielelle. Asettelu saattaa myös vaatia säätöjä oikealta vasemmalle -kielille.

Ei-modaalisen valintaikkunan saavutettavuus: Parhaat käytännöt

Ei-modaaliset valintaikkunat, vaikka ne ovatkin vähemmän häiritseviä kuin modaaliset valintaikkunat, vaativat silti huolellista huomiota saavutettavuuteen. Tässä on joitain parhaita käytäntöjä:

1. Selkeä visuaalinen erottuvuus

Varmista, että ei-modaalinen valintaikkuna on visuaalisesti erillinen pääsovellusikkunasta sekaannuksen välttämiseksi. Tämä voidaan saavuttaa reunuksen, taustavärin tai hienovaraisen varjon avulla.

2. Kohdistuksen hallinta

Vaikka ei-modaaliset valintaikkunat eivät estä vuorovaikutusta pääikkunan kanssa, oikea kohdistuksen hallinta on edelleen ratkaisevan tärkeää. Kun valintaikkuna avautuu, kohdistuksen tulisi siirtyä ensimmäiseen interaktiiviseen elementtiin valintaikkunassa. Käyttäjien tulisi pystyä helposti vaihtamaan valintaikkunan ja pääikkunan välillä näppäimistönavigoinnin avulla.

3. ARIA-attribuutit

Käytä role="dialog"-, aria-labelledby- ja aria-describedby -ominaisuuksia tarjotaksesi semanttista tietoa valintaikkunasta avustaville teknologioille. aria-modal="false" -ominaisuuden käyttäminen tai aria-modal-ominaisuuden poisjättäminen on tärkeää ei-modaalisten valintaikkunoiden erottamiseksi modaalisista.

Esimerkki:


 <div role="dialog" aria-labelledby="font-settings-heading">
  <h2 id="font-settings-heading">Fonttiasetukset</h2>
  <label for="font-size">Fonttikoko:</label>
  <input type="number" id="font-size" value="12">
  <button>Käytä</button>
 </div>

4. Näppäimistön saavutettavuus

Varmista, että kaikki valintaikkunan interaktiiviset elementit ovat käytettävissä ja aktivoitavissa näppäimistön avulla. Sarkainjärjestyksen tulee olla looginen ja intuitiivinen, jotta käyttäjät voivat helposti navigoida valintaikkunan ja pääikkunan välillä.

5. Vältä päällekkäisyyksiä

Vältä ei-modaalisten valintaikkunoiden sijoittamista siten, että ne peittävät tärkeää sisältöä pääsovellusikkunassa. Valintaikkuna tulisi sijoittaa selkeään ja helppokäyttöiseen paikkaan.

6. Tietoisuus ja viestintä

Kun ei-modaalinen valintaikkuna avautuu, on hyödyllistä visuaalisesti tai auditiivisesti (ARIA live regionien avulla) ilmoittaa käyttäjälle, että uusi valintaikkuna on ilmestynyt, varsinkin jos se avautuu taustalla eikä välttämättä ole heti ilmeinen.

Käytännön esimerkkejä ja koodinpätkiä

Tarkastellaan joitain käytännön esimerkkejä ja koodinpätkiä havainnollistamaan näitä käsitteitä.

Esimerkki 1: Modaalinen vahvistusvalintaikkuna


 <button id="delete-button" onclick="openModal('delete-confirmation-modal', 'delete-button')">Poista kohde</button>

 <div id="delete-confirmation-modal" role="dialog" aria-labelledby="delete-heading" aria-modal="true" style="display:none;">
  <h2 id="delete-heading">Vahvista poisto</h2>
  <p>Haluatko varmasti poistaa tämän kohteen? Tätä toimintoa ei voi kumota.</p>
  <button onclick="//Poista kohteen logiikka; closeModal('delete-confirmation-modal', 'delete-button')">Vahvista</button>
  <button onclick="closeModal('delete-confirmation-modal', 'delete-button')">Peruuta</button>
 </div>

Esimerkki 2: Ei-modaalinen fonttiasetusvalintaikkuna


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

 <div id="font-settings-dialog" role="dialog" aria-labelledby="font-settings-heading" style="display:none;">
  <h2 id="font-settings-heading">Fonttiasetukset</h2>
  <label for="font-size">Fonttikoko:</label>
  <input type="number" id="font-size" value="12"><br>
  <label for="font-family">Fonttiperhe:</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="//Käytä fonttiasetusten logiikkaa">Käytä</button>
 </div>

Testaus ja validointi

Perusteellinen testaus on välttämätöntä valintaikkunoiden saavutettavuuden varmistamiseksi. Tähän sisältyy:

Manuaalinen testaus: Käytä näppäimistöä ja näytönlukijaa navigoidaksesi valintaikkunoissa ja ollaksesi vuorovaikutuksessa niiden kanssa.
Automatisoitu testaus: Käytä saavutettavuuden testausvälineitä mahdollisten saavutettavuusongelmien tunnistamiseen. Työkalut, kuten Axe DevTools, WAVE ja Lighthouse, voivat auttaa automatisoimaan saavutettavuustarkistuksia.
Käyttäjätestaus: Suorita käyttäjätestausta vammaisten henkilöiden kanssa saadaksesi palautetta valintaikkunoiden käytettävyydestä ja saavutettavuudesta.

WCAG-yhteensopivuus

Web Content Accessibility Guidelines (WCAG) -ohjeiden noudattaminen on ratkaisevan tärkeää saavutettavien valintaikkunoiden luomiseksi. Asiaankuuluvia WCAG-onnistumiskriteerejä ovat:

1.1.1 Muu kuin tekstisisältö: Tarjoa tekstivastineita muulle kuin tekstisisällölle (esim. kuville, kuvakkeille).
1.3.1 Info ja suhteet: Varmista, että tiedot ja suhteet välitetään merkinnöillä tai data-attribuuteilla.
1.4.3 Kontrasti (vähimmäis): Varmista riittävä kontrasti tekstin ja taustavärien välillä.
2.1.1 Näppäimistö: Tee kaikki toiminnot käytettävissä näppäimistöltä.
2.4.3 Kohdistuksen järjestys: Varmista, että kohdistuksen järjestys on looginen ja intuitiivinen.
2.4.7 Kohdistus näkyvissä: Varmista, että kohdistusindikaattori on aina näkyvissä.
3.2.1 Kohdistuksessa: Varmista, että komponentit eivät saa kohdistusta odottamatta.
4.1.2 Nimi, rooli, arvo: Varmista, että kaikkien käyttöliittymäkomponenttien nimen, roolin ja arvon avustavat teknologiat voivat määrittää ohjelmallisesti.

Globaalit näkökohdat

Kun suunnittelet valintaikkunoita maailmanlaajuiselle yleisölle, ota huomioon seuraavat asiat:

Lokalisointi: Käännä kaikki tekstisisältö asianmukaisille kielille.
Kansainvälistäminen: Varmista, että valintaikkunan asettelu mukautuu asianmukaisesti eri tekstisuuntiin ja kulttuurisiin käytäntöihin. Päivämäärä- ja aikamuodot, valuuttasymbolit ja osoitemuodot vaihtelevat huomattavasti eri kulttuureissa.
Kulttuurinen herkkyys: Vältä käyttämästä kuvia tai symboleja, jotka voivat olla loukkaavia tai sopimattomia tietyissä kulttuureissa.

Esimerkki: Japanissa käytetyn valintaikkunan on ehkä sovitettava pystysuorat tekstiasettelut ja erilaiset päivämäärämuodot kuin Yhdysvalloissa käytetyn valintaikkunan.

Johtopäätös

Saavutettavien valintaikkunoiden luominen, sekä modaalisten että ei-modaalisten, on olennainen osa osallistavaa käyttöliittymäsuunnittelua. Noudattamalla tässä oppaassa esitettyjä parhaita käytäntöjä, noudattamalla WCAG-ohjeita ja hyödyntämällä ARIA-attribuutteja tehokkaasti, kehittäjät voivat varmistaa, että kaikki käyttäjät, heidän kyvyistään riippumatta, voivat olla vuorovaikutuksessa valintaikkunoiden kanssa saumattomasti ja tehokkaasti. Muista, että saavutettavuudessa ei ole kyse vain yhteensopivuudesta; siinä on kyse osallistavamman ja oikeudenmukaisemman käyttökokemuksen luomisesta kaikille. Jatkuva testaus ja palautteen kerääminen vammaisilta käyttäjiltä on ratkaisevan tärkeää saavutettavuusongelmien tunnistamiseksi ja korjaamiseksi sekä yleisen käyttökokemuksen parantamiseksi. Priorisoimalla saavutettavuutta voit luoda valintaikkunoita, jotka eivät ole vain toimivia ja visuaalisesti houkuttelevia, vaan myös käyttökelpoisia ja nautinnollisia kaikille käyttäjille maailmanlaajuisesti.