Suunnittelumallit
Päivämäärä ja kellonaika
Ajankohdan eli päivämäärän ja kellonajan yhteinen lisääminen lomakkeissa vaatii erityistä huomiointia saavutettavuuden osalta. Saavutettavuus- ja käytettävyyshuomiot on eritelty jäljempänä tällä sivulla.
Referenssitoteutus
Alta löydät käytettävyydeltään ja saavutettavuudeltaan hiotun interaktiivisen referenssitoteutuksen päivämäärän ja kellonajan sisältävästä suunnittelumallista. Toteutuksen lähdekoodiin voi tutustua oheisesta linkistä.
Lähdekoodi GitHubissaAvautuu uudessa välilehdessäKaksi ajankohtaa
Kun ajankohtia määritetään kaksi ja ne ovat loogisesti toisistaan riippuvaisia (esimerkiksi alkuajankohta ja loppuajankohta), tulee toteutuksesta vielä hiukan monimutkaisempi. Tutustu jäljempänä tällä sivulle esitettyihin saavutettavuus- ja käytettävyyshuomioihin.
Lähdekoodi GitHubissaAvautuu uudessa välilehdessäSaavutettavuus ja käytettävyys
- Päivämääräkentän ja kellonaikakentän yhdistelmä tulee asettaa HTML fieldset -elementin sisään ja antaa yhdistelmälle kuvaava legend-tieto (referenssitoteutuksessa Julkaisuajankohta)
- Työpöytäkoossa kenttien formaattiohjeet annetaan legendin alapuolelle erillisissä ohjetekstikomponenteissa (HintText). Näille elementeille tulee antaa id:t, joihin viitataan vastaavan input-kentän aria-describedby -attribuutissa
- Vastaavasti myös kenttien tilat ilmoitetaan erillisillä tilatekstikomponenteilla (StatusText) kenttien alapuolella. Myös näille elementeille tulee antaa id:t, joihin viitataan vastaavan input-kentän aria-describedby -attribuutissa.
- Mobiilikoossa input-kentät näytetään allekkain, jolloin käytetään erillisten ohje- ja tilatekstikomponenttien sijaan komponenttien sisäänrakennettuja hintText- ja statusText-toimintoja.
- Päivämäärän ja kellonajan yhdistelmän sisältävä lomake on suositeltavaa validoida vasta lomakkeen lähettämisen yhteydessä (staattinen validointi).
- Mikäli kentissä on virheitä, siirretään selaimen kohdistus ohjelmallisesti ensimmäiseen virheelliseen kenttään tai erilliseen virhekoosteeseen.
- Stattista validointia käytettäessä tilatekstien (StatusText) aria-live -toiminnallisuus tulee kytkeä pois päältä.
- Vaihtoehtoisesti staattisen validoinnin voi suorittaa myös kohdistuksen siirtyessä pois kentästä (onBlur event)
- Ajankohtavälin (kaksi kenttäparia) erityishuomiot
- Aseta sekä alkamis- että päättymisajankohdan input-kentät saman fieldsetin sisään. Käytä fieldsetin legend-tietona kentät määritelmällisesti yhdistävää termiä (referenssitoteutuksessa Tapahtuman ajankohta)
- Legend-tiedon alla esitetyt formaattiohjeet (HintText) tulee liittää ohjelmallisesti kaikkiin vastaaviin input-kenttiin käyttäen aria-describedby -attribuuttia.
- Katso kahden ajankohdan referenssitoteutuksesta mallia kenttien nimilapuille (labelText). Kellonaikakenttien nimilaput voivat olla geneerisiä tilan säästämiseksi, mutta niiden tulee viitata ohjelmallisesti vastaavaan päivämääräkenttään (aria-describedby -attribuutti), jotta kenttien konteksti välittyy selkeästi ruudunlukijoille.
- Kun validoidaan ajankohtien keskinäistä järjestystä (päättymisajankohta ei saa olla ennen alkamisajankohtaa), näytetään kyseinen virhe ainoastaan päättymisajankohdan kentissä.
- Tutustu tältä sivulta löytyvien referenssitoteutuksiin, joissa saavutettavuus- ja käytettävyysasiat on demonstroitu.