Pudotusvalikoita

Pudotusvalikoita ovat käyttöliittymän elementtejä, jotka tarjoavat listan vaihtoehtoja, joista käyttäjä voi valita yhden tai useamman. Ne ovat piilotettuina, kunnes käyttäjä avaa ne aktivoimalla pudotusvalikon hallintalaitteen, kuten napin tai linkin. Yleensä valikoita täydennetään hallintalaitteella sekä avautuvalla listalla, jossa kukin vaihtoehto on yksi kohde. Valikoita voidaan ryhmitellä ja joissain toteutuksissa ne tukevat useampia valintoja.

Käyttö ja vuorovaikutus: Avataan hallintalaitteesta; näppäimistön avulla kohteita voidaan selata nuolinäppäimillä, ja Enterillä tai välilyönnillä valitaan kohde. Escape sulkee valikon ja palauttaa fokuksen hallintalaitteeseen. Kun vaihtoehto on valittu, valinnan tila säilyy, kunnes käyttäjä valitsee toisen vaihtoehdon.

Saavutettavuus: Tärkeitä ovat asianmukaiset roolit ja aria-tunnisteet. aria-expanded kertoo valikon avoimuudesta, aria-controls viittaa avattavaan listaan, ja roolit kuten menu tai listbox auttavat ruudunlukijoita ymmärtämään rakennetta. Hyvä käytäntö on varmistaa, että kaikkia toimintoja voidaan käyttää sekä näppäimistöllä että kosketuksella, ja että valikko on näkyvästi merkitty.

Toteutukset: Natiivina HTML:ssa pudotusvalikoima voidaan toteuttaa select-elementtinä, joka tarjoaa valinnan ilman suurta räätälöintiä. Mukautetut pudotusvalikot toteutetaan usein button-elementin avulla sekä erillisenä listana, johon liittyy näppäimistö- ja ruudunlukijätuki. Mobiilikäytössä panostetaan kosketusystävälliseen pienien kohteiden käsittelyyn.

Käyttökohteet: Pudotusvalikoita käytetään navigaatiossa, lomakkeissa ja suodatusvaihtoehdoissa. Ne auttavat tilan säästämisessä ja valintojen selkeyttämisessä.

---