Siirry pääsisältöönSiirry sivunavigaatioon

Dropdown (Pudotusvalikko)

Pudotusvalikko kokoaa sisältölistan monesta valittavasta vaihtoehdosta joista käyttäjä voi valita yhden. Pudotusvalikosta voidaan myös aktivoida toimintoja.

Saavutettavuus ja käytettävyys

  • Huomioi pudotusvalikon asettamat mahdolliset kognitiiviset saavutettavuushaasteet. Käytä komponenttia harkiten ja mieti tarkoin pudotusvalikon sisältö.
  • Yhdellä silmäyksellä hahmotettava valintalista tukee kognitiivista saavutettavuutta. Mieti, olisiko pudotusvalikon yhteydessä mahdollista tarjota edeltävä rajaus, joka vähentäisi pudotusvalikon valintavaihtoehtoja.
  • Pyri välttämään kaiken ylimääräisen lisäinformaation esittämistä pudotusvalikon yhteydessä.
  • Jos valintavaihtoehtoja on vain muutama, hyvä vaihtoehto pudotusvalikolle voi olla valintaruutu- tai valintanappikomponentti.
  • Järjestä pudotusvalikon sisältö aakkosjärjestykseen tai relevanssin mukaan.
  • Pudotusvalikon yhteydessä tulee aina käyttää otsaketta (label)
  • Ruudunlukijat eivät lue täytetekstiä (visual placeholder). Täyteteksti myös katoaa käyttäjän tehtyä valinnan, joten sitä ei tule käyttää ohjeistukseen

Mistä komponentti koostuu

Pudotusvalikko koostuu otsakkeesta, valikkopainikkeesta sekä valikosta, joka aukeaa valikkopainiketta painamalla. Pudostusvalikon otsake (label) ilmaisee selkeästi ja lyhyesti mitä pudotusvalikko sisältää. Kun käyttäjä tekee valinnan, valikko sulkeutuu ja valittu arvo näkyy valikkopainikkeessa.

Koko ja käyttö

Pudotusvalikko säästää tilaa käyttöliittymässä sekä vähentää valinta- ja tekstinsyöttövirheitä tarjoamalla käyttäjälle listan valmiiksi valituista vaihtoehdoista. Pudotusvalikkon avulla käyttäjä valitsee listasta yhden vaihtoehdon. Pudotusvalikolle voidaan antaa oletusarvo tai näyttää oletuksena haluttu täyteteksti (visual placeholder) valikkopainikkeessa. Täyteteksti katoaa käyttäjän tehtyä valinnan.

Toimintovalikko (Action Menu)

Pudotusvalikkoa voidaan käyttää myös toimintojen aktivoimiseen, jolloin komponenttia kutsutaan toimintovalikoksi. Tällöin annettu täyteteksti on aina näkyvissä eivätkä tehdyt valinnat muuta komponentin tilaa.