Suunnittelumallit
Multi-insert
Lomakkeissa on toisinaan tarpeen lisätä sama moduuli eli tietokenttä tai tietokenttien yhdistelmä useaan kertaan. Tämän kaltaisen dynaamisen toiminnallisuuden toteuttamisessa on kiinnitettävä erityistä huomiota käytettävyyteen ja saavutettavuuteen.
Malli rakentuu seuraavista komponenteista:
- Block (Lohko)Avautuu uudessa välilehdessä
- Button (Painike)Avautuu uudessa välilehdessä
- Label (Otsake)Avautuu uudessa välilehdessä
- Hint text (Ohjeteksti)Avautuu uudessa välilehdessä
- Toast (Ponnahdusilmoitus)Avautuu uudessa välilehdessä
- sekä varsinaisista moduulin sisältämistä lomakekomponenteista
Saavutettavuus ja käytettävyys
- Multi-insert-suunnittelumalli vaatii erityistä huomiota fokuksen oikean siirtymisen suhteen. Fokuksen siirtyminen on kuvattu erikseen jäljempänä tällä sivulla.
- On hyvä tuoda selkeällä tekstillä ilmi, että moduuleita (referenssitoteutuksessa verkkosivuja) voi lisätä useita.
- Jokaisen moduulin yhteydessä olevaan poista-painikkeeseen tulee liittää ruudunlukijaa varten uniikki tieto siitä tiedosta, jota ollaan poistamassa. Referenssitoteutuksessa on esitetty, miten painikkeen aria-label muuttuu dynaamisesti moduulin tärkeimmän tietokentän arvon mukaan.
- Moduulin poistamisen jälkeen näytetään ponnahdusilmoitus (toast), jolle on asetettu rooliksi alert. Tämän johdosta myös ruudunlukijakäyttäjät saavat tiedon poistamisesta.
- Mikäli lomaketta tallennettaessa moduuleita on jäänyt kokonaan tyhjäksi, ei niitä huomioida, vaan ne poistetaan tallennetusta versiosta. Jos yksittäisiä pakollisia tietoja on jäänyt puuttumaan moduulin sisällä, ne indikoidaan tavalliseen tapaan komponenttien statustekstien avulla.
Fokuksen siirtäminen
- Moduulia lisättäessä fokus siirtyy juuri lisätyn moduulin ensimmäiseen tietokenttään.
- Moduulia poistettaessa
- Mikäli moduuleita on vain yksi, fokus siirtyy "Lisää uusi" -painikkeeseen.
- Mikäli moduuleita on useita ja muu kuin viimeinen moduuli poistetaan, fokus siirtyy seuraavan moduulin ensimmäiseen tietokenttään.
- Mikäli moduuleita on useita ja viimeinen moduuli poistetaan, fokus siirtyy edellisen moduulin ensimmäiseen tietokenttään.
Referenssitoteutus
Alta löydät käytettävyydeltään ja saavutettavuudeltaan hiotun interaktiivisen referenssitoteutuksen multi-insert-suunnittelumallista. Toteutuksen lähdekoodiin voi tutustua oheisesta linkistä.
Lähdekoodi GitHubissaAvautuu uudessa välilehdessä