Pudotusvalikoissa

Pudotusvalikoissa viitataan käyttöliittymän kontrollielementteihin, jotka esittävät käyttäjälle ennalta määritellyn listan vaihtoehdoista. Kun käyttäjä aktivoi kentän, lista avautuu pudotettuna alas ja näyttää vaihtoehdot valittavaksi. Valinta korvaa kentän näkyvän arvon.

Pudotusvalikoita käytetään sekä verkkoympäristöissä että ohjelmistosovelluksissa. Yleisiä tyyppejä ovat native pudotusvalikot, jotka toteutetaan HTML:n select-elementillä, sekä räätälöidyt ratkaisut, joissa lista rakennetaan esimerkiksi div- ja ul/li-elementeistä. Eri toteutuksilla on etuja ja haasteita ulkoasun hallinnan sekä saavutettavuuden kannalta.

Native toteutus on HTML:ssä select ja option -elementit. Valinnan vaikutus voi olla single- tai multi-select (attributen multiple). Hyödyllisiä lisäominaisuuksia ovat optgroup-ryhmittely, placeholder-tyyppinen vaihtoehto ja size-attribuutti, jolla voidaan näyttää useampi rivi listaa kerralla.

Saavutettavuus on keskeinen pudotusvalikoissa. Native select tukee yleensä näppäimistöä ja ruudunlukijoita ilman lisäkonfiguraatiota. Räätälöidyissä toteutuksissa on tärkeää käyttää ARIA-merkintöjä (esim. aria-expanded, aria-controls, role=combobox tai role=listbox), sekä hallita fokusoituvuutta, ja tarjota toimintoja Esc- ja Enter-näppäimillä.

Suunnittelussa kannattaa huomioida pitkä lista: hakutoiminnot voivat parantaa löydettävyyttä, optgroup-ryhmittely ja järkevä järjestys helpottavat skannauksia. Lisäksi käytetään selkeitä sanoja, vältetään epäolennaisia vaihtoehtoja ja varmistetaan riittävä kontrasti.

Pudotusvalikot ovat olennainen osa monia käyttöliittymiä ja ne ovat kehittyneet perinteisistä sekä moderneista sovelluksista kokonaisuuksia.