pudotusvalikkoa

Pudotusvalikko on käyttäjärajapinnan komponentti, jonka avulla käyttäjä voi valita yhden vaihtoehdon ennalta määritellystä listasta. Tyypillisesti pudotusvalikko koostuu näkyvästä avaimesta tai tekstikentästä, jota klikkaamalla tai koskettamalla avautuu piilossa oleva lista. Kun käyttäjä tekee valinnan, valittu vaihtoehto näkyy päällä ja valikko sulkeutuu.

Sovelluksissa pudotusvalikkoja voidaan toteuttaa kahdella päätyypillä. Tiedostettu, natiivi HTML select -elementti tarjoaa perustoiminnallisuuden ja lupaavat selaimen omat saavutettavuusominaisuudet. Vaihtoehtoisesti mukautettu pudotusvalikko rakentuu usein div- tai button-elementeistä, joissa käytetään ARIA-rooleja ja tunnisteita kuten role="combobox" tai role="listbox" sekä aria-expanded ja aria-controls -attribuutioita. Tällöin ulkoasua ja käyttäytymistä voidaan kontrolloida tarkemmin, mutta saavutettavuudesta on huolehdittava erikseen.

Toiminta ja käytettävyys ovat keskeisiä: avaaminen voi tapahtua klikkaamalla tai koskettamalla, ja valinnan tekeminen suoritetaan Enter- tai Space-näppäimellä. Näppäimistöystävällisyys sekä näkyvä fokus on tärkeä osa saavutettavuutta, samoin hyvä kontrasti, lyhyet reitit, ja mahdollisuus sulkea valikko Esc- tai ulkosen tilan avulla. Jos valikko sisältää paljon vaihtoehtoja, on tärkeää tukea skrollausta sekä suojata ettei valinnat katoa näkyvistä.

Ympäristö- ja kehityskäytännöt suosittelevat käytännön tasolla sekä natiivia että mukautettua lähestymistapaa: käytä semanttisia elementtejä, testaa eri selaimilla ja laitteilla, ja panosta saavutettavuuteen sekä saavutettavan suunnittelun ohjeisiin. Pudotusvalikko on monikäyttöinen komponentti, joka parantaa valintojen suorituskykyä ja käytettävyyttä monenlaisissa sovelluksissa.