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.
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ä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.